@skbkontur/react-ui 0.0.0-0d47d85432 → 0.0.0-0dca6f33be

package/components/ScrollContainer/ScrollContainer.d.ts

@@ -6,6 +6,8 @@ export declare type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';
 export declare type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';
 export declare type ScrollContainerScrollState = ScrollContainerScrollStateY;
 export declare type ScrollBehaviour = 'auto' | 'smooth';
+declare type OffsetCSSPropsY = 'top' | 'right' | 'bottom';
+declare type OffsetCSSPropsX = 'right' | 'bottom' | 'left';
 export interface ScrollContainerProps extends CommonProps {
     /**
      * Инвертировать цвет скроллбара
@@ -31,12 +33,32 @@ export interface ScrollContainerProps extends CommonProps {
      * Отключение кастомного скролла
      */
     disabled?: boolean;
+    /**
+     * Смещение вертикального скроллбара
+     */
+    offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;
+    /**
+     * Смещение горизонтального скроллбара
+     */
+    offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
+    /**
+     * Скрывать скроллбар при отсутствии активности пользователя
+     */
+    hideScrollBar?: boolean;
+    /**
+     * Задержка перед скрытием скроллбара, ms. Работает только если `hideScrollBar = true`
+     */
+    hideScrollBarDelay?: number;
+    /**
+     * Отключить анимации
+     */
+    disableAnimations?: boolean;
 }
 export declare const ScrollContainerDataTids: {
     readonly root: "ScrollContainer__root";
     readonly inner: "ScrollContainer__inner";
 };
-declare type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll'>>;
+declare type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'hideScrollBar' | 'disableAnimations' | 'hideScrollBarDelay'>>;
 export declare class ScrollContainer extends React.Component<ScrollContainerProps> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
@@ -87,5 +109,6 @@ export declare class ScrollContainer extends React.Component<ScrollContainerProp
     private handleInnerScrollWheel;
     private handleMouseMove;
     private handleMouseLeave;
+    private updateInnerElement;
 }
 export {};

package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js

@@ -13,7 +13,10 @@ export var getScrollSizeParams = function getScrollSizeParams(inner, axis) {
 
   if (scrollActive) {
     scrollSize = Math.max(containerSize / contentSize * containerSize, MIN_SCROLL_SIZE);
-    scrollPos = scrollOffset / (contentSize - containerSize) * (containerSize - scrollSize);
+    scrollPos = scrollOffset / (contentSize - containerSize) * (containerSize - scrollSize); // Convert pixels to percentages
+
+    scrollSize = containerSize && 100 / containerSize * scrollSize;
+    scrollPos = containerSize && 100 / containerSize * scrollPos;
   }
 
   return {

package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.helpers.ts"],"names":["MIN_SCROLL_SIZE","scrollSizeParametersNames","getScrollSizeParams","inner","axis","offset","size","pos","contentSize","scrollOffset","containerSize","scrollActive","scrollSize","scrollPos","Math","max","getScrollYOffset","element","container","elementTopOffset","offsetTop","scrollTop","scrollHeight","offsetHeight","convertScrollbarXScrollState","state","scrollBarState","begin","end","middle","convertScrollbarYScrollState"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,yBAA1B,QAA2D,6BAA3D;;;;AAIA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqBC,IAArB,EAAyC;AAC1E,8BAA8BH,yBAAyB,CAACG,IAAD,CAAvD,CAAQC,MAAR,yBAAQA,MAAR,CAAgBC,IAAhB,yBAAgBA,IAAhB,CAAsBC,GAAtB,yBAAsBA,GAAtB;;AAEA,MAAMC,WAAW,GAAGL,KAAK,CAACG,IAAD,CAAzB;AACA,MAAMG,YAAY,GAAGN,KAAK,CAACI,GAAD,CAA1B;AACA,MAAMG,aAAa,GAAGP,KAAK,CAACE,MAAD,CAA3B;;AAEA,MAAMM,YAAY,GAAGD,aAAa,GAAGF,WAArC;;AAEA,MAAII,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;;AAEA,MAAIF,YAAJ,EAAkB;AAChBC,IAAAA,UAAU,GAAGE,IAAI,CAACC,GAAL,CAAUL,aAAa,GAAGF,WAAjB,GAAgCE,aAAzC,EAAwDV,eAAxD,CAAb;AACAa,IAAAA,SAAS,GAAIJ,YAAY,IAAID,WAAW,GAAGE,aAAlB,CAAb,IAAkDA,aAAa,GAAGE,UAAlE,CAAZ;AACD;;AAED,SAAO;AACLD,IAAAA,YAAY,EAAZA,YADK;AAELC,IAAAA,UAAU,EAAVA,UAFK;AAGLC,IAAAA,SAAS,EAATA,SAHK,EAAP;;AAKD,CAtBM;;AAwBP,OAAO,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAuBC,SAAvB,EAAkD;AAChF,MAAMC,gBAAgB,GAAGF,OAAO,CAACG,SAAjC;;AAEA,MAAIF,SAAS,CAACG,SAAV,GAAsBF,gBAA1B,EAA4C;AAC1C,WAAOA,gBAAP;AACD;;AAED,MAAMd,MAAM,GAAGc,gBAAgB,GAAGF,OAAO,CAACK,YAA3B,GAA0CJ,SAAS,CAACK,YAAnE;AACA,MAAIL,SAAS,CAACG,SAAV,GAAsBhB,MAA1B,EAAkC;AAChC,WAAOA,MAAP;AACD;;AAED,SAAOa,SAAS,CAACG,SAAjB;AACD,CAbM;;AAeP,OAAO,IAAMG,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACC,KAAD,EAA8D;AACxG,MAAMC,cAAyE,GAAG;AAChFC,IAAAA,KAAK,EAAE,MADyE;AAEhFC,IAAAA,GAAG,EAAE,OAF2E;AAGhFC,IAAAA,MAAM,EAAE,QAHwE,EAAlF;;;AAMA,SAAOH,cAAc,CAACD,KAAD,CAArB;AACD,CARM;;AAUP,OAAO,IAAMK,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACL,KAAD,EAA8D;AACxG,MAAMC,cAAyE,GAAG;AAChFC,IAAAA,KAAK,EAAE,KADyE;AAEhFC,IAAAA,GAAG,EAAE,QAF2E;AAGhFC,IAAAA,MAAM,EAAE,QAHwE,EAAlF;;;AAMA,SAAOH,cAAc,CAACD,KAAD,CAArB;AACD,CARM","sourcesContent":["import { MIN_SCROLL_SIZE, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { ScrollBarScrollState } from './ScrollBar';\nimport { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';\n\nexport const getScrollSizeParams = (inner: HTMLElement, axis: 'x' | 'y') => {\n  const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n  const contentSize = inner[size];\n  const scrollOffset = inner[pos];\n  const containerSize = inner[offset];\n\n  const scrollActive = containerSize < contentSize;\n\n  let scrollSize = 0;\n  let scrollPos = 0;\n\n  if (scrollActive) {\n    scrollSize = Math.max((containerSize / contentSize) * containerSize, MIN_SCROLL_SIZE);\n    scrollPos = (scrollOffset / (contentSize - containerSize)) * (containerSize - scrollSize);\n  }\n\n  return {\n    scrollActive,\n    scrollSize,\n    scrollPos,\n  };\n};\n\nexport const getScrollYOffset = (element: HTMLElement, container: HTMLElement) => {\n  const elementTopOffset = element.offsetTop;\n\n  if (container.scrollTop > elementTopOffset) {\n    return elementTopOffset;\n  }\n\n  const offset = elementTopOffset + element.scrollHeight - container.offsetHeight;\n  if (container.scrollTop < offset) {\n    return offset;\n  }\n\n  return container.scrollTop;\n};\n\nexport const convertScrollbarXScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateX => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateX> = {\n    begin: 'left',\n    end: 'right',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n\nexport const convertScrollbarYScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateY => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateY> = {\n    begin: 'top',\n    end: 'bottom',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n"]}
+{"version":3,"sources":["ScrollContainer.helpers.ts"],"names":["MIN_SCROLL_SIZE","scrollSizeParametersNames","getScrollSizeParams","inner","axis","offset","size","pos","contentSize","scrollOffset","containerSize","scrollActive","scrollSize","scrollPos","Math","max","getScrollYOffset","element","container","elementTopOffset","offsetTop","scrollTop","scrollHeight","offsetHeight","convertScrollbarXScrollState","state","scrollBarState","begin","end","middle","convertScrollbarYScrollState"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,yBAA1B,QAA2D,6BAA3D;;;;AAIA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqBC,IAArB,EAAyC;AAC1E,8BAA8BH,yBAAyB,CAACG,IAAD,CAAvD,CAAQC,MAAR,yBAAQA,MAAR,CAAgBC,IAAhB,yBAAgBA,IAAhB,CAAsBC,GAAtB,yBAAsBA,GAAtB;;AAEA,MAAMC,WAAW,GAAGL,KAAK,CAACG,IAAD,CAAzB;AACA,MAAMG,YAAY,GAAGN,KAAK,CAACI,GAAD,CAA1B;AACA,MAAMG,aAAa,GAAGP,KAAK,CAACE,MAAD,CAA3B;;AAEA,MAAMM,YAAY,GAAGD,aAAa,GAAGF,WAArC;;AAEA,MAAII,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;;AAEA,MAAIF,YAAJ,EAAkB;AAChBC,IAAAA,UAAU,GAAGE,IAAI,CAACC,GAAL,CAAUL,aAAa,GAAGF,WAAjB,GAAgCE,aAAzC,EAAwDV,eAAxD,CAAb;AACAa,IAAAA,SAAS,GAAIJ,YAAY,IAAID,WAAW,GAAGE,aAAlB,CAAb,IAAkDA,aAAa,GAAGE,UAAlE,CAAZ;;AAEA;AACAA,IAAAA,UAAU,GAAGF,aAAa,IAAK,MAAMA,aAAP,GAAwBE,UAAtD;AACAC,IAAAA,SAAS,GAAGH,aAAa,IAAK,MAAMA,aAAP,GAAwBG,SAArD;AACD;;AAED,SAAO;AACLF,IAAAA,YAAY,EAAZA,YADK;AAELC,IAAAA,UAAU,EAAVA,UAFK;AAGLC,IAAAA,SAAS,EAATA,SAHK,EAAP;;AAKD,CA1BM;;AA4BP,OAAO,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAuBC,SAAvB,EAAkD;AAChF,MAAMC,gBAAgB,GAAGF,OAAO,CAACG,SAAjC;;AAEA,MAAIF,SAAS,CAACG,SAAV,GAAsBF,gBAA1B,EAA4C;AAC1C,WAAOA,gBAAP;AACD;;AAED,MAAMd,MAAM,GAAGc,gBAAgB,GAAGF,OAAO,CAACK,YAA3B,GAA0CJ,SAAS,CAACK,YAAnE;AACA,MAAIL,SAAS,CAACG,SAAV,GAAsBhB,MAA1B,EAAkC;AAChC,WAAOA,MAAP;AACD;;AAED,SAAOa,SAAS,CAACG,SAAjB;AACD,CAbM;;AAeP,OAAO,IAAMG,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACC,KAAD,EAA8D;AACxG,MAAMC,cAAyE,GAAG;AAChFC,IAAAA,KAAK,EAAE,MADyE;AAEhFC,IAAAA,GAAG,EAAE,OAF2E;AAGhFC,IAAAA,MAAM,EAAE,QAHwE,EAAlF;;;AAMA,SAAOH,cAAc,CAACD,KAAD,CAArB;AACD,CARM;;AAUP,OAAO,IAAMK,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACL,KAAD,EAA8D;AACxG,MAAMC,cAAyE,GAAG;AAChFC,IAAAA,KAAK,EAAE,KADyE;AAEhFC,IAAAA,GAAG,EAAE,QAF2E;AAGhFC,IAAAA,MAAM,EAAE,QAHwE,EAAlF;;;AAMA,SAAOH,cAAc,CAACD,KAAD,CAArB;AACD,CARM","sourcesContent":["import { MIN_SCROLL_SIZE, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { ScrollBarScrollState } from './ScrollBar';\nimport { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';\n\nexport const getScrollSizeParams = (inner: HTMLElement, axis: 'x' | 'y') => {\n  const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n  const contentSize = inner[size];\n  const scrollOffset = inner[pos];\n  const containerSize = inner[offset];\n\n  const scrollActive = containerSize < contentSize;\n\n  let scrollSize = 0;\n  let scrollPos = 0;\n\n  if (scrollActive) {\n    scrollSize = Math.max((containerSize / contentSize) * containerSize, MIN_SCROLL_SIZE);\n    scrollPos = (scrollOffset / (contentSize - containerSize)) * (containerSize - scrollSize);\n\n    // Convert pixels to percentages\n    scrollSize = containerSize && (100 / containerSize) * scrollSize;\n    scrollPos = containerSize && (100 / containerSize) * scrollPos;\n  }\n\n  return {\n    scrollActive,\n    scrollSize,\n    scrollPos,\n  };\n};\n\nexport const getScrollYOffset = (element: HTMLElement, container: HTMLElement) => {\n  const elementTopOffset = element.offsetTop;\n\n  if (container.scrollTop > elementTopOffset) {\n    return elementTopOffset;\n  }\n\n  const offset = elementTopOffset + element.scrollHeight - container.offsetHeight;\n  if (container.scrollTop < offset) {\n    return offset;\n  }\n\n  return container.scrollTop;\n};\n\nexport const convertScrollbarXScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateX => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateX> = {\n    begin: 'left',\n    end: 'right',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n\nexport const convertScrollbarYScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateY => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateY> = {\n    begin: 'top',\n    end: 'bottom',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n"]}

package/components/ScrollContainer/ScrollContainer.md

@@ -141,3 +141,55 @@ var innerStyle = {
   </div>
 </div>;
 ```
+
+
+Смещение скроллбара
+
+```jsx harmony
+const containerStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  width: 200,
+};
+
+const offsetY = {
+  top: 8,
+  bottom: 8,
+  right: 8,
+};
+
+<div style={containerStyle}>
+  <ScrollContainer offsetY={offsetY}>
+    {Array(30).fill(null).map((_,i) => (
+      <div key={i}>
+        {i}
+      </div>
+    ))}
+  </ScrollContainer>
+</div>
+```
+
+Проп `hideScrollBar` скрывает скроллбар при отсутствии активности пользователя. Задержку на скрытие скроллбара можно регулировать пропом `hideScrollBarDelay` (по умолчанию 500ms)
+
+```jsx harmony
+var divStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  position: 'relative',
+  verticalAlign: 'top',
+  width: 200,
+};
+<div style={divStyle}>
+  <ScrollContainer hideScrollBar={true}>
+    {Array(30).fill(null).map((_,i) => (
+      <div key={i}>
+        {i}
+      </div>
+    ))}
+  </ScrollContainer>
+</div>
+```

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

@@ -1,11 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 export var globalClasses = prefix('scroll-container')({
   scrollbarX: 'scrollbar-x',
   scrollbarY: 'scrollbar-y',
+  scrollbarContainerX: 'scrollbar-container-x',
+  scrollbarContainerY: 'scrollbar-container-y',
   inner: 'inner'
 });
 export var styles = memoizeStyle({
@@ -19,21 +21,42 @@ export var styles = memoizeStyle({
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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    "])));
   },
   scrollBar: function scrollBar(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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    "])), t.scrollContainerScrollBarColor);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 200;\n      border-radius: 5px;\n      background: ", ";\n      opacity: 0;\n    "])), t.scrollContainerScrollBarColor);
+  },
+  visibleScrollBar: function visibleScrollBar() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
   },
   scrollBarInvert: function scrollBarInvert(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &::after {\n        background: #ccc;\n        background: ", ";\n      }\n    "])), t.scrollContainerScrollBarInvertColor);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: #ccc;\n      background: ", ";\n    "])), t.scrollContainerScrollBarInvertColor);
+  },
+  scrollBarContainerY: function scrollBarContainerY() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: 2px;\n      top: 1px;\n      bottom: 1px;\n      width: 0;\n    "])));
   },
   scrollBarY: function scrollBarY(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      transition: width 0.2s;\n      width: ", ";\n    "])), t.scrollContainerScrollBarSize);
   },
   scrollBarYHover: function scrollBarYHover(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+  },
+  scrollBarContainerX: function scrollBarContainerX(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: 1px;\n      bottom: 1px;\n      left: 1px;\n      height: 0;\n\n      .", " ~ & {\n        margin-right: calc(", " + 3px) !important;\n      }\n\n      & ~ .", " {\n        &::after {\n          content: ' ';\n          width: 100%;\n          display: block;\n          height: calc(", " + 2px);\n        }\n      }\n    "])), globalClasses.scrollbarContainerY, t.scrollContainerScrollBarHoverSize, globalClasses.inner, t.scrollContainerScrollBarHoverSize);
   },
   scrollBarX: function scrollBarX(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\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);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      transition: height 0.2s;\n      height: ", ";\n    "])), t.scrollContainerScrollBarSize);
   },
   scrollBarXHover: function scrollBarXHover(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+  },
+  transition: function transition() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      opacity: 0 !important; //override scrollBar opacity\n    "])));
+  },
+  transitionActive: function transitionActive() {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      transition: opacity 100ms ease-out !important; //override scrollBarX and scrollBarY transition\n      opacity: 1 !important; //override scrollBar opacity\n    "])));
+  },
+  transitionLeave: function transitionLeave() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      opacity: 1 !important; //override scrollBar opacity\n    "])));
+  },
+  transitionLeaveActive: function transitionLeaveActive() {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      opacity: 0 !important; //override scrollBar opacity\n      transition: opacity 300ms ease-out !important; //override scrollBarX and scrollBarY transition\n    "])));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.styles.ts"],"names":["css","memoizeStyle","prefix","globalClasses","scrollbarX","scrollbarY","inner","styles","root","innerIE11","scrollBar","t","scrollContainerScrollBarColor","scrollBarInvert","scrollContainerScrollBarInvertColor","scrollBarY","scrollContainerScrollBarSize","scrollBarYHover","scrollContainerScrollBarHoverSize","scrollBarX","scrollBarXHover"],"mappings":"oQAAA,SAASA,GAAT,EAAcC,YAAd,EAA4BC,MAA5B,QAA0C,2BAA1C;;;AAGA,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,kBAAD,CAAN,CAA2B;AACtDE,EAAAA,UAAU,EAAE,aAD0C;AAEtDC,EAAAA,UAAU,EAAE,aAF0C;AAGtDC,EAAAA,KAAK,EAAE,OAH+C,EAA3B,CAAtB;;;AAMP,OAAO,IAAMC,MAAM,GAAGN,YAAY,CAAC;AACjCO,EAAAA,IADiC,kBAC1B;AACL,WAAOR,GAAP;;;;;AAKD,GAPgC;;AASjCM,EAAAA,KATiC,mBASzB;AACN,WAAON,GAAP;;;;;;;;;;;;;;AAcD,GAxBgC;;AA0BjCS,EAAAA,SA1BiC,uBA0BrB;AACV,WAAOT,GAAP;;;;;;;AAOD,GAlCgC;;AAoCjCU,EAAAA,SApCiC,qBAoCvBC,CApCuB,EAoCb;AAClB,WAAOX,GAAP;;;;;;;;;AASkBW,IAAAA,CAAC,CAACC,6BATpB;;;AAYD,GAjDgC;;AAmDjCC,EAAAA,eAnDiC,2BAmDjBF,CAnDiB,EAmDP;AACxB,WAAOX,GAAP;;;AAGkBW,IAAAA,CAAC,CAACG,mCAHpB;;;AAMD,GA1DgC;;AA4DjCC,EAAAA,UA5DiC,sBA4DtBJ,CA5DsB,EA4DZ;AACnB,WAAOX,GAAP;;;AAGWW,IAAAA,CAAC,CAACK,4BAHb;;;;;;;;;AAYD,GAzEgC;;AA2EjCC,EAAAA,eA3EiC,2BA2EjBN,CA3EiB,EA2EP;AACxB,WAAOX,GAAP;AACWW,IAAAA,CAAC,CAACO,iCADb;;AAGD,GA/EgC;;AAiFjCC,EAAAA,UAjFiC,sBAiFtBR,CAjFsB,EAiFZ;AACnB,WAAOX,GAAP;;;AAGYW,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,GA7GgC;;AA+GjCE,EAAAA,eA/GiC,2BA+GjBT,CA/GiB,EA+GP;AACxB,WAAOX,GAAP;AACYW,IAAAA,CAAC,CAACO,iCADd;;AAGD,GAnHgC,EAAD,CAA3B","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      /* 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  innerIE11() {\n    return css`\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  },\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"]}
+{"version":3,"sources":["ScrollContainer.styles.ts"],"names":["css","memoizeStyle","prefix","globalClasses","scrollbarX","scrollbarY","scrollbarContainerX","scrollbarContainerY","inner","styles","root","innerIE11","scrollBar","t","scrollContainerScrollBarColor","visibleScrollBar","scrollBarInvert","scrollContainerScrollBarInvertColor","scrollBarContainerY","scrollBarY","scrollContainerScrollBarSize","scrollBarYHover","scrollContainerScrollBarHoverSize","scrollBarContainerX","scrollBarX","scrollBarXHover","transition","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"yYAAA,SAASA,GAAT,EAAcC,YAAd,EAA4BC,MAA5B,QAA0C,2BAA1C;;;AAGA,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,kBAAD,CAAN,CAA2B;AACtDE,EAAAA,UAAU,EAAE,aAD0C;AAEtDC,EAAAA,UAAU,EAAE,aAF0C;AAGtDC,EAAAA,mBAAmB,EAAE,uBAHiC;AAItDC,EAAAA,mBAAmB,EAAE,uBAJiC;AAKtDC,EAAAA,KAAK,EAAE,OAL+C,EAA3B,CAAtB;;;AAQP,OAAO,IAAMC,MAAM,GAAGR,YAAY,CAAC;AACjCS,EAAAA,IADiC,kBAC1B;AACL,WAAOV,GAAP;;;;;AAKD,GAPgC;;AASjCQ,EAAAA,KATiC,mBASzB;AACN,WAAOR,GAAP;;;;;;;;;;;;;;AAcD,GAxBgC;;AA0BjCW,EAAAA,SA1BiC,uBA0BrB;AACV,WAAOX,GAAP;;;;;;;AAOD,GAlCgC;;AAoCjCY,EAAAA,SApCiC,qBAoCvBC,CApCuB,EAoCb;AAClB,WAAOb,GAAP;;;;AAIgBa,IAAAA,CAAC,CAACC,6BAJlB;;;AAOD,GA5CgC;;AA8CjCC,EAAAA,gBA9CiC,8BA8Cd;AACjB,WAAOf,GAAP;;;AAGD,GAlDgC;;AAoDjCgB,EAAAA,eApDiC,2BAoDjBH,CApDiB,EAoDP;AACxB,WAAOb,GAAP;;AAEgBa,IAAAA,CAAC,CAACI,mCAFlB;;AAID,GAzDgC;;AA2DjCC,EAAAA,mBA3DiC,iCA2DX;AACpB,WAAOlB,GAAP;;;;;;;AAOD,GAnEgC;;AAqEjCmB,EAAAA,UArEiC,sBAqEtBN,CArEsB,EAqEZ;AACnB,WAAOb,GAAP;;;AAGWa,IAAAA,CAAC,CAACO,4BAHb;;AAKD,GA3EgC;;AA6EjCC,EAAAA,eA7EiC,2BA6EjBR,CA7EiB,EA6EP;AACxB,WAAOb,GAAP;AACWa,IAAAA,CAAC,CAACS,iCADb;;AAGD,GAjFgC;;AAmFjCC,EAAAA,mBAnFiC,+BAmFbV,CAnFa,EAmFH;AAC5B,WAAOb,GAAP;;;;;;;AAOKG,IAAAA,aAAa,CAACI,mBAPnB;AAQyBM,IAAAA,CAAC,CAACS,iCAR3B;;;AAWSnB,IAAAA,aAAa,CAACK,KAXvB;;;;;AAgBqBK,IAAAA,CAAC,CAACS,iCAhBvB;;;;AAoBD,GAxGgC;;AA0GjCE,EAAAA,UA1GiC,sBA0GtBX,CA1GsB,EA0GZ;AACnB,WAAOb,GAAP;;;AAGYa,IAAAA,CAAC,CAACO,4BAHd;;AAKD,GAhHgC;;AAkHjCK,EAAAA,eAlHiC,2BAkHjBZ,CAlHiB,EAkHP;AACxB,WAAOb,GAAP;AACYa,IAAAA,CAAC,CAACS,iCADd;;AAGD,GAtHgC;AAuHjCI,EAAAA,UAvHiC,wBAuHpB;AACX,WAAO1B,GAAP;;;AAGD,GA3HgC;AA4HjC2B,EAAAA,gBA5HiC,8BA4Hd;AACjB,WAAO3B,GAAP;;;;AAID,GAjIgC;AAkIjC4B,EAAAA,eAlIiC,6BAkIf;AAChB,WAAO5B,GAAP;;;AAGD,GAtIgC;AAuIjC6B,EAAAA,qBAvIiC,mCAuIT;AACtB,WAAO7B,GAAP;;;;AAID,GA5IgC,EAAD,CAA3B","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  scrollbarContainerX: 'scrollbar-container-x',\n  scrollbarContainerY: 'scrollbar-container-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      /* 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  innerIE11() {\n    return css`\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  },\n\n  scrollBar(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 200;\n      border-radius: 5px;\n      background: ${t.scrollContainerScrollBarColor};\n      opacity: 0;\n    `;\n  },\n\n  visibleScrollBar() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  scrollBarInvert(t: Theme) {\n    return css`\n      background: #ccc;\n      background: ${t.scrollContainerScrollBarInvertColor};\n    `;\n  },\n\n  scrollBarContainerY() {\n    return css`\n      position: absolute;\n      right: 2px;\n      top: 1px;\n      bottom: 1px;\n      width: 0;\n    `;\n  },\n\n  scrollBarY(t: Theme) {\n    return css`\n      right: 0;\n      transition: width 0.2s;\n      width: ${t.scrollContainerScrollBarSize};\n    `;\n  },\n\n  scrollBarYHover(t: Theme) {\n    return css`\n      width: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n\n  scrollBarContainerX(t: Theme) {\n    return css`\n      position: absolute;\n      right: 1px;\n      bottom: 1px;\n      left: 1px;\n      height: 0;\n\n      .${globalClasses.scrollbarContainerY} ~ & {\n        margin-right: calc(${t.scrollContainerScrollBarHoverSize} + 3px) !important;\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  scrollBarX(t: Theme) {\n    return css`\n      bottom: 0;\n      transition: height 0.2s;\n      height: ${t.scrollContainerScrollBarSize};\n    `;\n  },\n\n  scrollBarXHover(t: Theme) {\n    return css`\n      height: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n  transition() {\n    return css`\n      opacity: 0 !important; //override scrollBar opacity\n    `;\n  },\n  transitionActive() {\n    return css`\n      transition: opacity 100ms ease-out !important; //override scrollBarX and scrollBarY transition\n      opacity: 1 !important; //override scrollBar opacity\n    `;\n  },\n  transitionLeave() {\n    return css`\n      opacity: 1 !important; //override scrollBar opacity\n    `;\n  },\n  transitionLeaveActive() {\n    return css`\n      opacity: 0 !important; //override scrollBar opacity\n      transition: opacity 300ms ease-out !important; //override scrollBarX and scrollBarY transition\n    `;\n  },\n});\n"]}

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

@@ -2,6 +2,8 @@ import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     scrollbarX: string;
     scrollbarY: string;
+    scrollbarContainerX: string;
+    scrollbarContainerY: string;
     inner: string;
 };
 export declare const styles: {
@@ -9,9 +11,16 @@ export declare const styles: {
     inner(): string;
     innerIE11(): string;
     scrollBar(t: Theme): string;
+    visibleScrollBar(): string;
     scrollBarInvert(t: Theme): string;
+    scrollBarContainerY(): string;
     scrollBarY(t: Theme): string;
     scrollBarYHover(t: Theme): string;
+    scrollBarContainerX(t: Theme): string;
     scrollBarX(t: Theme): string;
     scrollBarXHover(t: Theme): string;
+    transition(): string;
+    transitionActive(): string;
+    transitionLeave(): string;
+    transitionLeaveActive(): string;
 };

package/components/Select/ArrowDownIcon/ArrowDownIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ArrowCDownIcon16Regular } from "../../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular";
+import { ArrowCDownIcon20Regular } from "../../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular";
+import { ArrowCDownIcon24Regular } from "../../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular";
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+export var ArrowDownIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon16Regular, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon20Regular, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon24Regular, null);
+  }
+}, 'ArrowDownIcon');

package/components/Select/ArrowDownIcon/ArrowDownIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowDownIcon.tsx"],"names":["React","ArrowCDownIcon16Regular","ArrowCDownIcon20Regular","ArrowCDownIcon24Regular","iconSizer","ArrowDownIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,aAAa,GAAGD,SAAS;AACpC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,uBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,OAAN,EAHT,EADoC;;AAMpC,eANoC,CAA/B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowCDownIcon16Regular } from '../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular';\nimport { ArrowCDownIcon20Regular } from '../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular';\nimport { ArrowCDownIcon24Regular } from '../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowDownIcon = iconSizer(\n  {\n    small: () => <ArrowCDownIcon16Regular />,\n    medium: () => <ArrowCDownIcon20Regular />,\n    large: () => <ArrowCDownIcon24Regular />,\n  },\n  'ArrowDownIcon',\n);\n"]}

package/components/Select/ArrowDownIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Select/ArrowDownIcon.js",
+  "module": "ArrowDownIcon",
+  "types": "../ArrowDownIcon.d.ts",
+  "sideEffects": false
+}

package/components/Select/ArrowDownIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ArrowDownIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/Select/Select/Select.js

@@ -45,7 +45,6 @@ function _arrayLikeToArray(arr, len) {
 }
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import invariant from 'invariant';
 import { isKeyArrowDown, isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace } from "../../../lib/events/keyboard/identifiers";
 import { locale } from "../../../lib/locale/decorators";
@@ -67,6 +66,9 @@ import { MobilePopup } from "../../../internal/MobilePopup";
 import { cx } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { ArrowDownIcon } from "../ArrowDownIcon";
 import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
 import { styles } from "../Select.styles";
@@ -144,24 +146,33 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
         label: label,
         isPlaceholder: isPlaceholder,
         onClick: _this.toggle,
-        onKeyDown: _this.handleKey
+        onKeyDown: _this.handleKey,
+        'aria-describedby': _this.props['aria-describedby']
       };
       return buttonParams;
     };
 
-    _this.getSearch = function (noMargin) {
-      var _cx;
-
+    _this.getSearch = function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.search()] = !noMargin, _cx))
+        className: styles.search(),
+        onKeyDown: _this.handleKey
       }, /*#__PURE__*/React.createElement(Input, {
-        value: _this.state.searchPattern,
         ref: _this.focusInput,
         onValueChange: _this.handleSearch,
         width: "100%"
       }));
     };
 
+    _this.getMobileSearch = function () {
+      return /*#__PURE__*/React.createElement(Input, {
+        autoFocus: true,
+        value: _this.state.searchPattern,
+        ref: _this.focusInput,
+        onValueChange: _this.handleSearch,
+        width: "100%"
+      });
+    };
+
     _this.getMenuItems = function (value) {
       var isMobile = _this.isMobileLayout;
       return _this.mapItems(function (iValue, item, i, comment) {
@@ -317,7 +328,9 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
+      _this2.theme = ThemeFactory.create({
+        menuOffsetY: theme.selectMenuOffsetY
+      }, theme);
       return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
         value: _this2.theme
       }, _this2.renderMain());
@@ -345,10 +358,12 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx2;
+    var _cx;
 
     var buttonParams = this.getDefaultButtonParams();
-    var button = this.getButton(buttonParams);
+    var button = /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+      value: getSelectTheme(this.theme, this.props)
+    }, this.getButton(buttonParams));
     var isMobile = this.isMobileLayout;
     var style = {
       width: this.props.width,
@@ -356,7 +371,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     };
     var root = /*#__PURE__*/React.createElement("span", {
       "data-tid": SelectDataTids.root,
-      className: cx((_cx2 = {}, _cx2[styles.root()] = true, _cx2[styles.rootMobile(this.theme)] = isMobile, _cx2)),
+      className: cx((_cx = {}, _cx[styles.root()] = true, _cx[styles.rootMobile(this.theme)] = isMobile, _cx)),
       style: style
     }, button, this.getMenuRenderer());
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
@@ -406,7 +421,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderDefaultButton = function renderDefaultButton(params) {
-    var _cx3, _cx4;
+    var _cx2, _cx3;
 
     var buttonProps = _extends({}, filterProps(this.props, PASS_BUTTON_PROPS), {
       align: 'left',
@@ -414,26 +429,28 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
       width: '100%',
       onClick: params.onClick,
       onKeyDown: params.onKeyDown,
-      active: params.opened
+      active: params.opened,
+      'aria-describedby': params['aria-describedby']
     });
 
     var use = this.getProps().use;
     var labelProps = {
-      className: cx((_cx3 = {}, _cx3[styles.label()] = use !== 'link', _cx3[styles.placeholder(this.theme)] = params.isPlaceholder, _cx3[styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx3[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx3)),
+      className: cx((_cx2 = {}, _cx2[styles.label()] = use !== 'link', _cx2[styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)),
       style: {
         paddingRight: this.getSelectIconGap()
       }
     };
     var useIsCustom = use !== 'default';
-    return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-      value: getSelectTheme(this.theme, this.props)
-    }, /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("div", {
+    var icon = isTheme2022(this.theme) ? /*#__PURE__*/React.createElement(ArrowDownIcon, {
+      size: this.props.size
+    }) : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null);
+    return /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("div", {
       className: styles.selectButtonContainer()
     }, this.props._icon && /*#__PURE__*/React.createElement("div", {
       className: this.getLeftIconClass(this.props.size)
     }, this.props._icon), /*#__PURE__*/React.createElement("span", labelProps, params.label), /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[styles.customUseArrow()] = useIsCustom, _cx4))
-    }, /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null)))));
+      className: cx(styles.arrowWrap(this.theme), (_cx3 = {}, _cx3[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx3[styles.customUseArrow()] = useIsCustom, _cx3))
+    }, icon)));
   };
 
   _proto.getSelectIconGap = function getSelectIconGap() {
@@ -458,22 +475,15 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMenu = function renderMenu() {
-    var search = this.props.search ? /*#__PURE__*/React.createElement("div", {
-      className: styles.search(),
-      onKeyDown: this.handleKey
-    }, /*#__PURE__*/React.createElement(Input, {
-      ref: this.focusInput,
-      onValueChange: this.handleSearch,
-      width: "100%"
-    })) : null;
+    var search = this.props.search ? this.getSearch() : null;
     var value = this.getValue();
     var hasFixedWidth = !!this.props.menuWidth && this.props.menuWidth !== 'auto';
     return /*#__PURE__*/React.createElement(DropdownContainer, {
       getParent: this.dropdownContainerGetParent,
-      offsetY: -1,
       align: this.props.menuAlign,
       disablePortal: this.props.disablePortal,
-      hasFixedWidth: hasFixedWidth
+      hasFixedWidth: hasFixedWidth,
+      menuPos: this.props.menuPos
     }, /*#__PURE__*/React.createElement(Menu, {
       ref: this.refMenu,
       width: this.props.menuWidth,
@@ -484,13 +494,11 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMobileMenu = function renderMobileMenu() {
-    var search = this.props.search ? this.getSearch(true) : null;
+    var search = this.props.search ? this.getMobileSearch() : null;
     var value = this.getValue();
-    var isWithSearch = Boolean(search);
     return /*#__PURE__*/React.createElement(MobilePopup, {
       headerChildComponent: search,
       caption: this.props.mobileMenuHeaderText,
-      useFullHeight: isWithSearch,
       onCloseRequest: this.close,
       opened: this.state.opened
     }, /*#__PURE__*/React.createElement(Menu, {
@@ -578,28 +586,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   return Select;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.propTypes = {
-  areValuesEqual: PropTypes.func,
-  defaultValue: PropTypes.any,
-  disablePortal: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  filterItem: PropTypes.func,
-  items: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  maxMenuHeight: PropTypes.number,
-  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  placeholder: PropTypes.node,
-  renderItem: PropTypes.func,
-  renderValue: PropTypes.func,
-  search: PropTypes.bool,
-  value: PropTypes.any,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onValueChange: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onKeyDown: PropTypes.func
-}, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.defaultProps = {
   renderValue: renderValue,
   renderItem: renderItem,
   areValuesEqual: areValuesEqual,