@skbkontur/react-ui 0.0.0-30619a873c → 0.0.0-32550fb571

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

@@ -0,0 +1,251 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+const buttonTests = () => {
+  test('idle', async (context) => {
+    await context.matchImage(await context.takeScreenshot(), 'idle');
+  });
+
+  test('hover', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+      })
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'hover');
+  });
+
+  test('pressed', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+      })
+      .press()
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'pressed');
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .release()
+      .perform();
+  });
+
+  test('clicked', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="test-button"]' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'clicked');
+  });
+
+  test('tabPress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.TAB)
+      .pause(500)
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'tabPress');
+  });
+};
+
+kind('Button', () => {
+  story('PlaygroundDefault', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hover', 'pressed', 'clicked'],
+        },
+        'focus goes out of page and breaks other tests': { in: /firefox/, tests: 'tabPress' },
+      },
+    });
+
+    buttonTests();
+  });
+
+  story('PlaygroundDisabled', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'focus goes out of page and breaks other tests': {
+          in: /firefox/,
+          tests: 'tabPress',
+        },
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hover', 'pressed', 'clicked'],
+        },
+      },
+    });
+
+    buttonTests();
+  });
+
+  story('ButtonAsLinkIconColor', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'focus goes out of page and breaks other tests': {
+          tests: ['pressed', 'clicked', 'tabPress'],
+        },
+        'hover does not work in chrome': {
+          in: /^(?!\b(firefox.*)\b)/,
+          tests: ['hover'],
+        },
+      },
+    });
+
+    buttonTests();
+  });
+
+  story('BtnTextBgHoverActive', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome & only 22 dark theme needed': {
+          in: /^(?!\bfirefox2022Dark?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+
+    test('pressed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+        })
+        .press()
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'pressed');
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .release()
+        .perform();
+    });
+  });
+
+  story('IconAndTextHoverColor', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: /^(?!\bfirefox(2022)?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-button"]',
+          }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+  });
+
+  story('HoverTextColor', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: /^(?!\bfirefox(2022)?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-button"]',
+          }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+  });
+  story('ArrowDisabled', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: true,
+    });
+  });
+  story('UnusedPropValues', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'chrome default and 2022': { in: /^(?!\bchrome(2022)?\b)/ } },
+    });
+  });
+
+  story('BtnBacklessBgHoverActive', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome & only 22 dark theme needed': {
+          in: /^(?!\bfirefox2022Dark?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-button"]',
+          }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+
+    test('pressed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+        })
+        .press()
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'pressed');
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .release()
+        .perform();
+    });
+  });
+});

package/cjs/components/Calendar/DayCellView.styles.js

@@ -10,7 +10,7 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
 
   },
   day: function day(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border: 1px solid transparent;\n      font-size: ", ";\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ", ";\n      border-radius: ", ";\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:hover:enabled {\n        color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border: 1px solid transparent;\n      font-size: ", ";\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ", ";\n      border-radius: ", ";\n\n      &:hover {\n        background-color: ", ";\n        color: ", ";\n        cursor: pointer;\n      }\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:hover:enabled {\n        color: ", ";\n      }\n    "])),
     (0, _Mixins.resetButton)(),
 
 
@@ -26,20 +26,6 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
     t.calendarCellBorderRadius,
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
     t.calendarCellHoverBgColor,
     t.calendarCellHoverColor,
 
@@ -49,8 +35,6 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
 
 
 
-
-
     t.calendarCellActiveHoverColor);
 
 

package/cjs/components/Calendar/DayCellView.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_Mixins","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","cell","t","css","_taggedTemplateLiteralLoose2","default","calendarCellWidth","calendarCellHeight","day","resetButton","calendarCellBg","calendarCellFontSize","calendarCellLineHeight","calendarCellBorderRadius","calendarCellHoverBgColor","calendarCellHoverColor","calendarCellActiveHoverColor","selected","calendarCellSelectedBgColor","calendarCellSelectedFontColor","weekend","calendarCellWeekendColor","todayCaption","calendarCellTodayBorder"],"sources":["DayCellView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  cell(t: Theme) {\n    return css`\n      flex: 1 1 ${t.calendarCellWidth};\n      height: ${t.calendarCellHeight};\n    `;\n  },\n  day(t: Theme) {\n    return css`\n      ${resetButton()};\n      width: 100%;\n      height: 100%;\n\n      background: ${t.calendarCellBg};\n      border: 1px solid transparent;\n      font-size: ${t.calendarCellFontSize};\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ${t.calendarCellLineHeight};\n      border-radius: ${t.calendarCellBorderRadius};\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${t.calendarCellHoverBgColor};\n          color: ${t.calendarCellHoverColor};\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:hover:enabled {\n        color: ${t.calendarCellActiveHoverColor};\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    return css`\n      background-color: ${t.calendarCellSelectedBgColor};\n      color: ${t.calendarCellSelectedFontColor};\n    `;\n  },\n\n  weekend(t: Theme) {\n    return css`\n      color: ${t.calendarCellWeekendColor};\n    `;\n  },\n\n  todayCaption(t: Theme) {\n    return css`\n      padding-bottom: 2px;\n      border-bottom: ${t.calendarCellTodayBorder};\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,4BAAsD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAE/C,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;IACIH,CAAC,CAACI,iBAAiB;IACrBJ,CAAC,CAACK,kBAAkB;;EAElC,CAAC;EACDC,GAAG,WAAAA,IAACN,CAAQ,EAAE;IACZ,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACN,IAAAI,mBAAW,EAAC,CAAC;;;;IAIDP,CAAC,CAACQ,cAAc;;IAEjBR,CAAC,CAACS,oBAAoB;;;;;IAKpBT,CAAC,CAACU,sBAAsB;IACtBV,CAAC,CAACW,wBAAwB;;;;;;;;;;;;;;;;;IAiBnBX,CAAC,CAACY,wBAAwB;IACrCZ,CAAC,CAACa,sBAAsB;;;;;;;;;;IAU1Bb,CAAC,CAACc,4BAA4B;;;EAG7C,CAAC;;EAEDC,QAAQ,WAAAA,SAACf,CAAQ,EAAE;IACjB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACYH,CAAC,CAACgB,2BAA2B;IACxChB,CAAC,CAACiB,6BAA6B;;EAE5C,CAAC;;EAEDC,OAAO,WAAAA,QAAClB,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACmB,wBAAwB;;EAEvC,CAAC;;EAEDC,YAAY,WAAAA,aAACpB,CAAQ,EAAE;IACrB,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;IAESH,CAAC,CAACqB,uBAAuB;;EAE9C;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_Mixins","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","cell","t","css","_taggedTemplateLiteralLoose2","default","calendarCellWidth","calendarCellHeight","day","resetButton","calendarCellBg","calendarCellFontSize","calendarCellLineHeight","calendarCellBorderRadius","calendarCellHoverBgColor","calendarCellHoverColor","calendarCellActiveHoverColor","selected","calendarCellSelectedBgColor","calendarCellSelectedFontColor","weekend","calendarCellWeekendColor","todayCaption","calendarCellTodayBorder"],"sources":["DayCellView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  cell(t: Theme) {\n    return css`\n      flex: 1 1 ${t.calendarCellWidth};\n      height: ${t.calendarCellHeight};\n    `;\n  },\n  day(t: Theme) {\n    return css`\n      ${resetButton()};\n      width: 100%;\n      height: 100%;\n\n      background: ${t.calendarCellBg};\n      border: 1px solid transparent;\n      font-size: ${t.calendarCellFontSize};\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ${t.calendarCellLineHeight};\n      border-radius: ${t.calendarCellBorderRadius};\n\n      &:hover {\n        background-color: ${t.calendarCellHoverBgColor};\n        color: ${t.calendarCellHoverColor};\n        cursor: pointer;\n      }\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:hover:enabled {\n        color: ${t.calendarCellActiveHoverColor};\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    return css`\n      background-color: ${t.calendarCellSelectedBgColor};\n      color: ${t.calendarCellSelectedFontColor};\n    `;\n  },\n\n  weekend(t: Theme) {\n    return css`\n      color: ${t.calendarCellWeekendColor};\n    `;\n  },\n\n  todayCaption(t: Theme) {\n    return css`\n      padding-bottom: 2px;\n      border-bottom: ${t.calendarCellTodayBorder};\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,4BAAsD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAE/C,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;IACIH,CAAC,CAACI,iBAAiB;IACrBJ,CAAC,CAACK,kBAAkB;;EAElC,CAAC;EACDC,GAAG,WAAAA,IAACN,CAAQ,EAAE;IACZ,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACN,IAAAI,mBAAW,EAAC,CAAC;;;;IAIDP,CAAC,CAACQ,cAAc;;IAEjBR,CAAC,CAACS,oBAAoB;;;;;IAKpBT,CAAC,CAACU,sBAAsB;IACtBV,CAAC,CAACW,wBAAwB;;;IAGrBX,CAAC,CAACY,wBAAwB;IACrCZ,CAAC,CAACa,sBAAsB;;;;;;;;IAQxBb,CAAC,CAACc,4BAA4B;;;EAG7C,CAAC;;EAEDC,QAAQ,WAAAA,SAACf,CAAQ,EAAE;IACjB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACYH,CAAC,CAACgB,2BAA2B;IACxChB,CAAC,CAACiB,6BAA6B;;EAE5C,CAAC;;EAEDC,OAAO,WAAAA,QAAClB,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACmB,wBAAwB;;EAEvC,CAAC;;EAEDC,YAAY,WAAAA,aAACpB,CAAQ,EAAE;IACrB,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;IAESH,CAAC,CAACqB,uBAAuB;;EAE9C;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,74 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Calendar', () => {
+  story('CalendarWithMinMaxDate', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('DateSelect months', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Calendar"]' }))
+        .pause(1000)
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect months');
+    });
+
+    test('DateSelect years', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Calendar"]' }))
+        .pause(1000)
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect years');
+    });
+  });
+
+  story('ScrollsCalendarOnDateChange', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('initial date', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'initial date');
+    });
+
+    test('scrolls to new date on date change', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="change-date-button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'scrolls to new date on date change');
+    });
+  });
+
+  story('CalendarWithBottomSeparator', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        "themes don't affect the bottom separator": {
+          in: /^(?!\b(chrome2022|chrome2022Dark|firefox2022|firefox2022Dark)\b)/,
+        },
+      },
+    });
+  });
+});

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

@@ -0,0 +1,243 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const checkboxTests = () => {
+  test('idle', async (context) => {
+    await context.matchImage(await context.takeScreenshot(), 'idle');
+  });
+
+  test('hovered', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({
+          css: '[data-tid~="test-checkbox"]',
+        }),
+      })
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'hovered');
+  });
+
+  test('pressed', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({
+          css: '[data-tid~="test-checkbox"]',
+        }),
+      })
+      .press()
+      .pause(1000)
+      .release()
+      .perform();
+  });
+
+  test('clicked', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="test-checkbox"]' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'clicked');
+  });
+
+  test('tabPress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="test-checkbox"]' }))
+      .perform();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({ origin: context.webdriver.findElement({ css: 'body' }) })
+      .press()
+      .release()
+      .sendKeys(Key.TAB)
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'tabPress');
+  });
+
+  test('spacePress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="test-checkbox"]' }))
+      .perform();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({ origin: context.webdriver.findElement({ css: 'body' }) })
+      .press()
+      .release()
+      .sendKeys(Key.TAB)
+      .pause(1000)
+      .sendKeys(Key.SPACE)
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'spacePress');
+  });
+};
+
+kind('Checkbox', () => {
+  story('Plain', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered', 'pressed', 'clicked'],
+        },
+        flaky: {
+          in: /^\bfirefox2022/,
+          tests: ['clicked'],
+        },
+      },
+    });
+
+    checkboxTests();
+  });
+
+  story('Checked', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('hovered', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-checkbox"]',
+          }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hovered');
+    });
+
+    test('pressed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-checkbox"]',
+          }),
+        })
+        .press()
+        .pause(1000)
+        .release()
+        .perform();
+    });
+  });
+
+  story('Indeterminate', () => {
+    test('plain', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '#screenshot-capture',
+      });
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'plain');
+    });
+
+    test('hovered', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '#screenshot-capture',
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: 'label' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'hovered');
+    });
+
+    test('tabPress', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '#screenshot-capture',
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'tabPress');
+    });
+
+    test('clicked', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '#screenshot-capture',
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('Highlighted', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: {
+          in: ['firefox2022', 'firefox2022Dark'],
+          tests: ['tabPress'],
+        },
+      },
+    });
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+  });
+
+  story('CheckboxLabelSelectionWithPressedShift', () => {
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('selected with pressed shift', async (context) => {
+      const checkbox = await context.webdriver.findElement({
+        css: '[data-comp-name~="Checkbox"]',
+      });
+      await context.webdriver.actions({ bridge: true }).keyDown(Key.SHIFT).click(checkbox).perform();
+      await context.matchImage(await context.takeScreenshot(), 'selected with pressed shift');
+      await context.webdriver.actions({ bridge: true }).keyUp(Key.SHIFT).perform();
+    });
+  });
+});

package/cjs/components/ComboBox/ComboBox.d.ts

@@ -1,10 +1,17 @@
 import React, { AriaAttributes, HTMLAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
 import { MenuItemState } from '../MenuItem';
-import { InputIconType } from '../Input';
+import { InputIconType, ShowClearIcon } from '../Input';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { SizeProp } from '../../lib/types/props';
 export interface ComboBoxProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, CommonProps {
+    /** Показывать иконку очистки значения в непустом поле:
+     * - `always` — всегда показывать иконку
+     * - `auto` — показывать иконку при hover/focus
+     * - `never` — не показывать иконку
+     * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.
+     * @default never */
+    showClearIcon?: ShowClearIcon;
     /** Задает выравнивание контента. */
     align?: 'left' | 'center' | 'right';
     /** Вызывает функцию поиска getItems при фокусе и очистке поля ввода. */
@@ -118,7 +125,7 @@ export interface ComboBoxItem {
     label: string;
 }
 export type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;
-type DefaultProps<T> = Required<Pick<ComboBoxProps<T>, 'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow'>>;
+type DefaultProps<T> = Required<Pick<ComboBoxProps<T>, 'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow' | 'showClearIcon'>>;
 /**
  * `ComboBox` — это поле ввода со списком подсказок.
  *
@@ -139,7 +146,9 @@ export declare class ComboBox<T = ComboBoxItem> extends React.Component<ComboBox
     /**
      * @public
      */
-    focus(): void;
+    focus(opts?: {
+        withoutOpenDropdown?: boolean;
+    }): void;
     /**
      * @public
      */