npm - @skbkontur/react-ui - Versions diffs - 4.14.0-next.0 → 4.14.0 - Mend

@skbkontur/react-ui 4.14.0-next.0 → 4.14.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 (1122) hide show

package/components/Textarea/Textarea.styles/Textarea.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
@@ -8,36 +8,39 @@ export var styles = memoizeStyle({
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      position: relative;\n    "])), t.textareaFontSize, t.textareaLineHeight);
   },
   textarea: function textarea(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background-clip: padding-box;\n      background: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      min-height: ", ";\n      outline: none;\n      padding: ", " ", ";\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])), t.textareaBg, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.textareaMinHeight, t.textareaPaddingY, t.textareaPaddingX, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaPlaceholderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background: ", ";\n      background-clip: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      min-height: ", ";\n      outline: none;\n      padding: ", " ", ";\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])), t.textareaBg, t.textareaBackgroundClip, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.textareaMinHeight, t.textareaPaddingY, t.textareaPaddingX, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaPlaceholderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
+  },
+  hovering: function hovering(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:enabled:hover:not(:focus) {\n        border-color: ", ";\n      }\n    "])), t.textareaBorderColorHover);
   },
   error: function error(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorError, t.textareaBorderWidth, t.textareaBorderColorError, t.textareaBorderColorError, t.textareaOutlineWidth, t.textareaBorderColorError);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorError, t.textareaBorderWidth, t.textareaBorderColorError, t.textareaBorderColorError, t.textareaOutlineWidth, t.textareaBorderColorError);
   },
   warning: function warning(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning, t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning, t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning);
   },
   disabled: function disabled(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.textareaTextColorDisabled, t.textareaDisabledBg, t.textareaDisabledBorderColor, t.textareaPlaceholderColorDisabled);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.textareaTextColorDisabled, t.textareaDisabledBg, t.textareaDisabledBorderColor, t.textareaPlaceholderColorDisabled);
   },
   fake: function fake() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
   },
   placeholder: function placeholder() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
   },
   counterContainer: function counterContainer(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])), t.textareaBorderWidth);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])), t.textareaBorderWidth);
   },
   counter: function counter(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n      right: ", ";\n      bottom: ", ";\n    "])), t.textareaCounterBg, t.textareaCounterColor, t.textareaPaddingX, t.textareaPaddingY);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n      right: ", ";\n      bottom: ", ";\n    "])), t.textareaCounterBg, t.textareaCounterColor, t.textareaPaddingX, t.textareaPaddingY);
   },
   counterError: function counterError(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textareaCounterErrorColor);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textareaCounterErrorColor);
   },
   counterHelp: function counterHelp() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
   },
   disableAnimations: function disableAnimations() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      transition: none;\n    "])));
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      transition: none;\n    "])));
   }
 });

package/components/Textarea/Textarea.styles/Textarea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Textarea.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"~~6TAAA~~,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;;AAEeI,IAAAA,CAAC,CAACC,gBAFjB;AAGiBD,IAAAA,CAAC,CAACE,kBAHnB;;;AAMD,GARgC;;AAUjCC,EAAAA,QAViC,oBAUxBH,CAVwB,EAUd;AACjB,WAAOJ,GAAP~~;;;AAGgBI~~,IAAAA,CAAC,CAACI,~~UAHlB~~;~~AAIYJ~~,IAAAA,CAAC,CAACK,~~mBAJd~~,~~EAI2CL~~,CAAC,CAACM,mBAJ7C;~~AAKsBN~~,IAAAA,CAAC,~~CAACO~~,sBALxB;~~AAMgBP~~,IAAAA,CAAC,~~CAACQ~~,cANlB;;~~AAQWR~~,IAAAA,CAAC,~~CAACS~~,aARb;;;;;~~AAaeT~~,IAAAA,CAAC,~~CAACU~~,aAbjB;~~AAcgBV~~,IAAAA,CAAC,~~CAACW~~,iBAdlB;;~~AAgBaX~~,IAAAA,CAAC,~~CAACY~~,gBAhBf,~~EAgBmCZ~~,CAAC,~~CAACa~~,gBAhBrC;;;;~~AAoBmBb~~,IAAAA,CAAC,~~CAACc~~,oBApBrB;;;;~~AAwBoBd~~,IAAAA,CAAC,~~CAACe~~,wBAxBtB;~~AAyBwBf~~,IAAAA,CAAC,~~CAACgB~~,oBAzB1B,~~EAyBkDhB~~,CAAC,~~CAACe~~,wBAzBpD;;;;;~~AA8Bef~~,IAAAA,CAAC,~~CAACiB~~,6BA9BjB;;;;;~~AAmCajB~~,IAAAA,CAAC,~~CAACkB~~,wBAnCf;;;;~~AAuCalB~~,IAAAA,CAAC,~~CAACkB~~,wBAvCf;;;;~~AA2CalB~~,IAAAA,CAAC,~~CAACkB~~,wBA3Cf;;;AA8CD,GAzDgC;;AA2DjCC,EAAAA,~~KA3DiC~~,~~iBA2D3BnB~~,~~CA3D2B~~,~~EA2DjB~~;AACd,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,~~CAACoB~~,wBADpB;~~AAEsBpB~~,IAAAA,CAAC,~~CAACK~~,mBAFxB,EAE+CL,CAAC,~~CAACoB~~,wBAFjD;;;~~AAKoBpB~~,IAAAA,CAAC,~~CAACoB~~,wBALtB;~~AAMwBpB~~,IAAAA,CAAC,~~CAACgB~~,oBAN1B,~~EAMkDhB~~,CAAC,~~CAACoB~~,wBANpD;;;AASD,~~GArEgC~~;;~~AAuEjCC~~,EAAAA,~~OAvEiC~~,~~mBAuEzBrB~~,~~CAvEyB~~,~~EAuEf~~;AAChB,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,~~CAACsB~~,0BADpB;~~AAEsBtB~~,IAAAA,CAAC,~~CAACgB~~,oBAFxB,~~EAEgDhB~~,CAAC,~~CAACsB~~,0BAFlD;;;~~AAKoBtB~~,IAAAA,CAAC,~~CAACsB~~,0BALtB;~~AAMwBtB~~,IAAAA,CAAC,~~CAACgB~~,oBAN1B,~~EAMkDhB~~,CAAC,~~CAACsB~~,0BANpD;;;AASD,~~GAjFgC~~;;~~AAmFjCC~~,EAAAA,~~QAnFiC~~,~~oBAmFxBvB~~,~~CAnFwB~~,~~EAmFd~~;AACjB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,~~CAACwB~~,yBADb;~~AAEgBxB~~,IAAAA,CAAC,~~CAACyB~~,kBAFlB;~~AAGkBzB~~,IAAAA,CAAC,~~CAAC0B~~,2BAHpB;;;;~~AAOa1B~~,IAAAA,CAAC,~~CAAC2B~~,gCAPf;;;AAUD,~~GA9FgC~~;;~~AAgGjCC~~,EAAAA,~~IAhGiC~~,~~kBAgG1B~~;AACL,~~WAAOhC~~,GAAP;;;;;;;;AAQD,~~GAzGgC~~;;~~AA2GjCiC~~,EAAAA,~~WA3GiC~~,~~yBA2GnB~~;AACZ,~~WAAOjC~~,GAAP;;;;;;;;;;;AAWD,~~GAvHgC~~;;~~AAyHjCkC~~,EAAAA,~~gBAzHiC~~,~~4BAyHhB9B~~,~~CAzHgB~~,~~EAyHN~~;AACzB,WAAOJ,GAAP;;;AAGYI,IAAAA,CAAC,~~CAACK~~,mBAHd;;;AAMD,~~GAhIgC~~;;~~AAkIjC0B~~,EAAAA,~~OAlIiC~~,~~mBAkIzB/B~~,~~CAlIyB~~,~~EAkIf~~;AAChB,WAAOJ,GAAP;;;;AAIgBI,IAAAA,CAAC,~~CAACgC~~,iBAJlB;~~AAKWhC~~,IAAAA,CAAC,~~CAACiC~~,oBALb;;~~AAOWjC~~,IAAAA,CAAC,~~CAACa~~,gBAPb;~~AAQYb~~,IAAAA,CAAC,~~CAACY~~,gBARd;;AAUD,~~GA7IgC~~;;~~AA+IjCsB~~,EAAAA,~~YA/IiC~~,~~wBA+IpBlC~~,~~CA/IoB~~,~~EA+IV~~;AACrB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,~~CAACmC~~,yBADb;;AAGD,~~GAnJgC~~;;~~AAqJjCC~~,EAAAA,~~WArJiC~~,~~yBAqJnB~~;AACZ,~~WAAOxC~~,GAAP;;;;AAID,~~GA1JgC~~;;~~AA4JjCyC~~,EAAAA,~~iBA5JiC~~,+~~BA4Jb~~;AAClB,~~WAAOzC~~,GAAP;;;AAGD,~~GAhKgC~~,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-block;\n font-size: ${t.textareaFontSize};\n line-height: ${t.textareaLineHeight};\n position: relative;\n `;\n },\n\n textarea(t: Theme) {\n return css`\n -webkit-appearance: none;\n background~~-clip~~: ~~padding-box~~;\n background: ${t.~~textareaBg~~};\n border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n border-top-color: ${t.textareaBorderTopColor};\n box-shadow: ${t.textareaShadow};\n box-sizing: border-box;\n color: ${t.textareaColor};\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n max-width: 100%;\n min-width: ${t.textareaWidth};\n min-height: ${t.textareaMinHeight};\n outline: none;\n padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\n transition: height 0.2s ease-out;\n vertical-align: middle;\n width: 100%;\n border-radius: ${t.textareaBorderRadius};\n white-space: pre-wrap;\n\n &:focus {\n border-color: ${t.textareaBorderColorFocus};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n position: relative;\n z-index: 2;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorLight};\n }\n }\n\n &::placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &:-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &::-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n &:focus {\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n &:focus {\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: ${t.textareaTextColorDisabled};\n background: ${t.textareaDisabledBg};\n border-color: ${t.textareaDisabledBorderColor};\n box-shadow: none;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorDisabled};\n }\n `;\n },\n\n fake() {\n return css`\n height: 0;\n left: 0;\n position: absolute;\n top: 0;\n visibility: hidden;\n width: 100%;\n `;\n },\n\n placeholder() {\n return css`\n -ms-user-select: none;\n color: #aaa;\n left: 12px;\n overflow: hidden;\n position: absolute;\n right: 12px;\n top: 9px;\n user-select: none;\n z-index: 3;\n `;\n },\n\n counterContainer(t: Theme) {\n return css`\n position: absolute;\n top: 0;\n border: ${t.textareaBorderWidth} solid transparent;\n box-sizing: content-box;\n `;\n },\n\n counter(t: Theme) {\n return css`\n position: absolute;\n z-index: 3;\n text-align: right;\n background: ${t.textareaCounterBg};\n color: ${t.textareaCounterColor};\n border-radius: 2px;\n right: ${t.textareaPaddingX};\n bottom: ${t.textareaPaddingY};\n `;\n },\n\n counterError(t: Theme) {\n return css`\n color: ${t.textareaCounterErrorColor};\n `;\n },\n\n counterHelp() {\n return css`\n margin-left: 4px;\n cursor: pointer;\n `;\n },\n\n disableAnimations() {\n return css`\n transition: none;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Textarea.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","hovering","textareaBorderColorHover","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-block;\n font-size: ${t.textareaFontSize};\n line-height: ${t.textareaLineHeight};\n position: relative;\n `;\n },\n\n textarea(t: Theme) {\n return css`\n -webkit-appearance: none;\n background: ${t.textareaBg};\n background-clip: ${t.textareaBackgroundClip};\n border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n border-top-color: ${t.textareaBorderTopColor};\n box-shadow: ${t.textareaShadow};\n box-sizing: border-box;\n color: ${t.textareaColor};\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n max-width: 100%;\n min-width: ${t.textareaWidth};\n min-height: ${t.textareaMinHeight};\n outline: none;\n padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\n transition: height 0.2s ease-out;\n vertical-align: middle;\n width: 100%;\n border-radius: ${t.textareaBorderRadius};\n white-space: pre-wrap;\n\n &:focus {\n border-color: ${t.textareaBorderColorFocus};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n position: relative;\n z-index: 2;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorLight};\n }\n }\n\n &::placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &:-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n\n &::-moz-placeholder {\n color: ${t.textareaPlaceholderColor};\n }\n `;\n },\n\n hovering(t: Theme) {\n return css`\n &:enabled:hover:not(:focus) {\n border-color: ${t.textareaBorderColorHover};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n &:focus {\n border-color: ${t.textareaBorderColorError};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n &:focus {\n border-color: ${t.textareaBorderColorWarning};\n box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: ${t.textareaTextColorDisabled};\n background: ${t.textareaDisabledBg};\n border-color: ${t.textareaDisabledBorderColor};\n box-shadow: none;\n\n &::placeholder {\n color: ${t.textareaPlaceholderColorDisabled};\n }\n `;\n },\n\n fake() {\n return css`\n height: 0;\n left: 0;\n position: absolute;\n top: 0;\n visibility: hidden;\n width: 100%;\n `;\n },\n\n placeholder() {\n return css`\n -ms-user-select: none;\n color: #aaa;\n left: 12px;\n overflow: hidden;\n position: absolute;\n right: 12px;\n top: 9px;\n user-select: none;\n z-index: 3;\n `;\n },\n\n counterContainer(t: Theme) {\n return css`\n position: absolute;\n top: 0;\n border: ${t.textareaBorderWidth} solid transparent;\n box-sizing: content-box;\n `;\n },\n\n counter(t: Theme) {\n return css`\n position: absolute;\n z-index: 3;\n text-align: right;\n background: ${t.textareaCounterBg};\n color: ${t.textareaCounterColor};\n border-radius: 2px;\n right: ${t.textareaPaddingX};\n bottom: ${t.textareaPaddingY};\n `;\n },\n\n counterError(t: Theme) {\n return css`\n color: ${t.textareaCounterErrorColor};\n `;\n },\n\n counterHelp() {\n return css`\n margin-left: 4px;\n cursor: pointer;\n `;\n },\n\n disableAnimations() {\n return css`\n transition: none;\n `;\n },\n});\n"]}

package/components/Textarea/Textarea.styles.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
     textarea(t: Theme): string;
+    hovering(t: Theme): string;
     error(t: Theme): string;
     warning(t: Theme): string;
     disabled(t: Theme): string;

package/components/Textarea/TextareaCounter/TextareaCounter.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useCallback, useImperativeHandle, useState } from 'react';
 import propTypes from 'prop-types';
 import { safePropTypesInstanceOf } from "../../../lib/SSRSafe";
@@ -7,6 +8,8 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isFunction } from "../../../lib/utils";
 import { Tooltip } from "../../Tooltip";
 import { cx } from "../../../lib/theming/Emotion";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { QuestionCircleIcon16Solid } from "../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid";
 import { TextareaDataTids } from "../Textarea";
 import { styles } from "../Textarea.styles";
@@ -48,16 +51,20 @@ export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref
   }, [help]);
   var textareaValue = value ? value.toString().length : 0;
   var counterValue = length - textareaValue;
+  var helpIconProps = {
+    onMouseDown: handleHelpMouseDown,
+    color: theme.textareaCounterHelpIconColor,
+    'data-tid': TextareaDataTids.helpIcon
+  };
+  var helpIcon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(QuestionCircleIcon16Solid, _extends({
+    disableCompensation: false
+  }, helpIconProps)) : /*#__PURE__*/React.createElement(HelpDotIcon, helpIconProps);
   var counterHelp = isFunction(help) ? help() : /*#__PURE__*/React.createElement(Tooltip, {
     pos: 'right bottom',
     trigger: 'click',
     render: renderTooltipContent,
     onCloseClick: onCloseHelp
-  }, /*#__PURE__*/React.createElement(HelpDotIcon, {
-    onMouseDown: handleHelpMouseDown,
-    color: theme.textareaCounterHelpIconColor,
-    "data-tid": TextareaDataTids.helpIcon
-  }));
+  }, helpIcon);
   return /*#__PURE__*/React.createElement("div", {
     "data-tid": TextareaDataTids.counter,
     className: styles.counterContainer(theme),

package/components/Textarea/TextareaCounter/TextareaCounter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","safePropTypesInstanceOf","forwardRefAndName","HelpDotIcon","ThemeContext","isFunction","Tooltip","cx","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","~~counterHelp~~","textareaCounterHelpIconColor","helpIcon","counter","counterContainer","counterError","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"~~AAAA~~,OAAOA,KAAP,IAAgCC,UAAhC,EAA4CC,WAA5C,EAAyDC,mBAAzD,EAA8EC,QAA9E,QAA8F,OAA9F;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,WAAT,QAA4B,2BAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,OAAT,QAAwB,YAAxB;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,gBAAT,QAAgD,YAAhD;AACA,SAASC,MAAT,QAAuB,mBAAvB;;;;;;;;;;;;;;AAcA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,UAAuBA,CAAC,CAACC,cAAF,EAAvB,EAA5B;;AAEA,OAAO,IAAMC,eAAe,~~GAAGX~~,iBAAiB;AAC9C,iBAD8C;AAE9C,~~gBAAiDY~~,GAAjD,EAAyD,aAAtDC,MAAsD,QAAtDA,MAAsD,CAA9CC,KAA8C,QAA9CA,KAA8C,CAAvCC,IAAuC,QAAvCA,IAAuC,CAAjCC,WAAiC,QAAjCA,WAAiC,CAApBC,QAAoB,QAApBA,QAAoB;AACvD,MAAMC,KAAK,~~GAAGxB~~,UAAU,CAACQ,YAAD,CAAxB;AACA,kBAA0BL,QAAQ,~~CAACoB~~,QAAQ,CAACE,WAAV,CAAlC,CAAOC,KAAP,gBAAcC,QAAd;AACA,~~mBAA4BxB~~,QAAQ,~~CAACoB~~,QAAQ,CAACK,YAAV,CAApC,CAAOC,MAAP,iBAAeC,SAAf;AACA,MAAMC,MAAM,~~GAAG9B~~,WAAW,CAAC,YAAM;AAC/B,~~QAAQwB~~,WAAR,GAAsCF,QAAtC,CAAQE,WAAR,CAAqBG,YAArB,GAAsCL,QAAtC,CAAqBK,YAArB;AACAD,IAAAA,QAAQ,CAACF,WAAD,CAAR;AACAK,IAAAA,SAAS,CAACF,YAAD,CAAT;AACD,GAJyB,EAIvB,CAACL,QAAD,CAJuB,CAA1B;~~AAKArB~~,EAAAA,mBAAmB,~~CAACgB~~,GAAD,EAAM,oBAAO,EAAEa,MAAM,EAANA,MAAF,EAAP,EAAN,EAA0B,CAACA,MAAD,CAA1B,CAAnB;AACA,MAAMC,oBAAoB,~~GAAG/B~~,WAAW,CAAC,~~oBAAMoB~~,IAAN,EAAD,EAAa,CAACA,IAAD,CAAb,CAAxC;AACA,MAAMY,aAAa,GAAGb,KAAK,GAAGA,KAAK,CAACc,QAAN,GAAiBf,MAApB,GAA6B,CAAxD;AACA,MAAMgB,YAAY,GAAGhB,MAAM,GAAGc,aAA9B~~;AACA~~,MAAMG,WAAW,~~GAAG3B~~,UAAU,~~CAACY~~,IAAD,CAAV;AAClBA,EAAAA,IAAI,EADc;;AAGlB,sBAAC,OAAD,IAAS,GAAG,EAAE,cAAd,EAA8B,OAAO,EAAE,OAAvC,EAAgD,MAAM,EAAEW,oBAAxD,EAA8E,YAAY,EAAEV,WAA5F;~~AACE~~,~~sBAAC~~,~~WAAD;AACE~~,~~IAAA,WAAW,EAAER,mBADf;AAEE,IAAA,KAAK,EAAEU,KAAK,CAACa,4BAFf;AAGE,gBAAUzB,gBAAgB,CAAC0B,QAH7B,GADF,~~CAHF~~;;;;;AAYA~~;AACE,iCAAK,~~YAAU1B~~,gBAAgB,~~CAAC2B~~,OAAhC,EAAyC,SAAS,~~EAAE1B~~,MAAM,~~CAAC2B~~,gBAAP,~~CAAwBhB~~,KAAxB,CAApD,EAAoF,KAAK,EAAE,EAAEE,KAAK,EAALA,KAAF,EAASG,MAAM,EAANA,MAAT,EAA3F;AACE;AACE,MAAA,SAAS,~~EAAElB~~,EAAE,~~CAACE~~,MAAM,~~CAAC0B~~,OAAP,~~CAAef~~,KAAf,CAAD;AACVX,MAAAA,MAAM,~~CAAC4B~~,YAAP,~~CAAoBjB~~,KAApB,CADU,IACmBW,YAAY,GAAG,CADlC,OADf;;;AAKGA,IAAAA,YALH;AAMGd,IAAAA,IAAI,iBAAI,8BAAM,SAAS,EAAER,MAAM,~~CAACuB~~,WAAP,EAAjB,IAAwCA,WAAxC,CANX,CADF,CADF;;;;AAYD,~~CAvC6C~~,CAAzC;;;~~AA0CPnB~~,eAAe,~~CAACb~~,SAAhB,GAA4B;~~AAC1Be~~,EAAAA,MAAM,~~EAAEf~~,SAAS,~~CAACsC~~,MAAV,CAAiBC,UADC;~~AAE1BvB~~,EAAAA,KAAK,~~EAAEhB~~,SAAS,~~CAACwC~~,SAAV,CAAoB,~~CAACxC~~,SAAS,~~CAACyC~~,MAAX,~~EAAmBzC~~,SAAS,~~CAACsC~~,MAA7B,CAApB,CAFmB;~~AAG1BrB~~,EAAAA,IAAI,~~EAAEjB~~,SAAS,~~CAACwC~~,SAAV,CAAoB,~~CAACxC~~,SAAS,~~CAAC0C~~,IAAX,~~EAAiB1C~~,SAAS,~~CAAC2C~~,IAA3B,CAApB,CAHoB;~~AAI1BzB~~,EAAAA,WAAW,~~EAAElB~~,SAAS,~~CAAC2C~~,IAAV,CAAeJ,UAJF;~~AAK1BpB~~,EAAAA,QAAQ,~~EAAElB~~,uBAAuB,CAAC,~~oBAAM2C~~,WAAN,EAAD,CAAvB,CAA2CL,UAL3B,EAA5B","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n value: TextareaProps['value'];\n length: number;\n help: TextareaProps['counterHelp'];\n onCloseHelp: () => void;\n textarea: HTMLTextAreaElement;\n}\n\nexport interface TextareaCounterRef {\n reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n 'TextareaCounter',\n ({ length, value, help, onCloseHelp, textarea }, ref) => {\n const theme = useContext(ThemeContext);\n const [width, setWidth] = useState(textarea.clientWidth);\n const [height, setHeight] = useState(textarea.clientHeight);\n const reflow = useCallback(() => {\n const { clientWidth, clientHeight } = textarea;\n setWidth(clientWidth);\n setHeight(clientHeight);\n }, [textarea]);\n useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n const renderTooltipContent = useCallback(() => help, [help]);\n const textareaValue = value ? value.toString().length : 0;\n const counterValue = length - textareaValue;\n const counterHelp = isFunction(help) ? (\n help()\n ) : (\n <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n ~~<HelpDotIcon\n onMouseDown=~~{~~handleHelpMouseDown}\n color={theme.textareaCounterHelpIconColor}\n data-tid={TextareaDataTids.~~helpIcon}\n ~~/>\n~~ </Tooltip>\n );\n\n return (\n <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>\n <span\n className={cx(styles.counter(theme), {\n [styles.counterError(theme)]: counterValue < 0,\n })}\n >\n {counterValue}\n {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n </span>\n </div>\n );\n },\n);\n\nTextareaCounter.propTypes = {\n length: propTypes.number.isRequired,\n value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n onCloseHelp: propTypes.func.isRequired,\n textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}
1	+ {"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","safePropTypesInstanceOf","forwardRefAndName","HelpDotIcon","ThemeContext","isFunction","Tooltip","cx","isTheme2022","QuestionCircleIcon16Solid","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","helpIconProps","onMouseDown","color","textareaCounterHelpIconColor","helpIcon","counterHelp","counter","counterContainer","counterError","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"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","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n value: TextareaProps['value'];\n length: number;\n help: TextareaProps['counterHelp'];\n onCloseHelp: () => void;\n textarea: HTMLTextAreaElement;\n}\n\nexport interface TextareaCounterRef {\n reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n 'TextareaCounter',\n ({ length, value, help, onCloseHelp, textarea }, ref) => {\n const theme = useContext(ThemeContext);\n const [width, setWidth] = useState(textarea.clientWidth);\n const [height, setHeight] = useState(textarea.clientHeight);\n const reflow = useCallback(() => {\n const { clientWidth, clientHeight } = textarea;\n setWidth(clientWidth);\n setHeight(clientHeight);\n }, [textarea]);\n useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n const renderTooltipContent = useCallback(() => help, [help]);\n const textareaValue = value ? value.toString().length : 0;\n const counterValue = length - textareaValue;\n\n const helpIconProps = {\n onMouseDown: handleHelpMouseDown,\n color: theme.textareaCounterHelpIconColor,\n 'data-tid': TextareaDataTids.helpIcon,\n };\n const helpIcon = isTheme2022(theme) ? (\n <QuestionCircleIcon16Solid disableCompensation={false} {...helpIconProps} />\n ) : (\n <HelpDotIcon {...helpIconProps} />\n );\n const counterHelp = isFunction(help) ? (\n help()\n ) : (\n <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n {helpIcon}\n </Tooltip>\n );\n\n return (\n <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>\n <span\n className={cx(styles.counter(theme), {\n [styles.counterError(theme)]: counterValue < 0,\n })}\n >\n {counterValue}\n {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n </span>\n </div>\n );\n },\n);\n\nTextareaCounter.propTypes = {\n length: propTypes.number.isRequired,\n value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n onCloseHelp: propTypes.func.isRequired,\n textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}

package/components/Toast/ToastView/ToastView.js CHANGED Viewed

@@ -12,6 +12,8 @@ import { ZIndex } from "../../../internal/ZIndex";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
 import { styles } from "../ToastView.styles";
 import { ToastDataTids } from "../Toast";
 export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
@@ -43,6 +45,21 @@ export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
         className: styles.close(_this.theme),
         onClick: onClose
       }, /*#__PURE__*/React.createElement(CrossIcon, null))) : null;
+      if (isTheme2022(_this.theme) && close) {
+        close = /*#__PURE__*/React.createElement("span", {
+          className: styles.closeWrapper(_this.theme)
+        }, /*#__PURE__*/React.createElement(CloseButtonIcon, {
+          "data-tid": ToastDataTids.close,
+          onClick: onClose,
+          size: parseInt(_this.theme.toastCloseSize),
+          side: 40,
+          color: _this.theme.toastCloseColor,
+          colorHover: _this.theme.toastCloseHoverColor,
+          tabbable: false
+        }));
+      }
       return /*#__PURE__*/React.createElement(ZIndex, {
         priority: "Toast",
         className: styles.wrapper(_this.theme)

package/components/Toast/ToastView/ToastView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","styles","ToastDataTids","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","wrapper","toastView","root","setRootNode","children","render","Component","propTypes","isRequired"],"mappings":"qSAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,MAAtB,QAAoC,YAApC;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,aAAT,QAA8B,SAA9B;;;;;;;;;;;;;;;;;;;;AAoBA,WAAaC,SAAb,~~GADCH~~,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA8BUI~~,IAAAA,UA9BV,GA8BuB,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,iCAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,oCAAM,YAAUJ,aAAa,CAACI,MAA9B,EAAsC,SAAS,EAAEL,MAAM,CAACQ,IAAP,CAAY,MAAKC,KAAjB,CAAjD,EAA0E,OAAO,EAAEJ,MAAM,CAACK,OAA1F;AACGL,MAAAA,MAAM,CAACM,KADV,CADiB;;AAIf,UAJJ;;AAMA,~~UAAMC~~,KAAK,GAAGP,MAAM;~~AAClB~~,oCAAM,SAAS,EAAEL,MAAM,CAACa,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,oCAAM,YAAUR,aAAa,CAACW,KAA9B,EAAqC,SAAS,EAAEZ,MAAM,CAACY,KAAP,CAAa,MAAKH,KAAlB,CAAhD,EAA0E,OAAO,EAAEH,OAAnF;AACE,0BAAC,SAAD,OADF,CADF,~~CADkB~~;;;~~AAMhB~~,UANJ;;AAQA;AACE,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,~~EAAEN~~,MAAM,~~CAACc~~,OAAP,CAAe,~~MAAKL~~,KAApB,CAApC;AACE,8CAAK,YAAUR,aAAa,~~CAACc~~,SAA7B,~~IAA4CR~~,IAA5C,IAAkD,SAAS,EAAEP,MAAM,~~CAACgB~~,IAAP,CAAY,~~MAAKP~~,KAAjB,CAA7D,EAAsF,GAAG,EAAE,~~MAAKQ~~,WAAhG;AACE,0CAAO,~~MAAKb~~,KAAL,~~CAAWc~~,QAAlB,CADF;~~AAEGV~~,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,~~KAxDH~~,~~uDAmBSO~~,MAnBT,GAmBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,~~UAACV~~,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACL,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CA5BH,oBAA+BZ,KAAK,~~CAAC6B~~,SAArC,WACgBC,SADhB,GAC4B,EACxB;AACJ;AACA,~~KACIhB~~,MAAM,~~EAAEZ~~,KAAK,CAAC,~~EACZkB~~,KAAK,~~EAAEjB~~,MAAM,~~CAAC4B~~,UADF,~~EAEZZ~~,OAAO,~~EAAElB~~,IAAI,~~CAAC8B~~,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,~~EAAExB~~,MAAM,~~CAAC4B~~,UAXO,~~EAYxBhB~~,OAAO,~~EAAEd~~,IAZe,EAD5B","sourcesContent":["import React from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './ToastView.styles';\nimport { ToastDataTids } from './Toast';\n\nexport interface ToastViewProps extends CommonProps {\n /*\n Toast content\n /\n children?: string;\n /\n Adds action handling and close icon for toast\n /\n action?: {\n label: string;\n handler: () => void;\n } \| null;\n onClose?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n}\n\n@rootNode\nexport class ToastView extends React.Component<ToastViewProps> {\n public static propTypes = {\n /\n Adds action handling and close icon for toast\n /\n action: shape({\n label: string.isRequired,\n handler: func.isRequired,\n }),\n /\n Toast content\n */\n children: string.isRequired,\n onClose: func,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n const { action, onClose, ...rest } = props;\n\n const link = action ? (\n <span data-tid={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>\n {action.label}\n </span>\n ) : null;\n\n ~~const~~ close = action ? (\n <span className={styles.closeWrapper(this.theme)}>\n <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>\n <CrossIcon />\n </span>\n </span>\n ) : null;\n\n return (\n <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n <span>{this.props.children}</span>\n {link}\n {close}\n </div>\n </ZIndex>\n );\n };\n}\n"]}
1	+ {"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","isTheme2022","CloseButtonIcon","styles","ToastDataTids","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","root","setRootNode","children","render","Component","propTypes","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { ToastDataTids } from './Toast';\n\nexport interface ToastViewProps extends CommonProps {\n /*\n Toast content\n /\n children?: string;\n /\n Adds action handling and close icon for toast\n /\n action?: {\n label: string;\n handler: () => void;\n } \| null;\n onClose?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n}\n\n@rootNode\nexport class ToastView extends React.Component<ToastViewProps> {\n public static propTypes = {\n /\n Adds action handling and close icon for toast\n /\n action: shape({\n label: string.isRequired,\n handler: func.isRequired,\n }),\n /\n Toast content\n */\n children: string.isRequired,\n onClose: func,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n const { action, onClose, ...rest } = props;\n\n const link = action ? (\n <span data-tid={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>\n {action.label}\n </span>\n ) : null;\n\n let close = action ? (\n <span className={styles.closeWrapper(this.theme)}>\n <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>\n <CrossIcon />\n </span>\n </span>\n ) : null;\n\n if (isTheme2022(this.theme) && close) {\n close = (\n <span className={styles.closeWrapper(this.theme)}>\n <CloseButtonIcon\n data-tid={ToastDataTids.close}\n onClick={onClose}\n size={parseInt(this.theme.toastCloseSize)}\n side={40}\n color={this.theme.toastCloseColor}\n colorHover={this.theme.toastCloseHoverColor}\n tabbable={false}\n />\n </span>\n );\n }\n\n return (\n <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n <span>{this.props.children}</span>\n {link}\n {close}\n </div>\n </ZIndex>\n );\n };\n}\n"]}

package/components/Toast/ToastView.styles/ToastView.styles.js CHANGED Viewed

@@ -3,6 +3,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 var getVerticalPaddingsWithCompensation = function getVerticalPaddingsWithCompensation(theme) {
   var toastPaddingY = theme.toastPaddingY,
@@ -36,7 +37,8 @@ export var styles = memoizeStyle({
         paddingBottom = _getVerticalPaddingsW3[1];
     var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", " 0 ", ";\n\n      &:hover {\n        text-decoration: underline;\n      }\n    "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, paddingTop, paddingBottom);
+    var padding = isTheme2022(t) ? paddingTop + " " + paddingBottom : paddingTop + " 0 " + paddingBottom;
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, padding, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
   },
   close: function close(t) {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      height: ", ";\n      line-height: 0;\n      padding: ", ";\n      text-align: center;\n      width: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.toastCloseColor, t.toastCloseSize, t.toastClosePadding, t.toastCloseSize, t.toastCloseHoverColor);

package/components/Toast/ToastView.styles/ToastView.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","toastLinkColor","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC~~;;;AAGA~~,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOA,OAAO,IAAMC,MAAM,~~GAAGR~~,YAAY,CAAC;~~AACjCS~~,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,~~WAAOb~~,GAAP;~~AACgBW~~,IAAAA,CAAC,CAACG,OADlB;AAEmBH,IAAAA,CAAC,CAACI,iBAFrB;AAGYJ,IAAAA,CAAC,CAACK,WAHd;AAIWL,IAAAA,CAAC,CAACM,UAJb;;AAMeN,IAAAA,CAAC,CAACO,aANjB;AAOiBP,IAAAA,CAAC,CAACQ,eAPnB;;AASaP,IAAAA,UATb,EAS2BD,CAAC,CAACS,aAT7B,EAS8CP,aAT9C;;AAWSF,IAAAA,CAAC,CAACU,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBX,CAlByB,EAkBf;AAChB,~~WAAOX~~,GAAP;;;;;;;~~AAOmBW~~,IAAAA,CAAC,CAACI,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBZ,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,~~WAAOb~~,GAAP;;~~AAEaY~~,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bd,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMa,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWrB,QAAQ,CAACI,CAAC,CAACS,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,~~WAAOpB~~,GAAP;~~AACWW~~,IAAAA,CAAC,~~CAACkB~~,cADb;;;;;~~AAMajB~~,IAAAA,UANb,EAM2Bc,WAN3B,EAM2Cb,aAN3C,EAM4DF,CAAC,CAACS,aAN9D;;~~AAQaR~~,IAAAA,~~UARb~~,~~EAQ6BC~~,~~aAR7B;;;;;;AAcD~~,~~GAvDgC~~;;~~AAyDjCiB~~,EAAAA,~~KAzDiC~~,~~iBAyD3BnB~~,~~CAzD2B~~,~~EAyDjB~~;AACd,~~WAAOX~~,GAAP;;~~AAEWW~~,IAAAA,CAAC,~~CAACoB~~,eAFb;;;~~AAKYpB~~,IAAAA,CAAC,~~CAACqB~~,cALd;;~~AAOarB~~,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,~~CAACqB~~,cATb;;;~~AAYarB~~,IAAAA,CAAC,~~CAACsB~~,oBAZf;;;AAeD,~~GAzEgC~~,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n const paddingY = parseInt(toastPaddingY);\n const compensation = parseInt(fontFamilyCompensationBaseline);\n return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n background: ${t.toastBg};\n border-radius: ${t.toastBorderRadius};\n border: ${t.toastBorder};\n color: ${t.toastColor};\n display: inline-flex;\n font-size: ${t.toastFontSize};\n line-height: ${t.toastLineHeight};\n opacity: 1;\n padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n position: relative;\n top: ${t.toastTop};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n text-align: center;\n border-radius: ${t.toastBorderRadius};\n `;\n },\n\n closeWrapper(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n display: flex;\n margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n `;\n },\n\n link(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n return css`\n color: ${t.toastLinkColor};\n cursor: pointer;\n display: inline-block;\n font-weight: 600;\n\n margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n padding: ${~~paddingTop~~} 0 ${~~paddingBottom~~};\n\n &:~~hover~~ {\n ~~text-decoration~~: ~~underline~~;\n }\n `;\n },\n\n close(t: Theme) {\n return css`\n box-sizing: content-box !important; // fix \"reset.css\" problem\n color: ${t.toastCloseColor};\n cursor: pointer;\n display: inline-block;\n height: ${t.toastCloseSize};\n line-height: 0;\n padding: ${t.toastClosePadding};\n text-align: center;\n width: ${t.toastCloseSize};\n\n &:hover {\n color: ${t.toastCloseHoverColor};\n }\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","isTheme2022","getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","padding","toastLinkColor","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOA,OAAO,IAAMC,MAAM,GAAGT,YAAY,CAAC;AACjCU,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,WAAOd,GAAP;AACgBY,IAAAA,CAAC,CAACG,OADlB;AAEmBH,IAAAA,CAAC,CAACI,iBAFrB;AAGYJ,IAAAA,CAAC,CAACK,WAHd;AAIWL,IAAAA,CAAC,CAACM,UAJb;;AAMeN,IAAAA,CAAC,CAACO,aANjB;AAOiBP,IAAAA,CAAC,CAACQ,eAPnB;;AASaP,IAAAA,UATb,EAS2BD,CAAC,CAACS,aAT7B,EAS8CP,aAT9C;;AAWSF,IAAAA,CAAC,CAACU,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBX,CAlByB,EAkBf;AAChB,WAAOZ,GAAP;;;;;;;AAOmBY,IAAAA,CAAC,CAACI,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBZ,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,WAAOd,GAAP;;AAEaa,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bd,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMa,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWrB,QAAQ,CAACI,CAAC,CAACS,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,QAAMS,OAAO,GAAG5B,WAAW,CAACU,CAAD,CAAX,GAAoBC,UAApB,SAAkCC,aAAlC,GAAuDD,UAAvD,WAAuEC,aAAvF;;AAEA,WAAOd,GAAP;AACWY,IAAAA,CAAC,CAACmB,cADb;;;;;AAMalB,IAAAA,UANb,EAM2Bc,WAN3B,EAM2Cb,aAN3C,EAM4DF,CAAC,CAACS,aAN9D;;AAQaS,IAAAA,OARb;;;AAWkBlB,IAAAA,CAAC,CAACoB,gBAXpB;AAYuBpB,IAAAA,CAAC,CAACqB,4BAZzB;;;;AAgBkBrB,IAAAA,CAAC,CAACsB,iBAhBpB;;;AAmBD,GA9DgC;;AAgEjCC,EAAAA,KAhEiC,iBAgE3BvB,CAhE2B,EAgEjB;AACd,WAAOZ,GAAP;;AAEWY,IAAAA,CAAC,CAACwB,eAFb;;;AAKYxB,IAAAA,CAAC,CAACyB,cALd;;AAOazB,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,CAACyB,cATb;;;AAYazB,IAAAA,CAAC,CAAC0B,oBAZf;;;AAeD,GAhFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n const paddingY = parseInt(toastPaddingY);\n const compensation = parseInt(fontFamilyCompensationBaseline);\n return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n background: ${t.toastBg};\n border-radius: ${t.toastBorderRadius};\n border: ${t.toastBorder};\n color: ${t.toastColor};\n display: inline-flex;\n font-size: ${t.toastFontSize};\n line-height: ${t.toastLineHeight};\n opacity: 1;\n padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n position: relative;\n top: ${t.toastTop};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n text-align: center;\n border-radius: ${t.toastBorderRadius};\n `;\n },\n\n closeWrapper(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n return css`\n display: flex;\n margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n `;\n },\n\n link(t: Theme) {\n const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n const padding = isTheme2022(t) ? `${paddingTop} ${paddingBottom}` : `${paddingTop} 0 ${paddingBottom}`;\n\n return css`\n color: ${t.toastLinkColor};\n cursor: pointer;\n display: inline-block;\n font-weight: 600;\n\n margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n padding: ${padding};\n\n &:hover {\n background: ${t.toastLinkBgHover};\n text-decoration: ${t.toastLinkTextDecorationHover};\n }\n\n &:active {\n background: ${t.toastLinkBgActive};\n }\n `;\n },\n\n close(t: Theme) {\n return css`\n box-sizing: content-box !important; // fix \"reset.css\" problem\n color: ${t.toastCloseColor};\n cursor: pointer;\n display: inline-block;\n height: ${t.toastCloseSize};\n line-height: 0;\n padding: ${t.toastClosePadding};\n text-align: center;\n width: ${t.toastCloseSize};\n\n &:hover {\n color: ${t.toastCloseHoverColor};\n }\n `;\n },\n});\n"]}

package/components/Toggle/Toggle/Toggle.js CHANGED Viewed

@@ -12,6 +12,8 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles, globalClasses } from "../Toggle.styles";
 var colorWarningShown = false;
 export var ToggleDataTids = {
@@ -123,12 +125,13 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     var _this$getProps = this.getProps(),
         loading = _this$getProps.loading,
-        captionPosition = _this$getProps.captionPosition;
+        captionPosition = _this$getProps.captionPosition,
+        disableAnimations = _this$getProps.disableAnimations;
     var disabled = this.getProps().disabled || loading;
     var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
     var containerClassNames = cx(styles.container(this.theme), (_cx = {}, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
-    var labelClassNames = cx(styles.root(this.theme), (_cx2 = {}, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2));
+    var labelClassNames = cx(styles.root(this.theme), (_cx2 = {}, _cx2[styles.activeHandle(this.theme)] = !isTheme2022(this.theme), _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2[styles.disableAnimation()] = disableAnimations, _cx2));
     var caption = null;
     if (children) {
@@ -151,7 +154,7 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
       type: "checkbox",
       checked: checked,
       onChange: this.handleChange,
-      className: styles.input(this.theme),
+      className: cx(styles.input(this.theme), isTheme2022(this.theme) && styles.input2022(this.theme)),
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       ref: this.inputRef,
@@ -165,7 +168,7 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
         backgroundColor: color,
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
-    }, /*#__PURE__*/React.createElement("div", {
+    }, !isTheme2022(this.theme) && /*#__PURE__*/React.createElement("div", {
       className: cx(styles.activeBackground(), globalClasses.background, (_cx5 = {}, _cx5[styles.activeBackgroundLoading(this.theme)] = loading, _cx5[styles.disabledBackground(this.theme)] = disabled, _cx5)),
       style: checked && color && !disabled ? {
         backgroundColor: color,
@@ -198,5 +201,6 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
 }, _class2.defaultProps = {
   disabled: false,
   loading: false,
-  captionPosition: 'right'
+  captionPosition: 'right',
+  disableAnimations: isTestEnv
 }, _temp)) || _class;

package/components/Toggle/Toggle/Toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","error","color","id","ariaDescribedby","loading","captionPosition","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение `children` относительно переключателя.\n * @default 'right'\n /\n captionPosition?: 'left' \| 'right';\n /\n Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n * @default false\n /\n checked?: boolean;\n /\n Делает `тогл` включенным по умолчанию.\n /\n defaultChecked?: boolean;\n /\n Отключает `тогл`.\n /\n disabled?: boolean;\n /\n Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n /\n onValueChange?: (value: boolean) => void;\n /\n Событие вызывающееся при клике на `тогл`.\n /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /\n Состояние валидации при предупреждении.\n * @default false\n /\n warning?: boolean;\n /\n Состояние валидации при ошибке.\n * @default false\n /\n error?: boolean;\n /\n Добавляет стили для состояния `loading` и отключает `тогл`.\n /\n loading?: boolean;\n /\n Если true, выставляет фокус на `тогле` после загрузки страницы.\n /\n autoFocus?: boolean;\n /\n Атрибут для указания id элемента(-ов), описывающих его\n /\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n /\n Событие вызывающееся, когда `тогл` получает фокус.\n /\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /\n Событие вызывающееся, когда `тогл` теряет фокус.\n /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /\n @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n /\n color?: React.CSSProperties['color'];\n /\n HTML-атрибут `id` для передачи во внутренний `<input />`.\n /\n id?: string;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' \| 'loading' \| 'captionPosition'>>;\n\n/\n _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n /\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color: (props: ToggleProps) => {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n };\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { children, warning, error, color, id, 'aria-describedby': ariaDescribedby } = this.props;\n const { loading, captionPosition } = this.getProps();\n const disabled = this.getProps().disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n [styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={cx(styles.button(this.theme), {\n [styles.buttonRight()]: captionPosition === 'left',\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={styles.input(this.theme)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n role=\"switch\"\n aria-describedby={ariaDescribedby}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
1	+ {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","isTestEnv","isTheme2022","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","error","color","id","ariaDescribedby","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","activeHandle","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"2JAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,SAApB;;AAEA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,SAAT,QAA0B,8BAA1B;AACA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,SAASC,MAAT,EAAiBC,aAAjB,QAAsC,iBAAtC;;AAEA,IAAIC,iBAAiB,GAAG,KAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,OAAO,IAAMC,cAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,cADsB,EAAvB;;;;;;;;;AAUP,OAJA;AACA;AACA,GAEA,IAAaC,MAAb,GADCT,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCE,kBAAYU,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MANxBC,QAMwB,GANbV,iBAAiB,CAACQ,MAAM,CAACG,YAAR,CAMJ,OAHxBC,KAGwB,GAHS,IAGT;;;;;;;;;;;;;;;;;;AAmBzBC,IAAAA,KAnByB,GAmBjB,YAAM;AACnB,UAAI,MAAKD,KAAT,EAAgB;AACdjB,QAAAA,WAAW,CAACmB,YAAZ,GAA2B,IAA3B;AACA,cAAKF,KAAL,CAAWC,KAAX;AACD;AACF,KAxB+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmIxBE,IAAAA,QAnIwB,GAmIb,UAACC,OAAD,EAA+B;AAChD,YAAKJ,KAAL,GAAaI,OAAb;AACD,KArI+B;;AAuIxBC,IAAAA,YAvIwB,GAuIT,UAACC,KAAD,EAAgD;AACrE,UAAI,MAAKT,KAAL,CAAWU,aAAf,EAA8B;AAC5B,cAAKV,KAAL,CAAWU,aAAX,CAAyBD,KAAK,CAACE,MAAN,CAAaC,OAAtC;AACD;;AAED,UAAI,MAAKC,cAAL,EAAJ,EAA2B;AACzB,cAAKC,QAAL,CAAc;AACZF,UAAAA,OAAO,EAAEH,KAAK,CAACE,MAAN,CAAaC,OADV,EAAd;;AAGD;;AAED,UAAI,MAAKZ,KAAL,CAAWe,QAAf,EAAyB;AACvB,cAAKf,KAAL,CAAWe,QAAX,CAAoBN,KAApB;AACD;AACF,KArJ+B;;AAuJxBO,IAAAA,WAvJwB,GAuJV,UAACP,KAAD,EAA+C;AACnE,UAAI,MAAKT,KAAL,CAAWiB,OAAf,EAAwB;AACtB,cAAKjB,KAAL,CAAWiB,OAAX,CAAmBR,KAAnB;AACD;;AAED,UAAIvB,WAAW,CAACmB,YAAhB,EAA8B;AAC5B,cAAKS,QAAL,CAAc,EAAEI,UAAU,EAAE,IAAd,EAAd;AACD;AACF,KA/J+B;;AAiKxBC,IAAAA,UAjKwB,GAiKX,UAACV,KAAD,EAA+C;AAClE,UAAI,MAAKT,KAAL,CAAWoB,MAAf,EAAuB;AACrB,cAAKpB,KAAL,CAAWoB,MAAX,CAAkBX,KAAlB;AACD;AACD,YAAKK,QAAL,CAAc;AACZI,QAAAA,UAAU,EAAE,KADA,EAAd;;AAGD,KAxK+B,CAG9B,MAAKG,KAAL,GAAa,EACXH,UAAU,EAAE,KADD,EAEXN,OAAO,EAAEZ,KAAK,CAACsB,cAFJ,EAAb,CAH8B,aAO/B,CAvCH,qCAyCSC,iBAzCT,GAyCE,6BAA2B,CACzB,IAAI,KAAKvB,KAAL,CAAWwB,SAAf,EAA0B,CACxBtC,WAAW,CAACmB,YAAZ,GAA2B,IAA3B,CACA,KAAKD,KAAL,GACD,CACF,CA9CH,CAgDE;AACF;AACA,KAlDA,QA0DSqB,MA1DT,GA0DE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAnEH,QAqEUA,UArEV,GAqEE,sBAAqB,iCACnB,kBAAqF,KAAK3B,KAA1F,CAAQ4B,QAAR,eAAQA,QAAR,CAAkB3C,OAAlB,eAAkBA,OAAlB,CAA2B4C,KAA3B,eAA2BA,KAA3B,CAAkCC,KAAlC,eAAkCA,KAAlC,CAAyCC,EAAzC,eAAyCA,EAAzC,CAAiEC,eAAjE,eAA6C,kBAA7C,EACA,qBAAwD,KAAK/B,QAAL,EAAxD,CAAQgC,OAAR,kBAAQA,OAAR,CAAiBC,eAAjB,kBAAiBA,eAAjB,CAAkCC,iBAAlC,kBAAkCA,iBAAlC,CACA,IAAMC,QAAQ,GAAG,KAAKnC,QAAL,GAAgBmC,QAAhB,IAA4BH,OAA7C,CACA,IAAMrB,OAAO,GAAG,KAAKC,cAAL,KAAwB,KAAKQ,KAAL,CAAWT,OAAnC,GAA6C,KAAKZ,KAAL,CAAWY,OAAxE,CAEA,IAAMyB,mBAAmB,GAAGhD,EAAE,CAACK,MAAM,CAAC4C,SAAP,CAAiB,KAAKZ,KAAtB,CAAD,iBAC3BhC,MAAM,CAAC6C,iBAAP,CAAyB,KAAKb,KAA9B,CAD2B,IACY,CAAC,CAACU,QADd,MAE3BzC,aAAa,CAAC2C,SAFa,IAED,IAFC,MAG3B3C,aAAa,CAAC4C,iBAHa,IAGO,CAAC,CAACH,QAHT,MAI3BzC,aAAa,CAAC6C,gBAJa,IAIMP,OAJN,OAA9B,CAOA,IAAMQ,eAAe,GAAGpD,EAAE,CAACK,MAAM,CAACI,IAAP,CAAY,KAAK4B,KAAjB,CAAD,mBACvBhC,MAAM,CAACgD,YAAP,CAAoB,KAAKhB,KAAzB,CADuB,IACW,CAACjC,WAAW,CAAC,KAAKiC,KAAN,CADvB,OAEvBhC,MAAM,CAACiD,QAAP,EAFuB,IAEHT,eAAe,KAAK,MAFjB,OAGvBxC,MAAM,CAAC0C,QAAP,EAHuB,IAGH,CAAC,CAACA,QAHC,OAIvBzC,aAAa,CAACyC,QAJS,IAIE,CAAC,CAACA,QAJJ,OAKvB1C,MAAM,CAACkD,gBAAP,EALuB,IAKKT,iBALL,QAA1B,CAQA,IAAIU,OAAO,GAAG,IAAd,CACA,IAAIjB,QAAJ,EAAc,UACZ,IAAMkB,YAAY,GAAGzD,EAAE,CAACK,MAAM,CAACmD,OAAP,CAAe,KAAKnB,KAApB,CAAD,mBACpBhC,MAAM,CAACqD,WAAP,CAAmB,KAAKrB,KAAxB,CADoB,IACaQ,eAAe,KAAK,MADjC,OAEpBxC,MAAM,CAACsD,eAAP,CAAuB,KAAKtB,KAA5B,CAFoB,IAEiB,CAAC,CAACU,QAFnB,QAAvB,CAIAS,OAAO,gBAAG,8BAAM,SAAS,EAAEC,YAAjB,IAAgClB,QAAhC,CAAV,CACD,CAED,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKqB,WAAjC,IAAkD,KAAKjD,KAAvD,gBACE,+BAAO,YAAUH,cAAc,CAACC,IAAhC,EAAsC,SAAS,EAAE2C,eAAjD,iBACE,6BACE,SAAS,EAAEpD,EAAE,CAACK,MAAM,CAACwD,MAAP,CAAc,KAAKxB,KAAnB,CAAD,mBACVhC,MAAM,CAACyD,WAAP,EADU,IACajB,eAAe,KAAK,MADjC,OAEVxC,MAAM,CAAC0D,SAAP,CAAiB,KAAK1B,KAAtB,CAFU,IAEqB,CAAC,CAACzC,OAFvB,OAGVS,MAAM,CAAC2D,OAAP,CAAe,KAAK3B,KAApB,CAHU,IAGmB,CAAC,CAACG,KAHrB,OAIVnC,MAAM,CAAC4D,OAAP,CAAe,KAAK5B,KAApB,CAJU,IAImB,CAACU,QAAD,IAAa,CAAC,CAAC,KAAKf,KAAL,CAAWH,UAJ7C,QADf,iBAQE,+BACE,IAAI,EAAC,UADP,EAEE,OAAO,EAAEN,OAFX,EAGE,QAAQ,EAAE,KAAKJ,YAHjB,EAIE,SAAS,EAAEnB,EAAE,CAACK,MAAM,CAACS,KAAP,CAAa,KAAKuB,KAAlB,CAAD,EAA2BjC,WAAW,CAAC,KAAKiC,KAAN,CAAX,IAA2BhC,MAAM,CAAC6D,SAAP,CAAiB,KAAK7B,KAAtB,CAAtD,CAJf,EAKE,OAAO,EAAE,KAAKV,WALhB,EAME,MAAM,EAAE,KAAKG,UANf,EAOE,GAAG,EAAE,KAAKb,QAPZ,EAQE,QAAQ,EAAE8B,QARZ,EASE,EAAE,EAAEL,EATN,EAUE,IAAI,EAAC,QAVP,EAWE,oBAAkBC,eAXpB,GARF,eAqBE,6BACE,SAAS,EAAEK,mBADb,EAEE,KAAK,EACHzB,OAAO,IAAIkB,KAAX,IAAoB,CAACM,QAArB,GACI,EACEoB,eAAe,EAAE1B,KADnB,EAEE2B,SAAS,uBAAqB3B,KAFhC,EADJ,GAKI4B,SARR,IAWG,CAACjE,WAAW,CAAC,KAAKiC,KAAN,CAAZ,iBACC,6BACE,SAAS,EAAErC,EAAE,CAACK,MAAM,CAACiE,gBAAP,EAAD,EAA4BhE,aAAa,CAACiE,UAA1C,mBACVlE,MAAM,CAACmE,uBAAP,CAA+B,KAAKnC,KAApC,CADU,IACmCO,OADnC,OAEVvC,MAAM,CAACoE,kBAAP,CAA0B,KAAKpC,KAA/B,CAFU,IAE8BU,QAF9B,QADf,EAKE,KAAK,EACHxB,OAAO,IAAIkB,KAAX,IAAoB,CAACM,QAArB,GACI,EACEoB,eAAe,EAAE1B,KADnB,EAEE2B,SAAS,uBAAqB3B,KAFhC,EADJ,GAKI4B,SAXR,GAZJ,CArBF,eAiDE,6BACE,SAAS,EAAErE,EAAE,CAACK,MAAM,CAACqE,MAAP,CAAc,KAAKrC,KAAnB,CAAD,EAA4B/B,aAAa,CAACoE,MAA1C,mBACVrE,MAAM,CAACsE,cAAP,CAAsB,KAAKtC,KAA3B,CADU,IAC0BU,QAD1B,QADf,GAjDF,CADF,EAwDGS,OAxDH,CADF,CADF,CA8DD,CAjKH,QA0MUhC,cA1MV,GA0ME,0BAAyB;AACvB,WAAO,KAAKb,KAAL,CAAWY,OAAX,KAAuB8C,SAA9B;AACD,GA5MH,iBAA4B3E,KAAK,CAACkF,SAAlC,WACgBC,mBADhB,GACsC,QADtC,UAGgBC,SAHhB,GAG4B,EACxBvD,OAAO,EAAE5B,SAAS,CAACoF,IADK,EAExB9C,cAAc,EAAEtC,SAAS,CAACoF,IAFF,EAGxBhC,QAAQ,EAAEpD,SAAS,CAACoF,IAHI,EAIxBvC,KAAK,EAAE7C,SAAS,CAACoF,IAJO,EAKxBnC,OAAO,EAAEjD,SAAS,CAACoF,IALK,EAMxBnF,OAAO,EAAED,SAAS,CAACoF,IANK,EAOxB1D,aAAa,EAAE1B,SAAS,CAACqF,IAPD,EAQxBvC,KAAK,EAAE,eAAC9B,KAAD,EAAwB,CAC7B,IAAIA,KAAK,CAAC8B,KAAN,IAAe,CAAClC,iBAApB,EAAuC,CACrCX,OAAO,CAAC,KAAD,iGAAP,CACAW,iBAAiB,GAAG,IAApB,CACD,CACF,CAbuB,EAH5B,UAmBgBM,YAnBhB,GAmB6C,EACzCkC,QAAQ,EAAE,KAD+B,EAEzCH,OAAO,EAAE,KAFgC,EAGzCC,eAAe,EAAE,OAHwB,EAIzCC,iBAAiB,EAAE3C,SAJsB,EAnB7C","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение `children` относительно переключателя.\n * @default 'right'\n /\n captionPosition?: 'left' \| 'right';\n /\n Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n * @default false\n /\n checked?: boolean;\n /\n Делает `тогл` включенным по умолчанию.\n /\n defaultChecked?: boolean;\n /\n Отключает `тогл`.\n /\n disabled?: boolean;\n /\n Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n /\n onValueChange?: (value: boolean) => void;\n /\n Событие вызывающееся при клике на `тогл`.\n /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /\n Состояние валидации при предупреждении.\n * @default false\n /\n warning?: boolean;\n /\n Состояние валидации при ошибке.\n * @default false\n /\n error?: boolean;\n /\n Добавляет стили для состояния `loading` и отключает `тогл`.\n /\n loading?: boolean;\n /\n Если true, выставляет фокус на `тогле` после загрузки страницы.\n /\n autoFocus?: boolean;\n /\n Атрибут для указания id элемента(-ов), описывающих его\n /\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n /\n Событие вызывающееся, когда `тогл` получает фокус.\n /\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /\n Событие вызывающееся, когда `тогл` теряет фокус.\n /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /\n @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n /\n color?: React.CSSProperties['color'];\n /\n HTML-атрибут `id` для передачи во внутренний `<input />`.\n /\n id?: string;\n /\n Не показывать анимацию\n /\n disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' \| 'loading' \| 'captionPosition' \| 'disableAnimations'>>;\n\n/\n _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n /\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color: (props: ToggleProps) => {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n };\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { children, warning, error, color, id, 'aria-describedby': ariaDescribedby } = this.props;\n const { loading, captionPosition, disableAnimations } = this.getProps();\n const disabled = this.getProps().disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.activeHandle(this.theme)]: !isTheme2022(this.theme),\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [styles.disableAnimation()]: disableAnimations,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n [styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={cx(styles.button(this.theme), {\n [styles.buttonRight()]: captionPosition === 'left',\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={cx(styles.input(this.theme), isTheme2022(this.theme) && styles.input2022(this.theme))}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n role=\"switch\"\n aria-describedby={ariaDescribedby}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n {!isTheme2022(this.theme) && (\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n )}\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}

package/components/Toggle/Toggle.d.ts CHANGED Viewed

@@ -67,6 +67,10 @@ export interface ToggleProps extends CommonProps {
      * HTML-атрибут `id` для передачи во внутренний `<input />`.
      */
     id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
@@ -75,7 +79,7 @@ export interface ToggleState {
 export declare const ToggleDataTids: {
     readonly root: "Toggle__root";
 };
-declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition'>>;
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations'>>;
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */