@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d99038a7ec

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

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;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, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+"use strict";exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _Emotion = require("../../lib/theming/Emotion");function _EMOTION_STRINGIFIED_CSS_ERROR__() {return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";}
 
 
 var globalClasses = exports.globalClasses = (0, _Emotion.prefix)('scroll-container')({
@@ -11,7 +11,7 @@ var globalClasses = exports.globalClasses = (0, _Emotion.prefix)('scroll-contain
 
 var styles = exports.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    "])));
+    return /*#__PURE__*/(0, _Emotion.css)(process.env.NODE_ENV === "production" ? { name: "14deoae", styles: "height:100%;overflow:hidden;position:relative" } : { name: "5y69uy-root", styles: "height:100%;overflow:hidden;position:relative;label:root;", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });
 
 
 
@@ -19,7 +19,7 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   inner: function inner() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      overflow: scroll;\n      height: 100%;\n      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    "])));
+    return /*#__PURE__*/(0, _Emotion.css)(process.env.NODE_ENV === "production" ? { name: "hin170", styles: "position:relative;overflow:scroll;height:100%;width:100%;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{width:0;height:0;}" } : { name: "175frfj-inner", styles: "position:relative;overflow:scroll;height:100%;width:100%;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{width:0;height:0;};label:inner;", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });
 
 
 
@@ -36,7 +36,7 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   innerIE11: function innerIE11() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])));
+    return /*#__PURE__*/(0, _Emotion.css)(process.env.NODE_ENV === "production" ? { name: "1wc90ai", styles: "margin-bottom:-1px;padding-bottom:1px;margin-right:-1px;padding-right:1px" } : { name: "6pd8qk-innerIE11", styles: "margin-bottom:-1px;padding-bottom:1px;margin-right:-1px;padding-right:1px;label:innerIE11;", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });
 
 
 
@@ -46,11 +46,11 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   scrollBar: function scrollBar(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      z-index: 200;\n      border-radius: 5px;\n      background: ", ";\n      opacity: 0;\n      transition:\n        opacity 0.3s ease-out,\n        width 0.2s,\n        height 0.2s;\n    "])),
+    return /*#__PURE__*/(0, _Emotion.css)("position:absolute;z-index:200;border-radius:5px;background:",
 
 
 
-    t.scrollContainerScrollBarColor);
+    t.scrollContainerScrollBarColor, ";opacity:0;transition:opacity 0.3s ease-out,width 0.2s,height 0.2s;" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBar;"));
 
 
 
@@ -60,7 +60,7 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   visibleScrollBar: function visibleScrollBar() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      opacity: 1;\n      transition:\n        opacity 0.1s ease-out,\n        width 0.2s,\n        height 0.2s;\n    "])));
+    return /*#__PURE__*/(0, _Emotion.css)(process.env.NODE_ENV === "production" ? { name: "1ugql4b", styles: "opacity:1;transition:opacity 0.1s ease-out,width 0.2s,height 0.2s" } : { name: "xzkb7e-visibleScrollBar", styles: "opacity:1;transition:opacity 0.1s ease-out,width 0.2s,height 0.2s;label:visibleScrollBar;", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });
 
 
 
@@ -70,14 +70,14 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   scrollBarInvert: function scrollBarInvert(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: #ccc;\n      background: ", ";\n    "])),
+    return /*#__PURE__*/(0, _Emotion.css)("background:#ccc;background:",
 
-    t.scrollContainerScrollBarInvertColor);
+    t.scrollContainerScrollBarInvertColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarInvert;"));
 
   },
 
   scrollBarContainerY: function scrollBarContainerY() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      right: 2px;\n      top: 1px;\n      bottom: 1px;\n      width: 0;\n    "])));
+    return /*#__PURE__*/(0, _Emotion.css)(process.env.NODE_ENV === "production" ? { name: "1p5e94x", styles: "position:absolute;right:2px;top:1px;bottom:1px;width:0" } : { name: "1ftyxk-scrollBarContainerY", styles: "position:absolute;right:2px;top:1px;bottom:1px;width:0;label:scrollBarContainerY;", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });
 
 
 
@@ -87,51 +87,51 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   scrollBarY: function scrollBarY(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      right: 0;\n      width: ", ";\n    "])),
+    return /*#__PURE__*/(0, _Emotion.css)("right:0;width:",
 
-    t.scrollContainerScrollBarSize);
+    t.scrollContainerScrollBarSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarY;"));
 
   },
 
   scrollBarYHover: function scrollBarYHover(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n    "])),
-    t.scrollContainerScrollBarHoverSize);
+    return /*#__PURE__*/(0, _Emotion.css)("width:",
+    t.scrollContainerScrollBarHoverSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarYHover;"));
 
   },
 
   scrollBarContainerX: function scrollBarContainerX(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return /*#__PURE__*/(0, _Emotion.css)("position:absolute;right:1px;bottom:1px;left:1px;height:0;.",
 
 
 
 
 
 
-    globalClasses.scrollbarContainerY,
-    t.scrollContainerScrollBarHoverSize,
+    globalClasses.scrollbarContainerY, "~&{margin-right:calc(",
+    t.scrollContainerScrollBarHoverSize, " + 3px)!important;}&~.",
 
 
-    globalClasses.inner,
+    globalClasses.inner, "{&::after{content:' ';width:100%;display:block;height:calc(",
 
 
 
 
-    t.scrollContainerScrollBarHoverSize);
+    t.scrollContainerScrollBarHoverSize, " + 2px);}}" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarContainerX;"));
 
 
 
   },
 
   scrollBarX: function scrollBarX(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: 0;\n      height: ", ";\n    "])),
+    return /*#__PURE__*/(0, _Emotion.css)("bottom:0;height:",
 
-    t.scrollContainerScrollBarSize);
+    t.scrollContainerScrollBarSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarX;"));
 
   },
 
   scrollBarXHover: function scrollBarXHover(t) {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
-    t.scrollContainerScrollBarHoverSize);
+    return /*#__PURE__*/(0, _Emotion.css)("height:",
+    t.scrollContainerScrollBarHoverSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarXHover;"));
 
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","globalClasses","exports","prefix","scrollbarX","scrollbarY","scrollbarContainerX","scrollbarContainerY","inner","styles","memoizeStyle","root","css","_taggedTemplateLiteralLoose2","default","innerIE11","scrollBar","t","scrollContainerScrollBarColor","visibleScrollBar","scrollBarInvert","scrollContainerScrollBarInvertColor","scrollBarContainerY","scrollBarY","scrollContainerScrollBarSize","scrollBarYHover","scrollContainerScrollBarHoverSize","scrollBarContainerX","scrollBarX","scrollBarXHover"],"sources":["ScrollContainer.styles.ts"],"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      height: 100%;\n      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      transition:\n        opacity 0.3s ease-out,\n        width 0.2s,\n        height 0.2s;\n    `;\n  },\n\n  visibleScrollBar() {\n    return css`\n      opacity: 1;\n      transition:\n        opacity 0.1s ease-out,\n        width 0.2s,\n        height 0.2s;\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      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      height: ${t.scrollContainerScrollBarSize};\n    `;\n  },\n\n  scrollBarXHover(t: Theme) {\n    return css`\n      height: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_EMOTION_STRINGIFIED_CSS_ERROR__","globalClasses","exports","prefix","scrollbarX","scrollbarY","scrollbarContainerX","scrollbarContainerY","inner","styles","memoizeStyle","root","css","process","env","NODE_ENV","name","toString","innerIE11","scrollBar","t","scrollContainerScrollBarColor","visibleScrollBar","scrollBarInvert","scrollContainerScrollBarInvertColor","scrollBarContainerY","scrollBarY","scrollContainerScrollBarSize","scrollBarYHover","scrollContainerScrollBarHoverSize","scrollBarContainerX","scrollBarX","scrollBarXHover"],"sources":["ScrollContainer.styles.ts"],"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      height: 100%;\n      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      transition:\n        opacity 0.3s ease-out,\n        width 0.2s,\n        height 0.2s;\n    `;\n  },\n\n  visibleScrollBar() {\n    return css`\n      opacity: 1;\n      transition:\n        opacity 0.1s ease-out,\n        width 0.2s,\n        height 0.2s;\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      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      height: ${t.scrollContainerScrollBarSize};\n    `;\n  },\n\n  scrollBarXHover(t: Theme) {\n    return css`\n      height: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/ScrollContainer/__creevey__/ScrollContainer.creevey.mts

@@ -0,0 +1,247 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('ScrollContainer', () => {
+  story('WithDynamicContent', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('changeContent', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#add' }))
+        .perform();
+      const addContent = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#remove' }))
+        .perform();
+      const removeContent = await context.takeScreenshot();
+      await context.matchImages({ idle, addContent, scroll50, scroll100, removeContent });
+    });
+  });
+
+  story('WithOnlyCustomHorizontalScroll', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('moveScroll', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll0' }))
+        .perform();
+      const scroll0 = await context.takeScreenshot();
+      await context.matchImages({ idle, scroll50, scroll100, scroll0 });
+    });
+
+    test('changeContent', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#add' }))
+        .perform();
+      const addContent = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll0' }))
+        .perform();
+      const scroll0 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#remove' }))
+        .perform();
+      const removeContent = await context.takeScreenshot();
+      await context.matchImages({ addContent, scroll50, scroll100, scroll0, removeContent });
+    });
+  });
+
+  story('WithScrollTo', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('scrollTo', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollTo' }))
+        .perform();
+      const scrollTo = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToTop' }))
+        .perform();
+      const scrollToTop = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToLeft' }))
+        .perform();
+      const scrollToLeft = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToBottom' }))
+        .perform();
+      const scrollToBottom = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToRight' }))
+        .perform();
+      const scrollToRight = await context.takeScreenshot();
+      await context.matchImages({
+        idle,
+        scrollTo,
+        scrollToTop,
+        scrollToBottom,
+        scrollToLeft,
+        scrollToRight,
+      });
+    });
+  });
+
+  story('ScrollBarVisibleAfterTogglingDisabled', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    test('toggleDisabled', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
+        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'toggleDisabled');
+    });
+  });
+
+  story('ShowScrollBarOnScroll', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } } });
+
+    test('hideScroll', async (context) => {
+      const beforeScroll = await context.takeScreenshot();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]');
+        if (scrollContainer) {
+          scrollContainer.scrollTop = 500;
+        }
+      });
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ origin: context.webdriver.findElement({ css: 'body' }) });
+      await delay(200);
+      const duringScroll = await context.takeScreenshot();
+      await delay(3000);
+      const afterScroll = await context.takeScreenshot();
+      await context.matchImages({ beforeScroll, duringScroll, afterScroll });
+    });
+  });
+
+  story('ShowScrollBarOnHover', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'hover works only in firefox': { in: /^(?!\b(firefox2022)\b)/ } } });
+
+    test('hideScroll', async (context) => {
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="ScrollContainer__root"]' }),
+        })
+        .perform();
+      await delay(500);
+      const hovered = await context.takeScreenshot();
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ x: 1000, y: 700 })
+        .perform();
+      await delay(3000);
+      const withoutHover = await context.takeScreenshot();
+      await context.matchImages({ hovered, withoutHover });
+    });
+  });
+  story('NeverShowScrollBar', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } },
+    });
+  });
+  story('OffsetY', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+  story('OffsetX', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+  story('OffsetYAndX', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+});

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

@@ -5,6 +5,7 @@ import { Theme, ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { SizeProp } from '../../lib/types/props';
 import { Item } from './Item';
+export * from './tids';
 export interface ButtonParams extends Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-expanded'> {
     /** Делает компонент недоступным. */
     disabled?: boolean;
@@ -21,11 +22,6 @@ export interface ButtonParams extends Pick<AriaAttributes, 'aria-describedby' |
     /** Задает размер контрола. */
     size: SizeProp;
 }
-export declare const SelectDataTids: {
-    readonly root: "Select__root";
-    readonly menu: "Select__menu";
-    readonly label: "Select__label";
-};
 export declare const SelectIds: {
     readonly menu: "Select__menu";
 };
@@ -193,4 +189,3 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     private buttonRef;
     private getButton;
 }
-export {};

package/cjs/components/Select/Select.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SelectIds = exports.SelectDataTids = exports.Select = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;var _exportNames = { SelectIds: true, Select: true };exports.SelectIds = exports.Select = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _globalObject = require("@skbkontur/global-object");
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
@@ -42,7 +42,10 @@ var _ArrowDownIcon = require("./ArrowDownIcon");
 var _Item = require("./Item");
 var _locale = require("./locale");
 var _Select2 = require("./Select.styles");
-var _selectTheme = require("./selectTheme");var _dec, _class, _Select;
+var _selectTheme = require("./selectTheme");
+var _tids = require("./tids");
+
+Object.keys(_tids).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _tids[key]) return;exports[key] = _tids[key];});var _dec, _class, _Select;
 
 
 
@@ -81,14 +84,8 @@ var PASS_BUTTON_PROPS = {
   onMouseOver: true
 };
 
-var SelectDataTids = exports.SelectDataTids = {
-  root: 'Select__root',
-  menu: 'Select__menu',
-  label: 'Select__label'
-};
-
 var SelectIds = exports.SelectIds = {
-  menu: SelectDataTids.menu
+  menu: _tids.SelectDataTids.menu
 };
 
 
@@ -784,7 +781,7 @@ Select = exports.Select = (_dec = (0, _decorators.locale)('Select', _locale.Sele
         'aria-label': (_props$ariaLabel = buttonElement.props['aria-label']) != null ? _props$ariaLabel : _this.props['aria-label']
       }) :
       buttonElement;
-    };return _this;}(0, _inheritsLoose2.default)(Select, _React$Component);var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.selectMenuOffsetY }, theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.getMenuRenderer = function getMenuRenderer() {if (this.props.disabled) {return null;}if (this.isMobileLayout) {return this.renderMobileMenu();}if (this.state.opened) {return this.renderMenu();}return null;};_proto.renderMain = function renderMain() {var _this$getProps$dataT, _cx;var buttonParams = this.getDefaultButtonParams();var dataTid = (_this$getProps$dataT = this.getProps()['data-tid']) != null ? _this$getProps$dataT : SelectDataTids.root;var button = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(this.theme, this.props) }, this.getButton(buttonParams));var isMobile = this.isMobileLayout;var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var root = /*#__PURE__*/_react.default.createElement("span", { "data-tid": dataTid, className: (0, _Emotion.cx)((_cx = {}, _cx[_Select2.styles.root()] = true, _cx[_Select2.styles.rootMobile(this.theme)] = isMobile, _cx)), style: style }, button, this.getMenuRenderer());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: isMobile ? false : this.state.opened }, root));};_proto.renderLabel = function renderLabel() {var _this$locale;var value = this.getValue();var item = this.getItemByValue(value);if ((0, _utils.isNonNullable)(value)) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.createElement("span", null, this.props.placeholder || ((_this$locale = this.locale) == null ? void 0 : _this$locale.placeholder)), isPlaceholder: true };};_proto.getLeftIconClass = function getLeftIconClass(size) {if (this.getProps().use === 'link') {return _Select2.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select2.styles.leftIconLarge(this.theme);case 'medium':return _Select2.styles.leftIconMedium(this.theme);case 'small':default:return _Select2.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx2, _cx3, _cx4;var buttonProps = (0, _extends2.default)({}, (0, _filterProps.filterProps)(this.props, PASS_BUTTON_PROPS), { align: 'left', disabled: this.props.disabled, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened, size: params.size });var use = this.getProps().use;var labelProps = { 'data-tid': SelectDataTids.label, className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Select2.styles.label()] = use !== 'link', _cx2[_Select2.styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[_Select2.styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[_Select2.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = use !== 'default';var icon = /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, { size: this.props.size });return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.selectButtonContainer(), (_cx3 = {}, _cx3[_Link.styles.root(this.theme)] = use === 'link', _cx3)) }, this.props._icon && /*#__PURE__*/_react.default.createElement("div", { className: this.getLeftIconClass(this.props.size) }, this.props._icon), /*#__PURE__*/_react.default.createElement("span", labelProps, params.label), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[_Select2.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[_Select2.styles.customUseArrow()] = useIsCustom, _cx4)) }, icon)));};_proto.getSelectIconGap = function getSelectIconGap() {var _this3 = this;var getArrowPadding = function getArrowPadding() {switch (_this3.props.size) {case 'large':return _this3.theme.selectIconGapLarge;case 'medium':return _this3.theme.selectIconGapMedium;case 'small':default:return _this3.theme.selectIconGapSmall;}};var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;return arrowLeftPadding;};_proto.renderMenu = function renderMenu() {var search = this.props.search ? this.getSearch() : null;var value = this.getValue();var _this$getProps = this.getProps(),menuWidth = _this$getProps.menuWidth,menuPos = _this$getProps.menuPos,menuAlign = _this$getProps.menuAlign;return /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: true, hasShadow: true, id: this.menuId, "data-tid": SelectDataTids.menu, positions: (0, _getMenuPositions.getMenuPositions)(menuPos, menuAlign), anchorElement: this.popupGetParent(), priority: _ZIndex.ZIndex.priorities.PopupMenu, disablePortal: this.props.disablePortal, margin: parseInt(this.theme.menuOffsetY) - 1, width: menuWidth, minWidth: menuWidth === undefined ? '100%' : undefined, popupOffset: this.props.menuOffset }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { hasMargin: false, ref: this.refMenu, onItemClick: this.close, maxHeight: this.props.maxMenuHeight, align: menuAlign }, search, this.getMenuItems(value)));};_proto.renderMobileMenu = function renderMobileMenu() {var search = this.props.search ? this.getMobileSearch() : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { headerChildComponent: search, caption: this.props.mobileMenuHeaderText, onCloseRequest: this.close, opened: this.state.opened }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { onItemClick: this.close, disableScrollContainer: true, maxHeight: 'auto' }, this.getMenuItems(value)));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (!this.areValuesEqual(this.getValue(), value)) {var _this$props$onValueCh, _this$props;(_this$props$onValueCh = (_this$props = this.props).onValueChange) == null || _this$props$onValueCh.call(_this$props, value);}};_proto.getValue = function getValue() {if (this.props.value !== undefined) {return this.props.value;}return this.state.value;};_proto.mapItems = function mapItems(fn) {var items = this.props.items;if (!items) {return [];}var pattern = this.state.searchPattern && this.state.searchPattern.toLowerCase();var result = [];var index = 0;for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(items), _step; !(_step = _iterator()).done;) {var entry = _step.value;var _normalizeEntry = normalizeEntry(entry),value = _normalizeEntry[0],item = _normalizeEntry[1],comment = _normalizeEntry[2];if (!pattern || this.getProps().filterItem(value, item, pattern)) {result.push(fn(value, item, index, comment));++index;}}return result;};_proto.getItemByValue = function getItemByValue(value) {if (value === null || value === undefined) {return null;}var items = this.props.items || [];for (var _iterator2 = (0, _createForOfIteratorHelperLoose2.default)(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],item = _normalizeEntry2[1];if (this.areValuesEqual(itemValue, value)) {return item;}}return null;};_proto.areValuesEqual = function areValuesEqual(value1, value2) {return (0, _utils.isNonNullable)(value1) && (0, _utils.isNonNullable)(value2) && this.getProps().areValuesEqual(value1, value2);};return Select;}(_react.default.Component), _Select.__KONTUR_REACT_UI__ = 'Select', _Select.displayName = 'Select', _Select.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default', size: 'small' }, _Select.Item = _Item.Item, _Select.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _Select.staticElement = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.staticElement(element) expects element to be a valid react element.');return element;}, _Select)) || _class) || _class) || _class);
+    };return _this;}(0, _inheritsLoose2.default)(Select, _React$Component);var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.selectMenuOffsetY }, theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.getMenuRenderer = function getMenuRenderer() {if (this.props.disabled) {return null;}if (this.isMobileLayout) {return this.renderMobileMenu();}if (this.state.opened) {return this.renderMenu();}return null;};_proto.renderMain = function renderMain() {var _this$getProps$dataT, _cx;var buttonParams = this.getDefaultButtonParams();var dataTid = (_this$getProps$dataT = this.getProps()['data-tid']) != null ? _this$getProps$dataT : _tids.SelectDataTids.root;var button = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(this.theme, this.props) }, this.getButton(buttonParams));var isMobile = this.isMobileLayout;var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var root = /*#__PURE__*/_react.default.createElement("span", { "data-tid": dataTid, className: (0, _Emotion.cx)((_cx = {}, _cx[_Select2.styles.root()] = true, _cx[_Select2.styles.rootMobile(this.theme)] = isMobile, _cx)), style: style }, button, this.getMenuRenderer());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: isMobile ? false : this.state.opened }, root));};_proto.renderLabel = function renderLabel() {var _this$locale;var value = this.getValue();var item = this.getItemByValue(value);if ((0, _utils.isNonNullable)(value)) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.createElement("span", null, this.props.placeholder || ((_this$locale = this.locale) == null ? void 0 : _this$locale.placeholder)), isPlaceholder: true };};_proto.getLeftIconClass = function getLeftIconClass(size) {if (this.getProps().use === 'link') {return _Select2.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select2.styles.leftIconLarge(this.theme);case 'medium':return _Select2.styles.leftIconMedium(this.theme);case 'small':default:return _Select2.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx2, _cx3, _cx4;var buttonProps = (0, _extends2.default)({}, (0, _filterProps.filterProps)(this.props, PASS_BUTTON_PROPS), { align: 'left', disabled: this.props.disabled, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened, size: params.size });var use = this.getProps().use;var labelProps = { 'data-tid': _tids.SelectDataTids.label, className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Select2.styles.label()] = use !== 'link', _cx2[_Select2.styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[_Select2.styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[_Select2.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = use !== 'default';var icon = /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, { size: this.props.size });return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.selectButtonContainer(), (_cx3 = {}, _cx3[_Link.styles.root(this.theme)] = use === 'link', _cx3)) }, this.props._icon && /*#__PURE__*/_react.default.createElement("div", { className: this.getLeftIconClass(this.props.size) }, this.props._icon), /*#__PURE__*/_react.default.createElement("span", labelProps, params.label), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[_Select2.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[_Select2.styles.customUseArrow()] = useIsCustom, _cx4)) }, icon)));};_proto.getSelectIconGap = function getSelectIconGap() {var _this3 = this;var getArrowPadding = function getArrowPadding() {switch (_this3.props.size) {case 'large':return _this3.theme.selectIconGapLarge;case 'medium':return _this3.theme.selectIconGapMedium;case 'small':default:return _this3.theme.selectIconGapSmall;}};var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;return arrowLeftPadding;};_proto.renderMenu = function renderMenu() {var search = this.props.search ? this.getSearch() : null;var value = this.getValue();var _this$getProps = this.getProps(),menuWidth = _this$getProps.menuWidth,menuPos = _this$getProps.menuPos,menuAlign = _this$getProps.menuAlign;return /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: true, hasShadow: true, id: this.menuId, "data-tid": _tids.SelectDataTids.menu, positions: (0, _getMenuPositions.getMenuPositions)(menuPos, menuAlign), anchorElement: this.popupGetParent(), priority: _ZIndex.ZIndex.priorities.PopupMenu, disablePortal: this.props.disablePortal, margin: parseInt(this.theme.menuOffsetY) - 1, width: menuWidth, minWidth: menuWidth === undefined ? '100%' : undefined, popupOffset: this.props.menuOffset }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { hasMargin: false, ref: this.refMenu, onItemClick: this.close, maxHeight: this.props.maxMenuHeight, align: menuAlign }, search, this.getMenuItems(value)));};_proto.renderMobileMenu = function renderMobileMenu() {var search = this.props.search ? this.getMobileSearch() : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { headerChildComponent: search, caption: this.props.mobileMenuHeaderText, onCloseRequest: this.close, opened: this.state.opened }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { onItemClick: this.close, disableScrollContainer: true, maxHeight: 'auto' }, this.getMenuItems(value)));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (!this.areValuesEqual(this.getValue(), value)) {var _this$props$onValueCh, _this$props;(_this$props$onValueCh = (_this$props = this.props).onValueChange) == null || _this$props$onValueCh.call(_this$props, value);}};_proto.getValue = function getValue() {if (this.props.value !== undefined) {return this.props.value;}return this.state.value;};_proto.mapItems = function mapItems(fn) {var items = this.props.items;if (!items) {return [];}var pattern = this.state.searchPattern && this.state.searchPattern.toLowerCase();var result = [];var index = 0;for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(items), _step; !(_step = _iterator()).done;) {var entry = _step.value;var _normalizeEntry = normalizeEntry(entry),value = _normalizeEntry[0],item = _normalizeEntry[1],comment = _normalizeEntry[2];if (!pattern || this.getProps().filterItem(value, item, pattern)) {result.push(fn(value, item, index, comment));++index;}}return result;};_proto.getItemByValue = function getItemByValue(value) {if (value === null || value === undefined) {return null;}var items = this.props.items || [];for (var _iterator2 = (0, _createForOfIteratorHelperLoose2.default)(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],item = _normalizeEntry2[1];if (this.areValuesEqual(itemValue, value)) {return item;}}return null;};_proto.areValuesEqual = function areValuesEqual(value1, value2) {return (0, _utils.isNonNullable)(value1) && (0, _utils.isNonNullable)(value2) && this.getProps().areValuesEqual(value1, value2);};return Select;}(_react.default.Component), _Select.__KONTUR_REACT_UI__ = 'Select', _Select.displayName = 'Select', _Select.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default', size: 'small' }, _Select.Item = _Item.Item, _Select.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _Select.staticElement = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.staticElement(element) expects element to be a valid react element.');return element;}, _Select)) || _class) || _class) || _class);
 
 
 function renderValue(value, item) {