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

package/components/RadioGroup/RadioGroup.styles/RadioGroup.styles.js

@@ -1,17 +1,46 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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).";
+}
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      user-select: none;\n      cursor: default;\n      line-height: normal;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "8lctsa",
+      styles: "display:inline-block;user-select:none;cursor:default;line-height:normal"
+    } : {
+      name: "107s48y-root",
+      styles: "display:inline-block;user-select:none;cursor:default;line-height:normal;label:root;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   item: function item() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: table;\n      margin-top: 0;\n      width: 100%;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "jy6qe6",
+      styles: "display:table;margin-top:0;width:100%"
+    } : {
+      name: "1ctlcx8-item",
+      styles: "display:table;margin-top:0;width:100%;label:item;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   itemFirst: function itemFirst() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-top: 0;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "1i9vogi",
+      styles: "margin-top:0"
+    } : {
+      name: "hxrgfy-itemFirst",
+      styles: "margin-top:0;label:itemFirst;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   itemInline: function itemInline() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: inline-table;\n      margin-right: 15px;\n      margin-top: 0;\n      width: auto;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "1qr912k",
+      styles: "display:inline-table;margin-right:15px;margin-top:0;width:auto"
+    } : {
+      name: "1j4qq9j-itemInline",
+      styles: "display:inline-table;margin-right:15px;margin-top:0;width:auto;label:itemInline;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   }
 });

package/components/RadioGroup/RadioGroup.styles/RadioGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","item","_templateObject2","itemFirst","_templateObject3","itemInline","_templateObject4"],"sources":["RadioGroup.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      user-select: none;\n      cursor: default;\n      line-height: normal;\n    `;\n  },\n\n  item() {\n    return css`\n      display: table;\n      margin-top: 0;\n      width: 100%;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-top: 0;\n    `;\n  },\n\n  itemInline() {\n    return css`\n      display: inline-table;\n      margin-right: 15px;\n      margin-top: 0;\n      width: auto;\n    `;\n  },\n});\n"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;EAMZ,CAAC;;EAEDC,IAAI,WAAAA,KAAA,EAAG;IACL,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;EAKZ,CAAC;;EAEDG,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;EAGZ,CAAC;;EAEDK,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","process","env","NODE_ENV","name","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","item","itemFirst","itemInline"],"sources":["RadioGroup.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      user-select: none;\n      cursor: default;\n      line-height: normal;\n    `;\n  },\n\n  item() {\n    return css`\n      display: table;\n      margin-top: 0;\n      width: 100%;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-top: 0;\n    `;\n  },\n\n  itemInline() {\n    return css`\n      display: inline-table;\n      margin-right: 15px;\n      margin-top: 0;\n      width: auto;\n    `;\n  },\n});\n"],"mappings":"uRAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,oBAAOH,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,YAAAL,MAAA,kFAAAK,IAAA,kBAAAL,MAAA,yFAAAM,QAAA,EAAAC,gCAAA;;;;;;EAMZ,CAAC;;EAEDC,IAAI,WAAAA,KAAA,EAAG;IACL,oBAAOV,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,YAAAL,MAAA,gDAAAK,IAAA,kBAAAL,MAAA,uDAAAM,QAAA,EAAAC,gCAAA;;;;;EAKZ,CAAC;;EAEDE,SAAS,WAAAA,UAAA,EAAG;IACV,oBAAOX,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,aAAAL,MAAA,uBAAAK,IAAA,sBAAAL,MAAA,mCAAAM,QAAA,EAAAC,gCAAA;;;EAGZ,CAAC;;EAEDG,UAAU,WAAAA,WAAA,EAAG;IACX,oBAAOZ,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,aAAAL,MAAA,yEAAAK,IAAA,wBAAAL,MAAA,sFAAAM,QAAA,EAAAC,gCAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/RadioGroup/__creevey__/RadioGroup.creevey.mts

@@ -0,0 +1,86 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('RadioGroup', () => {
+  story('Vertical', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '#RadioGroup-wrap',
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('hovered', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hovered');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('mouseLeave', async (context) => {
+      // NOTE Firefox bug if click send right after click from previous test it results as double click
+      await delay(500);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'mouseLeave');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('arrow_down', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .sendKeys(Key.TAB)
+        .pause(100)
+        .sendKeys(Key.DOWN)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'arrow_down');
+    });
+  });
+});

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

@@ -1,5 +1,6 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+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).";
+}
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 export var globalClasses = prefix('scroll-container')({
   scrollbarX: 'scrollbar-x',
@@ -10,39 +11,74 @@ export var globalClasses = prefix('scroll-container')({
 });
 export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n    "])));
+    return /*#__PURE__*/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__
+    });
   },
   inner: function inner() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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__*/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__
+    });
   },
   innerIE11: function innerIE11() {
-    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    "])));
+    return /*#__PURE__*/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__
+    });
   },
   scrollBar: function scrollBar(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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    "])), t.scrollContainerScrollBarColor);
+    return /*#__PURE__*/css("position:absolute;z-index:200;border-radius:5px;background:", t.scrollContainerScrollBarColor, ";opacity:0;transition:opacity 0.3s ease-out,width 0.2s,height 0.2s;" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBar;"));
   },
   visibleScrollBar: function visibleScrollBar() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n      transition:\n        opacity 0.1s ease-out,\n        width 0.2s,\n        height 0.2s;\n    "])));
+    return /*#__PURE__*/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__
+    });
   },
   scrollBarInvert: function scrollBarInvert(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: #ccc;\n      background: ", ";\n    "])), t.scrollContainerScrollBarInvertColor);
+    return /*#__PURE__*/css("background:#ccc;background:", t.scrollContainerScrollBarInvertColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarInvert;"));
   },
   scrollBarContainerY: function scrollBarContainerY() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: 2px;\n      top: 1px;\n      bottom: 1px;\n      width: 0;\n    "])));
+    return /*#__PURE__*/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__
+    });
   },
   scrollBarY: function scrollBarY(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      width: ", ";\n    "])), t.scrollContainerScrollBarSize);
+    return /*#__PURE__*/css("right:0;width:", t.scrollContainerScrollBarSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarY;"));
   },
   scrollBarYHover: function scrollBarYHover(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+    return /*#__PURE__*/css("width:", t.scrollContainerScrollBarHoverSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarYHover;"));
   },
   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);
+    return /*#__PURE__*/css("position:absolute;right:1px;bottom:1px;left:1px;height:0;.", globalClasses.scrollbarContainerY, "~&{margin-right:calc(", t.scrollContainerScrollBarHoverSize, " + 3px)!important;}&~.", globalClasses.inner, "{&::after{content:' ';width:100%;display:block;height:calc(", t.scrollContainerScrollBarHoverSize, " + 2px);}}" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarContainerX;"));
   },
   scrollBarX: function scrollBarX(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      height: ", ";\n    "])), t.scrollContainerScrollBarSize);
+    return /*#__PURE__*/css("bottom:0;height:", t.scrollContainerScrollBarSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarX;"));
   },
   scrollBarXHover: function scrollBarXHover(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+    return /*#__PURE__*/css("height:", t.scrollContainerScrollBarHoverSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollBarXHover;"));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","prefix","globalClasses","scrollbarX","scrollbarY","scrollbarContainerX","scrollbarContainerY","inner","styles","root","_templateObject","_taggedTemplateLiteralLoose","_templateObject2","innerIE11","_templateObject3","scrollBar","t","_templateObject4","scrollContainerScrollBarColor","visibleScrollBar","_templateObject5","scrollBarInvert","_templateObject6","scrollContainerScrollBarInvertColor","scrollBarContainerY","_templateObject7","scrollBarY","_templateObject8","scrollContainerScrollBarSize","scrollBarYHover","_templateObject9","scrollContainerScrollBarHoverSize","scrollBarContainerX","_templateObject10","scrollBarX","_templateObject11","scrollBarXHover","_templateObject12"],"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":"6TAAA,SAASA,GAAG,EAAEC,YAAY,EAAEC,MAAM,QAAQ,2BAA2B;;;AAGrE,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,kBAAkB,CAAC,CAAC;EACtDE,UAAU,EAAE,aAAa;EACzBC,UAAU,EAAE,aAAa;EACzBC,mBAAmB,EAAE,uBAAuB;EAC5CC,mBAAmB,EAAE,uBAAuB;EAC5CC,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF,OAAO,IAAMC,MAAM,GAAGR,YAAY,CAAC;EACjCS,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOV,GAAG,CAAAW,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;EAKZ,CAAC;;EAEDJ,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOR,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAD,2BAAA;;;;;;;;;;;;;;EAcZ,CAAC;;EAEDE,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOd,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;;;;;;;EAOZ,CAAC;;EAEDI,SAAS,WAAAA,UAACC,CAAQ,EAAE;IAClB,OAAOjB,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;IAIMK,CAAC,CAACE,6BAA6B;;;;;;;EAOjD,CAAC;;EAEDC,gBAAgB,WAAAA,iBAAA,EAAG;IACjB,OAAOpB,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;;;;;;;EAOZ,CAAC;;EAEDU,eAAe,WAAAA,gBAACL,CAAQ,EAAE;IACxB,OAAOjB,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;;IAEMK,CAAC,CAACO,mCAAmC;;EAEvD,CAAC;;EAEDC,mBAAmB,WAAAA,oBAAA,EAAG;IACpB,OAAOzB,GAAG,CAAA0B,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;;;;;;;EAOZ,CAAC;;EAEDe,UAAU,WAAAA,WAACV,CAAQ,EAAE;IACnB,OAAOjB,GAAG,CAAA4B,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;;IAECK,CAAC,CAACY,4BAA4B;;EAE3C,CAAC;;EAEDC,eAAe,WAAAA,gBAACb,CAAQ,EAAE;IACxB,OAAOjB,GAAG,CAAA+B,gBAAA,KAAAA,gBAAA,GAAAnB,2BAAA;IACCK,CAAC,CAACe,iCAAiC;;EAEhD,CAAC;;EAEDC,mBAAmB,WAAAA,oBAAChB,CAAQ,EAAE;IAC5B,OAAOjB,GAAG,CAAAkC,iBAAA,KAAAA,iBAAA,GAAAtB,2BAAA;;;;;;;IAOLT,aAAa,CAACI,mBAAmB;IACbU,CAAC,CAACe,iCAAiC;;;IAGnD7B,aAAa,CAACK,KAAK;;;;;IAKPS,CAAC,CAACe,iCAAiC;;;;EAI1D,CAAC;;EAEDG,UAAU,WAAAA,WAAClB,CAAQ,EAAE;IACnB,OAAOjB,GAAG,CAAAoC,iBAAA,KAAAA,iBAAA,GAAAxB,2BAAA;;IAEEK,CAAC,CAACY,4BAA4B;;EAE5C,CAAC;;EAEDQ,eAAe,WAAAA,gBAACpB,CAAQ,EAAE;IACxB,OAAOjB,GAAG,CAAAsC,iBAAA,KAAAA,iBAAA,GAAA1B,2BAAA;IACEK,CAAC,CAACe,iCAAiC;;EAEjD;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","prefix","globalClasses","scrollbarX","scrollbarY","scrollbarContainerX","scrollbarContainerY","inner","styles","root","process","env","NODE_ENV","name","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","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/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/components/Select/Select/Select.js

@@ -34,6 +34,8 @@ import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
 import { styles } from "../Select.styles";
 import { getSelectTheme } from "../selectTheme";
+import { SelectDataTids } from "../tids";
+export * from "../tids";
 var PASS_BUTTON_PROPS = {
   id: true,
   disabled: true,
@@ -45,11 +47,6 @@ var PASS_BUTTON_PROPS = {
   onMouseLeave: true,
   onMouseOver: true
 };
-export var SelectDataTids = {
-  root: 'Select__root',
-  menu: 'Select__menu',
-  label: 'Select__label'
-};
 export var SelectIds = {
   menu: SelectDataTids.menu
 };