@skbkontur/react-ui 3.8.4 → 3.9.2

package/components/SidePage/SidePage.styles/SidePage.styles.js

@@ -1,19 +1,19 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
 
 import { is8pxTheme } from "../../../lib/theming/ThemeHelpers";
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
 export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: fixed;\n      right: 0;\n      top: 0;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "])));
   },
   overlay: function overlay() {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
   },
   body: function body() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      z-index: 0;\n    "])));
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex: 1 0 auto;\n      z-index: 0;\n    "])));
   },
   container: function container(t) {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
@@ -27,77 +27,86 @@ export var styles = memoizeStyle({
   containerWithPanel: function containerWithPanel(t) {
     return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), is8pxTheme(t) ? t.sidePagePaddingBottom : 0);
   },
+  focusLock: function focusLock() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n    "])));
+  },
   wrapper: function wrapper(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n    "])), t.sidePageBgDefault);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])), t.sidePageBgDefault);
   },
   wrapperLeft: function wrapperLeft() {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      float: left;\n    "])));
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      float: left;\n    "])));
+  },
+  wrapperMarginLeft: function wrapperMarginLeft() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-left: 20px;\n    "])));
+  },
+  wrapperMarginRight: function wrapperMarginRight() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-right: 20px;\n    "])));
   },
-  layout: function layout() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])));
+  headerWrapper: function headerWrapper() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
   },
   header: function header(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor);
   },
   headerFixed: function headerFixed(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY, t.sidePageFixedHeaderShadow);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY, t.sidePageFixedHeaderShadow);
   },
   title: function title(t) {
     var paddingRight = parseInt(t.sidePageCloseButtonPadding) + parseInt(t.sidePageCloseButtonLegacyPaddingLeft) + parseInt(t.sidePageCloseIconSize);
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
   },
   titleFixed: function titleFixed() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
   },
   background: function background() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
   },
   backgroundGray: function backgroundGray(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
   },
   shadow: function shadow(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
-  },
-  leftSide: function leftSide() {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      right: auto;\n    "])));
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
   },
   close: function close(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
   },
   closeFocus: function closeFocus(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      outline: 2px solid ", ";\n    "])), t.borderColorFocus);
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      outline: 2px solid ", ";\n    "])), t.borderColorFocus);
   },
   wrapperClose: function wrapperClose(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: 0;\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonPadding);
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: 0;\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonPadding);
   },
   panel: function panel(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
   },
   fixed: function fixed(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
+  },
+  footerWrapper: function footerWrapper() {
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
   },
   footer: function footer() {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    "])));
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    "])));
   },
   footerContent: function footerContent(t) {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
   },
   footerFixed: function footerFixed(t) {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
   },
   transitionLeft: function transitionLeft() {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
   },
   transitionRight: function transitionRight() {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
   },
   transitionActive: function transitionActive() {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
   },
   transitionLeave: function transitionLeave() {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
   },
   transitionLeaveActive: function transitionLeaveActive() {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
   }
 });

package/components/SidePage/SidePage.styles/SidePage.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","memoizeStyle","resetButton","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","wrapperLeft","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","closeFocus","borderColorFocus","wrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      position: fixed;\n      right: 0;\n      top: 0;\n    `;\n  },\n\n  overlay() {\n    return css`\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    `;\n  },\n\n  body() {\n    return css`\n      height: 100%;\n      z-index: 0;\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${t.sidePagePaddingRight};\n    `;\n  },\n\n  containerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0};\n    `;\n  },\n\n  containerWithoutFooter(t: Theme) {\n    return css`\n      padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n    `;\n  },\n\n  containerWithPanel(t: Theme) {\n    return css`\n      padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n    `;\n  },\n\n  wrapperLeft() {\n    return css`\n      float: left;\n    `;\n  },\n\n  layout() {\n    return css`\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.sidePageHeaderFontSize};\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      width: 100%;\n      position: relative;\n      color: ${t.sidePageHeaderTextColor};\n    `;\n  },\n\n  headerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      font-size: ${t.sidePageHeaderFixedFontSize};\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedHeaderShadow};\n      }\n    `;\n  },\n\n  title(t: Theme) {\n    const paddingRight =\n      parseInt(t.sidePageCloseButtonPadding) +\n      parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n      parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  titleFixed() {\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n  },\n\n  background() {\n    return css`\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    `;\n  },\n\n  backgroundGray(t: Theme) {\n    return css`\n      background: ${t.sidePageBackingBg};\n      opacity: ${t.sidePageBackingBgOpacity};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      box-shadow: ${t.sidePageContainerShadow};\n    `;\n  },\n\n  leftSide() {\n    return css`\n      left: 0;\n      right: auto;\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      ${resetButton()};\n      cursor: pointer;\n      color: ${t.sidePageCloseButtonColor};\n      padding: ${t.sidePageCloseButtonClickArea};\n      margin: -${t.sidePageCloseButtonClickArea};\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ${t.sidePageCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.sidePageCloseIconSize};\n        height: ${t.sidePageCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeFocus(t: Theme) {\n    return css`\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  wrapperClose(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      position: absolute;\n      right: ${t.sidePageCloseButtonPadding};\n      top: 0;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      background: ${t.sidePageFooterPanelBg};\n      padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  fixed(t: Theme) {\n    return css`\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n    `;\n  },\n\n  footer() {\n    return css`\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    `;\n  },\n\n  footerContent(t: Theme) {\n    return css`\n      padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  footerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedFooterShadow};\n      }\n    `;\n  },\n\n  transitionLeft() {\n    return css`\n      transform: translateX(100px);\n    `;\n  },\n\n  transitionRight() {\n    return css`\n      transform: translateX(-100px);\n    `;\n  },\n\n  transitionActive() {\n    return css`\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    `;\n  },\n\n  transitionLeave() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  transitionLeaveActive() {\n    return css`\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","memoizeStyle","resetButton","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","focusLock","wrapper","sidePageBgDefault","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","headerWrapper","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","closeFocus","borderColorFocus","wrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","fixed","footerWrapper","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      position: fixed;\n      top: 0;\n    `;\n  },\n\n  overlay() {\n    return css`\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    `;\n  },\n\n  body() {\n    return css`\n      flex: 1 0 auto;\n      z-index: 0;\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${t.sidePagePaddingRight};\n    `;\n  },\n\n  containerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0};\n    `;\n  },\n\n  containerWithoutFooter(t: Theme) {\n    return css`\n      padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n    `;\n  },\n\n  containerWithPanel(t: Theme) {\n    return css`\n      padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n    `;\n  },\n\n  focusLock() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    `;\n  },\n\n  wrapperLeft() {\n    return css`\n      float: left;\n    `;\n  },\n\n  wrapperMarginLeft() {\n    return css`\n      margin-left: 20px;\n    `;\n  },\n\n  wrapperMarginRight() {\n    return css`\n      margin-right: 20px;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.sidePageHeaderFontSize};\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      width: 100%;\n      position: relative;\n      color: ${t.sidePageHeaderTextColor};\n    `;\n  },\n\n  headerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      font-size: ${t.sidePageHeaderFixedFontSize};\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedHeaderShadow};\n      }\n    `;\n  },\n\n  title(t: Theme) {\n    const paddingRight =\n      parseInt(t.sidePageCloseButtonPadding) +\n      parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n      parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  titleFixed() {\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n  },\n\n  background() {\n    return css`\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    `;\n  },\n\n  backgroundGray(t: Theme) {\n    return css`\n      background: ${t.sidePageBackingBg};\n      opacity: ${t.sidePageBackingBgOpacity};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      box-shadow: ${t.sidePageContainerShadow};\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      ${resetButton()};\n      cursor: pointer;\n      color: ${t.sidePageCloseButtonColor};\n      padding: ${t.sidePageCloseButtonClickArea};\n      margin: -${t.sidePageCloseButtonClickArea};\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ${t.sidePageCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.sidePageCloseIconSize};\n        height: ${t.sidePageCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeFocus(t: Theme) {\n    return css`\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  wrapperClose(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      position: absolute;\n      right: ${t.sidePageCloseButtonPadding};\n      top: 0;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      background: ${t.sidePageFooterPanelBg};\n      padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  fixed(t: Theme) {\n    return css`\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  footer() {\n    return css`\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    `;\n  },\n\n  footerContent(t: Theme) {\n    return css`\n      padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  footerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedFooterShadow};\n      }\n    `;\n  },\n\n  transitionLeft() {\n    return css`\n      transform: translateX(100px);\n    `;\n  },\n\n  transitionRight() {\n    return css`\n      transform: translateX(-100px);\n    `;\n  },\n\n  transitionActive() {\n    return css`\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    `;\n  },\n\n  transitionLeave() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  transitionLeaveActive() {\n    return css`\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}

package/components/SidePage/SidePage.styles.d.ts

@@ -7,9 +7,12 @@ export declare const styles: {
     containerWithoutHeader(t: Theme): string;
     containerWithoutFooter(t: Theme): string;
     containerWithPanel(t: Theme): string;
+    focusLock(): string;
     wrapper(t: Theme): string;
     wrapperLeft(): string;
-    layout(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
     header(t: Theme): string;
     headerFixed(t: Theme): string;
     title(t: Theme): string;
@@ -17,12 +20,12 @@ export declare const styles: {
     background(): string;
     backgroundGray(t: Theme): string;
     shadow(t: Theme): string;
-    leftSide(): string;
     close(t: Theme): string;
     closeFocus(t: Theme): string;
     wrapperClose(t: Theme): string;
     panel(t: Theme): string;
     fixed(t: Theme): string;
+    footerWrapper(): string;
     footer(): string;
     footerContent(t: Theme): string;
     footerFixed(t: Theme): string;

package/components/SidePage/SidePageFooter/SidePageFooter.js

@@ -108,6 +108,7 @@ export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
       style: {
         height: this.getContentHeight()
       },
+      className: styles.footerWrapper(),
       ref: this.refWrapper
     }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
       var _cx;

package/components/SidePage/SidePageFooter/SidePageFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","styles","SidePageContext","SidePageFooter","context","state","fixed","theme","content","wrapper","layoutSub","update","setProperStyles","refContent","node","refWrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","render","renderMain","height","getContentHeight","getWidth","footer","width","footerContent","footerFixed","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;;;;;AAUA;AACA;AACA;AACA;AACA;;AAEA,WAAaC,cAAb;;;;AAISC,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,IAAAA,KANT,GAMiB;AACbC,MAAAA,KAAK,EAAE,KADM,EANjB;;;AAUUC,IAAAA,KAVV;AAWUC,IAAAA,OAXV,GAWwC,IAXxC;AAYUC,IAAAA,OAZV,GAYwC,IAZxC;AAaUC,IAAAA,SAbV,GAa0E,IAb1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CSC,IAAAA,MA/CT,GA+CkB,YAAM;AACpB,YAAKC,eAAL;AACD,KAjDH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFUC,IAAAA,UAhFV,GAgFuB,UAACC,IAAD,EAA8B;AACjD,YAAKN,OAAL,GAAeM,IAAf;AACD,KAlFH;;AAoFUC,IAAAA,UApFV,GAoFuB,UAACD,IAAD,EAA8B;AACjD,YAAKL,OAAL,GAAeK,IAAf;AACD,KAtFH;;AAwFUF,IAAAA,eAxFV,GAwF4B,YAAM;AAC9B,UAAI,MAAKH,OAAL,IAAgB,MAAKD,OAAzB,EAAkC;AAChC,YAAMQ,WAAW,GAAG,MAAKP,OAAL,CAAaQ,qBAAb,EAApB;AACA,YAAMC,WAAW,GAAG,MAAKV,OAAL,CAAaS,qBAAb,EAApB;AACA,YAAMX,MAAK,GAAGU,WAAW,CAACG,GAAZ,GAAkBD,WAAW,CAACC,GAA5C;AACA,cAAKC,QAAL,CAAc,EAAEd,KAAK,EAALA,MAAF,EAAd;AACD;AACF,KA/FH,4DAeSe,iBAfT,GAeE,6BAA2B,iFACzB,KAAKjB,OAAL,CAAakB,SAAb,CAAuB,IAAvB,EACA,KAAKX,MAAL,GACA,KAAKD,SAAL,GAAiBb,YAAY,CAAC0B,WAAb,CAAyB,KAAKZ,MAA9B,CAAjB,CACA,+CAAKP,OAAL,EAAaoB,YAAb,+DACA,gDAAKpB,OAAL,EAAaqB,WAAb,gEAA2B,KAAKC,KAAL,CAAWC,KAAtC,EACD,CArBH,QAuBSC,kBAvBT,GAuBE,4BAA0BC,SAA1B,EAAoE,4CAClE,KAAKH,KAAL,CAAWC,KAAX,KAAqBE,SAAS,CAACF,KAA/B,+BAAwC,uBAAKvB,OAAL,EAAaqB,WAArD,qBAAwC,4CAA2B,KAAKC,KAAL,CAAWC,KAAtC,CAAxC,EACD,CAzBH,QA2BSG,oBA3BT,GA2BE,gCAA8B,oFAC5B,KAAK1B,OAAL,CAAakB,SAAb,CAAuB,IAAvB,EACA,IAAI,KAAKZ,SAAT,EAAoB,CAClB,KAAKA,SAAL,CAAeqB,MAAf,GACD,CACD,iDAAK3B,OAAL,EAAaoB,YAAb,iEAA4B,KAA5B,EACA,iDAAKpB,OAAL,EAAaqB,WAAb,iEAA2B,KAA3B,EACD,CAlCH,QAoCSO,MApCT,GAoCE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACzB,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAAC0B,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CA7CH,QAmDUA,UAnDV,GAmDE,sBAAqB,mBACnB,oBACE,oBAAC,aAAD,EAAmB,KAAKP,KAAxB,eACE,6BAAK,KAAK,EAAE,EAAEQ,MAAM,EAAE,KAAKC,gBAAL,EAAV,EAAZ,EAAiD,GAAG,EAAE,KAAKpB,UAA3D,iBACE,oBAAC,eAAD,CAAiB,QAAjB,QACG,6BAAGqB,QAAH,QAAGA,QAAH,qBACC,6BACE,SAAS,EAAEnC,MAAM,CAACoC,MAAP,EADb,EAEE,KAAK,EAAE,EACLC,KAAK,EAAEF,QAAQ,EADV,EAFT,iBAME,6BACE,SAAS,EAAEpC,EAAE,CAACC,MAAM,CAACsC,aAAP,CAAqB,MAAI,CAAChC,KAA1B,CAAD,iBACVN,MAAM,CAACuC,WAAP,CAAmB,MAAI,CAACjC,KAAxB,CADU,IACuB,MAAI,CAACF,KAAL,CAAWC,KADlC,MAEVL,MAAM,CAAC0B,KAAP,CAAa,MAAI,CAACpB,KAAlB,CAFU,IAEiB,CAAC,CAAC,MAAI,CAACmB,KAAL,CAAWC,KAF9B,OADf,EAKE,GAAG,EAAE,MAAI,CAACd,UALZ,IAOG,MAAI,CAACa,KAAL,CAAWe,QAPd,CANF,CADD,EADH,CADF,CADF,CADF,CA0BD,CA9EH;;AAiGUN,EAAAA,gBAjGV,GAiGE,4BAA2B;AACzB,QAAI,CAAC,KAAK3B,OAAV,EAAmB;AACjB,aAAO,MAAP;AACD;AACD,WAAO,KAAKA,OAAL,CAAaS,qBAAb,GAAqCiB,MAA5C;AACD,GAtGH,yBAAoCtC,KAAK,CAAC8C,SAA1C,EAAavC,c,CACGwC,mB,GAAsB,gB,CADzBxC,c,CAGGyC,W,GAAc1C,e","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private wrapper: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    return (\n      <CommonWrapper {...this.props}>\n        <div style={{ height: this.getContentHeight() }} ref={this.refWrapper}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={styles.footer()}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                  })}\n                  ref={this.refContent}\n                >\n                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private refWrapper = (node: HTMLElement | null) => {\n    this.wrapper = node;\n  };\n\n  private setProperStyles = () => {\n    if (this.wrapper && this.content) {\n      const wrapperRect = this.wrapper.getBoundingClientRect();\n      const contentRect = this.content.getBoundingClientRect();\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return this.content.getBoundingClientRect().height;\n  }\n}\n"]}
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","styles","SidePageContext","SidePageFooter","context","state","fixed","theme","content","wrapper","layoutSub","update","setProperStyles","refContent","node","refWrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","render","renderMain","height","getContentHeight","footerWrapper","getWidth","footer","width","footerContent","footerFixed","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private wrapper: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    return (\n      <CommonWrapper {...this.props}>\n        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()} ref={this.refWrapper}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={styles.footer()}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                  })}\n                  ref={this.refContent}\n                >\n                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private refWrapper = (node: HTMLElement | null) => {\n    this.wrapper = node;\n  };\n\n  private setProperStyles = () => {\n    if (this.wrapper && this.content) {\n      const wrapperRect = this.wrapper.getBoundingClientRect();\n      const contentRect = this.content.getBoundingClientRect();\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return this.content.getBoundingClientRect().height;\n  }\n}\n"]}

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -138,7 +138,8 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
   _proto.renderMain = function renderMain() {
     var isReadyToFix = this.state.isReadyToFix;
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
-      ref: this.wrapperRef
+      ref: this.wrapperRef,
+      className: styles.headerWrapper()
     }, isReadyToFix ? /*#__PURE__*/React.createElement(Sticky, {
       side: "top"
     }, this.renderHeader) : this.renderHeader()));

package/components/SidePage/SidePageHeader/SidePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\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 { keyListener } from '../../lib/events/keyListener';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.();\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n  };\n\n  public update = () => {\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\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 { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef}>\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\n          <SidePageContext.Consumer>\n            {({ requestClose }) => (\n              <button\n                className={cx(styles.close(this.theme), {\n                  [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n                })}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                onClick={requestClose}\n                data-tid=\"SidePage__close\"\n                tabIndex={0}\n              >\n                <CrossIcon />\n              </button>\n            )}\n          </SidePageContext.Consumer>\n        </Sticky>\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\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 { keyListener } from '../../lib/events/keyListener';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.();\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n  };\n\n  public update = () => {\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\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 { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\n          <SidePageContext.Consumer>\n            {({ requestClose }) => (\n              <button\n                className={cx(styles.close(this.theme), {\n                  [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n                })}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                onClick={requestClose}\n                data-tid=\"SidePage__close\"\n                tabIndex={0}\n              >\n                <CrossIcon />\n              </button>\n            )}\n          </SidePageContext.Consumer>\n        </Sticky>\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}

package/components/Tabs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["React","PropTypes","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","Tab","context","state","focusedByKeyboard","theme","tabComponent","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","UNSAFE_componentWillMount","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","root","active","focus","__KONTUR_REACT_UI__","contextType","propTypes","node","bool","string","isRequired","func"],"mappings":"4JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,SAAP,MAAsB,WAAtB;;AAEA,SAASC,cAAT,QAA+B,+BAA/B;AACA,SAASC,UAAT,EAAqBC,cAArB,EAAqCC,YAArC,QAAyD,uCAAzD;AACA,SAASC,WAAT,QAA4B,8BAA5B;;AAEA,SAASC,qBAAT,QAAsC,iBAAtC;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,WAAT,EAAuCC,uBAAvC,QAAsE,eAAtE;AACA,SAASC,MAAT,EAAiBC,gBAAjB,EAAmCC,cAAnC,EAAmDC,aAAnD,QAAwE,cAAxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,GAAb;;;;AAISC,IAAAA,OAJT,GAIoC,MAAKA,OAJzC;;;;;;;;;;;;;;;AAmBSC,IAAAA,KAnBT,GAmB2B;AACvBC,MAAAA,iBAAiB,EAAE,KADI,EAnB3B;;;AAuBUC,IAAAA,KAvBV;AAwBUC,IAAAA,YAxBV,GAwB+D,IAxB/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuESC,IAAAA,iBAvET,GAuE6B,oBAAM,MAAKD,YAAX,EAvE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HUE,IAAAA,KA7HV,GA6HkB,oBAAM,MAAKC,KAAL,CAAWC,EAAX,IAAiB,MAAKD,KAAL,CAAWE,IAAlC,EA7HlB;;AA+HUC,IAAAA,eA/HV,GA+H4B,UAACC,QAAD,EAAuC;AAC/D,YAAKP,YAAL,GAAoBO,QAApB;AACD,KAjIH;;AAmIUC,IAAAA,cAnIV,GAmI2B,mDAnI3B;;AAqIUC,IAAAA,SArIV,GAqIsB,UAACC,KAAD,EAA0C;AAC5D,UAAI,MAAKP,KAAL,CAAWQ,QAAf,EAAyB;AACvBD,QAAAA,KAAK,CAACE,cAAN;AACA;AACD;;AAED,UAAMR,EAAE,GAAG,MAAKD,KAAL,CAAWC,EAAX,IAAiB,MAAKD,KAAL,CAAWE,IAAvC;AACA,UAAI,MAAKF,KAAL,CAAWU,OAAf,EAAwB;AACtB,cAAKV,KAAL,CAAWU,OAAX,CAAmBH,KAAnB;AACA,YAAIA,KAAK,CAACI,gBAAV,EAA4B;AAC1B;AACD;AACF;AACD,UAAI,OAAOV,EAAP,KAAc,QAAlB,EAA4B;AAC1B,cAAKR,OAAL,CAAaa,SAAb,CAAuBL,EAAvB;AACD;AACD,UAAI,MAAKD,KAAL,CAAWY,SAAX,KAAyB,GAAzB,IAAgC,CAAC,MAAKZ,KAAL,CAAWE,IAAhD,EAAsD;AACpDK,QAAAA,KAAK,CAACE,cAAN;AACD;AACF,KAxJH;;AA0JUI,IAAAA,aA1JV,GA0J0B,UAACC,CAAD,EAAyC;AAC/D,UAAI,MAAKd,KAAL,CAAWQ,QAAf,EAAyB;AACvB;AACD;;AAED,UAAI,MAAKR,KAAL,CAAWe,SAAf,EAA0B;AACxB,cAAKf,KAAL,CAAWe,SAAX,CAAqBD,CAArB;AACA,YAAIA,CAAC,CAACH,gBAAN,EAAwB;AACtB;AACD;AACF;AACD,UAAMV,EAAE,GAAG,MAAKF,KAAL,EAAX;AACA,UAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B;AAC1B;AACD;AACD,UAAI,CAACvB,UAAU,CAACoC,CAAD,CAAf,EAAoB;AAClB;AACD;AACDA,MAAAA,CAAC,CAACL,cAAF;AACA,UAAMO,KAAK,GAAGrC,cAAc,CAACmC,CAAD,CAAd,IAAqBlC,YAAY,CAACkC,CAAD,CAAjC,GAAuC,CAAC,CAAxC,GAA4C,CAA1D;AACA,YAAKrB,OAAL,CAAawB,UAAb,CAAwBhB,EAAxB,EAA4Be,KAA5B;AACD,KA/KH;;AAiLUE,IAAAA,WAjLV,GAiLwB,YAAM;AAC1B,UAAI,MAAKlB,KAAL,CAAWQ,QAAf,EAAyB;AACvB;AACD;;AAED;AACA;AACAW,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAItC,WAAW,CAACuC,YAAZ,IAA4BvC,WAAW,CAACwC,cAA5C,EAA4D;AAC1D,gBAAKC,QAAL,CAAc,EAAE3B,iBAAiB,EAAE,IAArB,EAAd;AACD;AACF,OAJoB,CAArB;AAKD,KA7LH;;AA+LU4B,IAAAA,UA/LV,GA+LuB,YAAM;AACzB,UAAI,MAAKvB,KAAL,CAAWQ,QAAf,EAAyB;AACvB;AACD;;AAED,YAAKc,QAAL,CAAc,EAAE3B,iBAAiB,EAAE,KAArB,EAAd;AACD,KArMH,iDA0BS6B,yBA1BT,GA0BE,qCAAmC,CACjChD,SAAS,CAAC,KAAKiB,OAAL,KAAiBN,uBAAlB,EAA2C,4CAA3C,CAAT,CACD,CA5BH,QA8BSsC,iBA9BT,GA8BE,6BAA2B,CACzB,IAAMxB,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAaiC,MAAb,CAAoBzB,EAApB,EAAwB,KAAKI,cAA7B,EACD,CACF,CAnCH,QAqCSsB,kBArCT,GAqCE,8BAA4B,CAC1B,IAAI,KAAKlC,OAAL,CAAamC,SAAb,KAA2B,KAAK5B,KAAL,CAAWC,EAA1C,EAA8C,CAC5C,KAAKR,OAAL,CAAaoC,YAAb,GACD,CACF,CAzCH,QA2CSC,oBA3CT,GA2CE,gCAA8B,CAC5B,IAAM7B,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAasC,SAAb,CAAuB9B,EAAvB,EACD,CACF,CAhDH,QAkDS+B,MAlDT,GAkDE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACpC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACqC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CA3DH,QA6DSC,aA7DT,GA6DE,yBAAuB,CACrB,OAAO,EACLC,KAAK,EAAEC,OAAO,CAAC,KAAKpC,KAAL,CAAWmC,KAAZ,CADT,EAELE,OAAO,EAAED,OAAO,CAAC,KAAKpC,KAAL,CAAWqC,OAAZ,CAFX,EAGLC,OAAO,EAAEF,OAAO,CAAC,KAAKpC,KAAL,CAAWsC,OAAZ,CAHX,EAILC,OAAO,EAAEH,OAAO,CAAC,KAAKpC,KAAL,CAAWuC,OAAZ,CAJX,EAKL/B,QAAQ,EAAE4B,OAAO,CAAC,KAAKpC,KAAL,CAAWQ,QAAZ,CALZ,EAAP,CAOD,CArEH,QAyEUyB,UAzEV,GAyEE,sBAAqB,2BAUf,KAAKjC,KAVU,CAEjBwC,QAFiB,eAEjBA,QAFiB,CAGjBhC,QAHiB,eAGjBA,QAHiB,CAIjB2B,KAJiB,eAIjBA,KAJiB,CAKjBE,OALiB,eAKjBA,OALiB,CAMjBC,OANiB,eAMjBA,OANiB,CAOjBC,OAPiB,eAOjBA,OAPiB,qCAQjB3B,SARiB,CAQN6B,SARM,sCAQMjD,GAAG,CAACkD,YAAJ,CAAiB9B,SARvB,yBASjBV,IATiB,eASjBA,IATiB,CAYnB,IAAIyC,QAAQ,GAAG,KAAf,CACA,IAAIC,UAAU,GAAG,KAAjB,CAEA,IAAM3C,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B0C,QAAQ,GAAG,KAAKlD,OAAL,CAAamC,SAAb,KAA2B,KAAK7B,KAAL,EAAtC,CACA6C,UAAU,GAAG,KAAKnD,OAAL,CAAaoD,QAA1B,CACD,CACD,IAAMC,iBAAiB,GAAGF,UAAU,GAAGtD,cAAH,GAAoBD,gBAAxD,CAEA,oBACE,oBAAC,aAAD,EAAmB,KAAKW,KAAxB,eACE,oBAAC,SAAD,IACE,SAAS,EAAEf,EAAE,gBACVG,MAAM,CAAC2D,IAAP,CAAY,KAAKnD,KAAjB,CADU,IACgB,IADhB,MAEVR,MAAM,CAACyD,QAAP,CAAgB,KAAKjD,KAArB,CAFU,IAEoB,CAAC,CAACgD,UAFtB,MAGVE,iBAAiB,CAACP,OAAlB,CAA0B,KAAK3C,KAA/B,CAHU,IAG8B,CAAC,CAAC2C,OAHhC,MAIVO,iBAAiB,CAACR,OAAlB,CAA0B,KAAK1C,KAA/B,CAJU,IAI8B,CAAC,CAAC0C,OAJhC,MAKVQ,iBAAiB,CAACT,OAAlB,CAA0B,KAAKzC,KAA/B,CALU,IAK8B,CAAC,CAACyC,OALhC,MAMVS,iBAAiB,CAACX,KAAlB,CAAwB,KAAKvC,KAA7B,CANU,IAM4B,CAAC,CAACuC,KAN9B,MAOV/C,MAAM,CAAC4D,MAAP,EAPU,IAOQ,CAAC,CAACL,QAPV,MAQVG,iBAAiB,CAACE,MAAlB,CAAyB,KAAKpD,KAA9B,CARU,IAQ6B,CAAC,CAAC+C,QAR/B,MASVvD,MAAM,CAACoB,QAAP,CAAgB,KAAKZ,KAArB,CATU,IASoB,CAAC,CAACY,QATtB,MAUVsC,iBAAiB,CAACtC,QAAlB,EAVU,IAUqB,CAAC,CAACA,QAVvB,OADf,EAaE,MAAM,EAAE,KAAKe,UAbf,EAcE,OAAO,EAAE,KAAKjB,SAdhB,EAeE,OAAO,EAAE,KAAKY,WAfhB,EAgBE,SAAS,EAAE,KAAKL,aAhBlB,EAiBE,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAjB5B,EAkBE,GAAG,EAAE1B,qBAAqB,CAAC2D,SAAD,CAArB,GAAmC,IAAnC,GAA0C,KAAKtC,eAlBtD,EAmBE,IAAI,EAAED,IAnBR,iBAqBE,oBAAC,cAAD,IAAgB,QAAQ,EAAE,KAAKT,OAAL,CAAaoC,YAAvC,IAAsDW,QAAtD,CArBF,EAsBG,KAAK9C,KAAL,CAAWC,iBAAX,iBAAgC,6BAAK,SAAS,EAAEV,EAAE,CAACG,MAAM,CAAC6D,KAAP,CAAa,KAAKrD,KAAlB,CAAD,EAA2BL,aAAa,CAAC0D,KAAzC,CAAlB,GAtBnC,CADF,CADF,CA4BD,CA3HH,cAAoD3E,KAAK,CAACmE,SAA1D,EAAajD,G,CACG0D,mB,GAAsB,K,CADzB1D,G,CAGG2D,W,GAAcjE,W,CAHjBM,G,CAMG4D,S,GAAY,EACxBZ,QAAQ,EAAEjE,SAAS,CAAC8E,IADI,EAExB7C,QAAQ,EAAEjC,SAAS,CAAC+E,IAFI,EAGxBpD,IAAI,EAAE3B,SAAS,CAACgF,MAAV,CAAiBC,UAHC,EAIxB9C,OAAO,EAAEnC,SAAS,CAACkF,IAJK,EAKxB1C,SAAS,EAAExC,SAAS,CAACkF,IALG,E,CANfjE,G,CAcGkD,Y,GAAe,EAC3B9B,SAAS,EAAE,GADgB,EAE3BV,IAAI,EAAE,EAFqB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Component to use as a tab\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * Link href\n   */\n  href?: string;\n\n  /**\n   * Tab identifier\n   */\n  id?: T;\n\n  /**\n   * Click event\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Click event\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Disabled indicator\n   */\n  disabled?: boolean;\n\n  /**\n   * Error indicator\n   */\n  error?: boolean;\n\n  /**\n   * Warning indicator\n   */\n  warning?: boolean;\n\n  /**\n   * Success indicator\n   */\n  success?: boolean;\n\n  /**\n   * Primary indicator\n   */\n  primary?: boolean;\n\n  /**\n   * Style property\n   */\n  style?: React.CSSProperties;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n *   <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static propTypes = {\n    children: PropTypes.node,\n    disabled: PropTypes.bool,\n    href: PropTypes.string.isRequired,\n    onClick: PropTypes.func,\n    onKeyDown: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n\n  public UNSAFE_componentWillMount() {\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\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  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      component: Component = Tab.defaultProps.component,\n      href,\n    } = this.props;\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <Component\n          className={cx({\n            [styles.root(this.theme)]: true,\n            [styles.vertical(this.theme)]: !!isVertical,\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.props.href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    const id = this.props.id || this.props.href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (this.props.component === 'a' && !this.props.href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}
+{"version":3,"sources":["Tab.tsx"],"names":["React","PropTypes","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","Tab","context","state","focusedByKeyboard","theme","tabComponent","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","UNSAFE_componentWillMount","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","root","active","focus","__KONTUR_REACT_UI__","contextType","propTypes","node","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Component to use as a tab\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * Link href\n   */\n  href?: string;\n\n  /**\n   * Tab identifier\n   */\n  id?: T;\n\n  /**\n   * Click event\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Click event\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Disabled indicator\n   */\n  disabled?: boolean;\n\n  /**\n   * Cостояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Cостояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * Success indicator\n   */\n  success?: boolean;\n\n  /**\n   * Primary indicator\n   */\n  primary?: boolean;\n\n  /**\n   * Style property\n   */\n  style?: React.CSSProperties;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n *   <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static propTypes = {\n    children: PropTypes.node,\n    disabled: PropTypes.bool,\n    href: PropTypes.string.isRequired,\n    onClick: PropTypes.func,\n    onKeyDown: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n\n  public UNSAFE_componentWillMount() {\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\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  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      component: Component = Tab.defaultProps.component,\n      href,\n    } = this.props;\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <Component\n          className={cx({\n            [styles.root(this.theme)]: true,\n            [styles.vertical(this.theme)]: !!isVertical,\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.props.href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    const id = this.props.id || this.props.href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (this.props.component === 'a' && !this.props.href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}

package/components/Tabs/Tab.d.ts

@@ -40,11 +40,11 @@ export interface TabProps<T extends string = string> extends CommonProps {
      */
     disabled?: boolean;
     /**
-     * Error indicator
+     * Cостояние валидации при ошибке.
      */
     error?: boolean;
     /**
-     * Warning indicator
+     * Cостояние валидации при предупреждении.
      */
     warning?: boolean;
     /**

package/components/Textarea/Textarea/Textarea.js

@@ -108,7 +108,8 @@ export var Textarea = /*#__PURE__*/function (_React$Component) {
           counterHelp = props.counterHelp,
           extraRow = props.extraRow,
           disableAnimations = props.disableAnimations,
-          textareaProps = _objectWithoutPropertiesLoose(props, ["width", "error", "warning", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations"]);
+          disabled = props.disabled,
+          textareaProps = _objectWithoutPropertiesLoose(props, ["width", "error", "warning", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations", "disabled"]);
 
       var isCounterVisible = _this.state.isCounterVisible;
       var rootProps = {
@@ -116,7 +117,7 @@ export var Textarea = /*#__PURE__*/function (_React$Component) {
           width: width
         }
       };
-      var textareaClassNames = cx((_cx = {}, _cx[styles.textarea(_this.theme)] = true, _cx[styles.error(_this.theme)] = !!error, _cx[styles.warning(_this.theme)] = !!warning, _cx[styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx));
+      var textareaClassNames = cx((_cx = {}, _cx[styles.textarea(_this.theme)] = true, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.error(_this.theme)] = !!error, _cx[styles.warning(_this.theme)] = !!warning, _cx[styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx));
       var textareaStyle = {
         resize: autoResize ? 'none' : resize
       };
@@ -167,7 +168,8 @@ export var Textarea = /*#__PURE__*/function (_React$Component) {
         onCut: _this.handleCut,
         onPaste: _this.handlePaste,
         onFocus: _this.handleFocus,
-        onKeyDown: _this.handleKeyDown
+        onKeyDown: _this.handleKeyDown,
+        disabled: disabled
       }), _this.props.children)), fakeTextarea, counter));
     };