@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/cjs/components/ScrollContainer/ScrollContainer.md

@@ -1,94 +1,143 @@
-```jsx harmony
-function items(count) {
-  var items = [];
-  for (var i = 0; i < count; ++i) {
-    items.push(i);
-  }
-  return items;
-}
-
-var divStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  position: 'relative',
-  verticalAlign: 'top',
-  width: 200,
-};
-var absStyle = {
-  border: '1px solid #000',
-  boxSizing: 'border-box',
-  position: 'absolute',
-  width: '100%',
-};
-
-<div>
-  <div style={divStyle}>
-    <ScrollContainer>
-      {items(20).map(i => (
-        <div key={i}>{i}</div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={{ ...divStyle, background: '#888' }}>
-    <ScrollContainer invert>
-      {items(20).map(i => (
-        <div key={i}>{i}</div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer>
-        {items(3).map(i => (
-          <div key={i}>{i}</div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer maxHeight={150}>
-        {items(30).map(i => (
-          <div key={i}>{i}</div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-</div>;
-```
-
-На данный момент кастомизируется только вертикальный scrollbar. Горизонтальный, при наличии, остается нативным.
-
-```jsx harmony
-function items(count) {
-  var items = [];
-  for (var i = 0; i < count; ++i) {
-    items.push(i);
-  }
-  return items;
-}
-
-var containerStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  width: 200,
-};
-
-var innerStyle = {
-  width: 400,
-};
-
-<div style={containerStyle}>
-  <ScrollContainer>
-    {items(20).map(i => (
-      <div style={innerStyle} key={i}>
-        {i}
-      </div>
-    ))}
-  </ScrollContainer>
-</div>;
-```
+```jsx harmony
+function items(count) {
+  var items = [];
+  for (var i = 0; i < count; ++i) {
+    items.push(i);
+  }
+  return items;
+}
+
+var divStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  position: 'relative',
+  verticalAlign: 'top',
+  width: 200,
+};
+var absStyle = {
+  border: '1px solid #000',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  width: '100%',
+};
+
+<div>
+  <div style={divStyle}>
+    <ScrollContainer>
+      {items(20).map((i) => (
+        <div key={i}>{i}</div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={{ ...divStyle, background: '#888' }}>
+    <ScrollContainer invert>
+      {items(20).map((i) => (
+        <div key={i}>{i}</div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer>
+        {items(3).map((i) => (
+          <div key={i}>{i}</div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer maxHeight={150}>
+        {items(30).map((i) => (
+          <div key={i}>{i}</div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+</div>;
+```
+
+Горизонтальный scrollbar.
+
+```jsx harmony
+var divStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  position: 'relative',
+  verticalAlign: 'top',
+  width: 200,
+};
+var absStyle = {
+  border: '1px solid #000',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  width: '100%',
+};
+
+function items(count) {
+  var items = [];
+  for (var i = 0; i < count; ++i) {
+    items.push(i);
+  }
+  return items;
+}
+
+var containerStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  width: 200,
+};
+
+var innerStyle = {
+  width: 400,
+};
+
+<div>
+  <div style={divStyle}>
+    <ScrollContainer>
+      {items(5).map((i) => (
+        <div style={innerStyle} key={i}>
+          {i}
+        </div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={{ ...divStyle, background: '#888' }}>
+    <ScrollContainer invert>
+      {items(20).map((i) => (
+        <div style={innerStyle} key={i}>
+          {i}
+        </div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer maxHeight={150}>
+        {items(3).map((i) => (
+          <div style={innerStyle} key={i}>
+            {i}
+          </div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer maxHeight={150} maxWidth={200}>
+        {items(30).map((i) => (
+          <div style={innerStyle} key={i}>
+            {i}
+          </div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+</div>;
+```

package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts

@@ -1,7 +1,16 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    scrollbarX: string;
+    scrollbarY: string;
+    inner: string;
+};
+export declare const styles: {
     root(): string;
     inner(): string;
-    scroll(): string;
-    scrollHover(): string;
-    scrollInvert(): string;
+    scrollBar(t: Theme): string;
+    scrollBarInvert(t: Theme): string;
+    scrollBarY(t: Theme): string;
+    scrollBarYHover(t: Theme): string;
+    scrollBarX(t: Theme): string;
+    scrollBarXHover(t: Theme): string;
 };

package/cjs/components/ScrollContainer/ScrollContainer.styles.js

@@ -1,6 +1,13 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-var styles = {
+
+var globalClasses = (0, _Emotion.prefix)('scroll-container')({
+  scrollbarX: 'scrollbar-x',
+  scrollbarY: 'scrollbar-y',
+  inner: 'inner' });exports.globalClasses = globalClasses;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
     return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n    "])));
 
@@ -10,7 +17,8 @@ var styles = {
   },
 
   inner: function inner() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-bottom: -1px;\n      max-height: 100%;\n\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      padding-bottom: 1px;\n      overflow-y: scroll;\n    "])));
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      overflow: scroll;\n      max-height: 100%;\n      max-width: 100%;\n\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      margin-bottom: -1px;\n      padding-bottom: 1px;\n      margin-right: -1px;\n      padding-right: 1px;\n\n      /* Hide scrobars without losing functionality */\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n      }\n    "])));
+
 
 
 
@@ -18,10 +26,7 @@ var styles = {
 
 
 
-  },
 
-  scroll: function scroll() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      right: 2px;\n      transition: width 0.2s;\n      width: 4px;\n      z-index: 200;\n\n      &::after {\n        background: #b7b7b7;\n        border-radius: 5px;\n        bottom: 1px;\n        content: '';\n        display: block;\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 1px;\n      }\n    "])));
 
 
 
@@ -32,7 +37,10 @@ var styles = {
 
 
 
+  },
 
+  scrollBar: function scrollBar(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      z-index: 200;\n\n      &::after {\n        content: '';\n        display: block;\n        border-radius: 5px;\n        position: absolute;\n        background: ", ";\n      }\n    "])),
 
 
 
@@ -40,22 +48,74 @@ var styles = {
 
 
 
+
+    t.scrollContainerScrollBarColor);
+
+
   },
 
-  scrollHover: function scrollHover() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 10px;\n    "])));
+  scrollBarInvert: function scrollBarInvert(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &::after {\n        background: #ccc;\n        background: ", ";\n      }\n    "])),
+
+
+    t.scrollContainerScrollBarInvertColor);
 
 
   },
 
-  scrollInvert: function scrollInvert() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &::after {\n        background: #ccc;\n        background: rgba(255, 255, 255, 0.5);\n      }\n    "])));
+  scrollBarY: function scrollBarY(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      right: 2px;\n      transition: width 0.2s;\n      width: ", ";\n\n      &::after {\n        bottom: 1px;\n        left: 0;\n        right: 0;\n        top: 1px;\n      }\n    "])),
 
 
+    t.scrollContainerScrollBarSize);
 
 
 
-  } };
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+
+
+
+  },
+
+  scrollBarYHover: function scrollBarYHover(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n    "])),
+    t.scrollContainerScrollBarHoverSize);
+
+  },
+
+  scrollBarX: function scrollBarX(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: 1px;\n      transition: height 0.2s;\n      height: ", ";\n\n      &::after {\n        bottom: 0px;\n        left: 1px;\n        right: 1px;\n        top: 0;\n      }\n\n      .", " ~ & {\n        &::after {\n          right: calc(", " + 4px) !important;\n        }\n      }\n\n      & ~ .", " {\n        &::after {\n          content: ' ';\n          width: 100%;\n          display: block;\n          height: calc(", " + 2px);\n        }\n      }\n    "])),
+
+
+    t.scrollContainerScrollBarSize,
+
+
+
+
+
+
+
+
+    globalClasses.scrollbarY,
+
+    t.scrollContainerScrollBarHoverSize,
+
+
+
+    globalClasses.inner,
+
+
+
+
+    t.scrollContainerScrollBarHoverSize);
+
+
+
+  },
+
+  scrollBarXHover: function scrollBarXHover(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    t.scrollContainerScrollBarHoverSize);
+
+  } });exports.styles = styles;

package/cjs/components/ScrollContainer/ScrollContainer.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.styles.ts"],"names":["styles","root","css","inner","scroll","scrollHover","scrollInvert","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;;AAKD,GAPY;;AASbC,EAAAA,KATa,mBASL;AACN,eAAOD,YAAP;;;;;;;;AAQD,GAlBY;;AAoBbE,EAAAA,MApBa,oBAoBJ;AACP,eAAOF,YAAP;;;;;;;;;;;;;;;;;;;AAmBD,GAxCY;;AA0CbG,EAAAA,WA1Ca,yBA0CC;AACZ,eAAOH,YAAP;;;AAGD,GA9CY;;AAgDbI,EAAAA,YAhDa,0BAgDE;AACb,eAAOJ,YAAP;;;;;;AAMD,GAvDY,EAAf;;;AA0DO,IAAMK,QAAQ,GAAG,2BAAaP,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      height: 100%;\r\n      overflow: hidden;\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  inner() {\r\n    return css`\r\n      margin-bottom: -1px;\r\n      max-height: 100%;\r\n\r\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\r\n      padding-bottom: 1px;\r\n      overflow-y: scroll;\r\n    `;\r\n  },\r\n\r\n  scroll() {\r\n    return css`\r\n      position: absolute;\r\n      right: 2px;\r\n      transition: width 0.2s;\r\n      width: 4px;\r\n      z-index: 200;\r\n\r\n      &::after {\r\n        background: #b7b7b7;\r\n        border-radius: 5px;\r\n        bottom: 1px;\r\n        content: '';\r\n        display: block;\r\n        left: 0;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 1px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  scrollHover() {\r\n    return css`\r\n      width: 10px;\r\n    `;\r\n  },\r\n\r\n  scrollInvert() {\r\n    return css`\r\n      &::after {\r\n        background: #ccc;\r\n        background: rgba(255, 255, 255, 0.5);\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["ScrollContainer.styles.ts"],"names":["globalClasses","scrollbarX","scrollbarY","inner","styles","root","css","scrollBar","t","scrollContainerScrollBarColor","scrollBarInvert","scrollContainerScrollBarInvertColor","scrollBarY","scrollContainerScrollBarSize","scrollBarYHover","scrollContainerScrollBarHoverSize","scrollBarX","scrollBarXHover"],"mappings":"oSAAA,oD;;;AAGO,IAAMA,aAAa,GAAG,qBAAO,kBAAP,EAA2B;AACtDC,EAAAA,UAAU,EAAE,aAD0C;AAEtDC,EAAAA,UAAU,EAAE,aAF0C;AAGtDC,EAAAA,KAAK,EAAE,OAH+C,EAA3B,CAAtB,C;;;AAMA,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;AAKD,GAPgC;;AASjCH,EAAAA,KATiC,mBASzB;AACN,eAAOG,YAAP;;;;;;;;;;;;;;;;;;;;AAoBD,GA9BgC;;AAgCjCC,EAAAA,SAhCiC,qBAgCvBC,CAhCuB,EAgCb;AAClB,eAAOF,YAAP;;;;;;;;;AASkBE,IAAAA,CAAC,CAACC,6BATpB;;;AAYD,GA7CgC;;AA+CjCC,EAAAA,eA/CiC,2BA+CjBF,CA/CiB,EA+CP;AACxB,eAAOF,YAAP;;;AAGkBE,IAAAA,CAAC,CAACG,mCAHpB;;;AAMD,GAtDgC;;AAwDjCC,EAAAA,UAxDiC,sBAwDtBJ,CAxDsB,EAwDZ;AACnB,eAAOF,YAAP;;;AAGWE,IAAAA,CAAC,CAACK,4BAHb;;;;;;;;;AAYD,GArEgC;;AAuEjCC,EAAAA,eAvEiC,2BAuEjBN,CAvEiB,EAuEP;AACxB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACO,iCADb;;AAGD,GA3EgC;;AA6EjCC,EAAAA,UA7EiC,sBA6EtBR,CA7EsB,EA6EZ;AACnB,eAAOF,YAAP;;;AAGYE,IAAAA,CAAC,CAACK,4BAHd;;;;;;;;;AAYKb,IAAAA,aAAa,CAACE,UAZnB;;AAcoBM,IAAAA,CAAC,CAACO,iCAdtB;;;;AAkBSf,IAAAA,aAAa,CAACG,KAlBvB;;;;;AAuBqBK,IAAAA,CAAC,CAACO,iCAvBvB;;;;AA2BD,GAzGgC;;AA2GjCE,EAAAA,eA3GiC,2BA2GjBT,CA3GiB,EA2GP;AACxB,eAAOF,YAAP;AACYE,IAAAA,CAAC,CAACO,iCADd;;AAGD,GA/GgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('scroll-container')({\n  scrollbarX: 'scrollbar-x',\n  scrollbarY: 'scrollbar-y',\n  inner: 'inner',\n});\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n    `;\n  },\n\n  inner() {\n    return css`\n      position: relative;\n      overflow: scroll;\n      max-height: 100%;\n      max-width: 100%;\n\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      margin-bottom: -1px;\n      padding-bottom: 1px;\n      margin-right: -1px;\n      padding-right: 1px;\n\n      /* Hide scrobars without losing functionality */\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n      }\n    `;\n  },\n\n  scrollBar(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 200;\n\n      &::after {\n        content: '';\n        display: block;\n        border-radius: 5px;\n        position: absolute;\n        background: ${t.scrollContainerScrollBarColor};\n      }\n    `;\n  },\n\n  scrollBarInvert(t: Theme) {\n    return css`\n      &::after {\n        background: #ccc;\n        background: ${t.scrollContainerScrollBarInvertColor};\n      }\n    `;\n  },\n\n  scrollBarY(t: Theme) {\n    return css`\n      right: 2px;\n      transition: width 0.2s;\n      width: ${t.scrollContainerScrollBarSize};\n\n      &::after {\n        bottom: 1px;\n        left: 0;\n        right: 0;\n        top: 1px;\n      }\n    `;\n  },\n\n  scrollBarYHover(t: Theme) {\n    return css`\n      width: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n\n  scrollBarX(t: Theme) {\n    return css`\n      bottom: 1px;\n      transition: height 0.2s;\n      height: ${t.scrollContainerScrollBarSize};\n\n      &::after {\n        bottom: 0px;\n        left: 1px;\n        right: 1px;\n        top: 0;\n      }\n\n      .${globalClasses.scrollbarY} ~ & {\n        &::after {\n          right: calc(${t.scrollContainerScrollBarHoverSize} + 4px) !important;\n        }\n      }\n\n      & ~ .${globalClasses.inner} {\n        &::after {\n          content: ' ';\n          width: 100%;\n          display: block;\n          height: calc(${t.scrollContainerScrollBarHoverSize} + 2px);\n        }\n      }\n    `;\n  },\n\n  scrollBarXHover(t: Theme) {\n    return css`\n      height: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n});\n"]}

package/cjs/components/ScrollContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ScrollContainer';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ScrollContainer';\n"]}

package/cjs/components/Select/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Item.tsx"],"names":["Item","render","props","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"gPAAA;;AAEA,uC;;AAEaA,I;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,kBAAD,QAAW,KAAKC,KAAL,CAAWC,QAAtB,CAAP;AACD,G,eALuBC,eAAMC,S,sBAAnBL,I,CACGM,mB,GAAsB,Y","sourcesContent":["import React from 'react';\r\n\r\nimport { MenuItem } from '../MenuItem';\r\n\r\nexport class Item extends React.Component<{ children?: React.ReactNode }> {\r\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\r\n\r\n  public render() {\r\n    return <MenuItem>{this.props.children}</MenuItem>;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Item.tsx"],"names":["Item","render","props","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"gPAAA;;AAEA,uC;;AAEaA,I;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,kBAAD,QAAW,KAAKC,KAAL,CAAWC,QAAtB,CAAP;AACD,G,eALuBC,eAAMC,S,sBAAnBL,I,CACGM,mB,GAAsB,Y","sourcesContent":["import React from 'react';\n\nimport { MenuItem } from '../MenuItem';\n\nexport class Item extends React.Component<{ children?: React.ReactNode }> {\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\n\n  public render() {\n    return <MenuItem>{this.props.children}</MenuItem>;\n  }\n}\n"]}

package/cjs/components/Select/Select.d.ts

@@ -24,7 +24,7 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
     disablePortal?: boolean;
     disabled?: boolean;
     /**
-     * Визуально показать наличие ошибки.
+     * Cостояние валидации при ошибке.
      */
     error?: boolean;
     filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
@@ -84,11 +84,18 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
     search?: boolean;
     value?: TValue;
     width?: number | string;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
     use?: ButtonUse;
     size?: ButtonSize;
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onBlur?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Текст заголовка выпдающего меню в мобильной версии
+     */
+    mobileMenuHeaderText?: string;
 }
 export interface SelectState<TValue> {
     opened: boolean;
@@ -131,6 +138,7 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     static static: (element: React.ReactElement | (() => React.ReactElement)) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
     state: SelectState<TValue>;
     private theme;
+    private isMobileLayout;
     private readonly locale;
     private menu;
     private buttonElement;
@@ -149,12 +157,17 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
      * @public
      */
     focus: () => void;
+    private getMenuRenderer;
     private renderMain;
+    private getDefaultButtonParams;
     private renderLabel;
     private getLeftIconClass;
     private renderDefaultButton;
     private getSelectIconGap;
     private renderMenu;
+    private renderMobileMenu;
+    private getSearch;
+    private getMenuItems;
     private dropdownContainerGetParent;
     private focusInput;
     private refMenu;