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

package/cjs/components/Dropdown/Dropdown.js

@@ -35,7 +35,8 @@ var PASS_PROPS = {
   onMouseOver: true,
   menuPos: true,
   id: true,
-  'aria-describedby': true
+  'aria-describedby': true,
+  'aria-label': true
 };
 
 
@@ -204,21 +205,20 @@ Dropdown = exports.Dropdown = (0, _rootNode.rootNode)(_class = (_Dropdown = /*#_
 
 
 
-    renderMain = function (_ref) {var caption = _ref.caption,icon = _ref.icon,props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    renderMain = function () {
+      var _this$props = _this.props,caption = _this$props.caption,icon = _this$props.icon,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, _excluded);
       var items = _react.default.Children.map(_this.props.children, function (item) {return item;}) || [];
 
       return /*#__PURE__*/(
-        _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this.setRootNode }, _this.props), /*#__PURE__*/
+        _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this.setRootNode }, rest), /*#__PURE__*/
         _react.default.createElement(_Select.Select, (0, _extends2.default)({
           "data-tid": DropdownDataTids.root,
           ref: _this._refSelect },
-        (0, _filterProps.filterProps)(props, PASS_PROPS), {
+        (0, _filterProps.filterProps)(rest, PASS_PROPS), {
           value: caption,
           items: items,
           _icon: icon,
-          renderValue: renderValue,
-          size: _this.props.size,
-          "aria-label": _this.props['aria-label'] })
+          renderValue: renderValue })
         )
         ));
 
@@ -244,7 +244,7 @@ Dropdown = exports.Dropdown = (0, _rootNode.rootNode)(_class = (_Dropdown = /*#_
 
     _refSelect = function (element) {
       _this._select = element;
-    };return _this;}(0, _inheritsLoose2.default)(Dropdown, _React$Component);var _proto = Dropdown.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getDropdownTheme.getDropdownTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain(_this2.props));});}; /**
+    };return _this;}(0, _inheritsLoose2.default)(Dropdown, _React$Component);var _proto = Dropdown.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getDropdownTheme.getDropdownTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});}; /**
    * @public
    */_proto.open = function open() {if (this._select) {this._select.open();}} /**
    * @public

package/cjs/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_filterProps","_MenuHeader","_MenuItem","_MenuSeparator","_Select","_CommonWrapper","_rootNode","_ThemeContext","_getDropdownTheme","_excluded","_class","_Dropdown","PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","menuPos","id","DropdownDataTids","exports","root","Dropdown","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderMain","_ref","caption","icon","props","_objectWithoutPropertiesLoose2","default","items","React","Children","map","children","item","createElement","CommonWrapper","_extends2","rootNodeRef","setRootNode","Select","ref","_refSelect","filterProps","value","_icon","renderValue","element","_select","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","theme","getDropdownTheme","Provider","open","close","Component","__KONTUR_REACT_UI__","displayName","Header","MenuHeader","MenuItem","Separator","MenuSeparator","propTypes","PropTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func"],"sources":["Dropdown.tsx"],"sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterProps } from '../../lib/filterProps';\nimport { MenuHeader } from '../MenuHeader';\nimport { MenuItem } from '../MenuItem';\nimport { MenuSeparator } from '../MenuSeparator';\nimport { Select } from '../Select';\nimport { Nullable } from '../../typings/utility-types';\nimport { ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { getDropdownTheme } from './getDropdownTheme';\n\nconst PASS_PROPS = {\n  _renderButton: true,\n  error: true,\n  disabled: true,\n  disablePortal: true,\n  menuAlign: true,\n  menuWidth: true,\n  maxMenuHeight: true,\n  use: true,\n  size: true,\n  warning: true,\n  width: true,\n  onOpen: true,\n  onClose: true,\n  onMouseEnter: true,\n  onMouseLeave: true,\n  onMouseOver: true,\n  menuPos: true,\n  id: true,\n  'aria-describedby': true,\n};\n\nexport interface DropdownProps\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    CommonProps {\n  /** Задает подпись на кнопке. */\n  caption: React.ReactNode;\n\n  /** Добавляет иконку слева от текста кнопки. */\n  icon?: React.ReactElement<any>;\n\n  /** Задает ширину выпадающего меню. */\n  width?: React.CSSProperties['width'];\n\n  /** @ignore */\n  _renderButton?: (params: any) => JSX.Element;\n\n  /** Отключает использование портала. */\n  disablePortal?: boolean;\n\n  /** Делает компонент недоступным.*/\n  disabled?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n\n  /** Задает максимальную высоту меню. */\n  maxMenuHeight?: number;\n\n  /** Задает текущую позицию выпадающего окна вручную.\n   */\n  menuPos?: 'top' | 'bottom';\n\n  /** Задает выравнивание выпадающего меню. */\n  menuAlign?: 'left' | 'right';\n\n  /** Задает длину меню. */\n  menuWidth?: number | string;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задаёт стиль кнопки. */\n  use?: ButtonUse;\n\n  /** Задает функцию, которая вызывается при закрытии меню. */\n  onClose?: () => void;\n\n  /** Задает функцию, которая вызывается при открытии меню. */\n  onOpen?: () => void;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave)  */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\nexport const DropdownDataTids = {\n  root: 'Dropdown__root',\n} as const;\n\n/**\n * Выпадающее меню `Dropdown`. Содержит несколько команд, объединенных по смыслу.\n *\n * Используйте кнопку-меню:\n * * когда не хватает места для нескольких кнопок.\n * * когда названия действий очень длинные.\n * * когда действия редко используются или объединены по смыслу.\n *\n * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом Select.\n */\n@rootNode\nexport class Dropdown extends React.Component<DropdownProps> {\n  public static __KONTUR_REACT_UI__ = 'Dropdown';\n  public static displayName = 'Dropdown';\n\n  public static Header = MenuHeader;\n  public static MenuItem = MenuItem;\n  public static Separator = MenuSeparator;\n\n  public static propTypes = {\n    /**\n     * Подпись на кнопке.\n     */\n    caption: PropTypes.node.isRequired,\n\n    /**\n     * Отключает использование портала\n     */\n    disablePortal: PropTypes.bool,\n\n    /**\n     * Визуально отключает Dropdown\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Визуально показать наличие ошибки.\n     */\n    error: PropTypes.bool,\n\n    /**\n     * Иконка слева от текста кнопки\n     */\n    icon: PropTypes.node,\n\n    maxMenuHeight: PropTypes.number,\n\n    menuAlign: PropTypes.oneOf(['left', 'right']),\n\n    menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n    /**\n     * Смотри Button.\n     */\n    use: PropTypes.any,\n\n    /**\n     * Визуально показать наличие предупреждения.\n     */\n    warning: PropTypes.bool,\n\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    /**\n     * Вызывается при закрытии меню.\n     */\n    onClose: PropTypes.func,\n\n    onMouseEnter: PropTypes.func,\n\n    onMouseLeave: PropTypes.func,\n\n    onMouseOver: PropTypes.func,\n\n    /**\n     * Вызывается при открытии меню.\n     */\n    onOpen: PropTypes.func,\n  };\n\n  private _select: Nullable<DropdownSelectType>;\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getDropdownTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain(this.props)}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain = ({ caption, icon, ...props }: CommonWrapperRestProps<DropdownProps>) => {\n    const items = React.Children.map(this.props.children, (item) => item) || [];\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Select<React.ReactNode, React.ReactNode>\n          data-tid={DropdownDataTids.root}\n          ref={this._refSelect}\n          {...filterProps(props, PASS_PROPS)}\n          value={caption}\n          items={items}\n          _icon={icon}\n          renderValue={renderValue}\n          size={this.props.size}\n          aria-label={this.props['aria-label']}\n        />\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public open() {\n    if (this._select) {\n      this._select.open();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public close() {\n    if (this._select) {\n      this._select.close();\n    }\n  }\n\n  private _refSelect = (element: DropdownSelectType): void => {\n    this._select = element;\n  };\n}\n\nfunction renderValue(value: any) {\n  return value;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_filterProps","_MenuHeader","_MenuItem","_MenuSeparator","_Select","_CommonWrapper","_rootNode","_ThemeContext","_getDropdownTheme","_excluded","_class","_Dropdown","PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","menuPos","id","DropdownDataTids","exports","root","Dropdown","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderMain","_this$props","props","caption","icon","rest","_objectWithoutPropertiesLoose2","default","items","React","Children","map","children","item","createElement","CommonWrapper","_extends2","rootNodeRef","setRootNode","Select","ref","_refSelect","filterProps","value","_icon","renderValue","element","_select","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","theme","getDropdownTheme","Provider","open","close","Component","__KONTUR_REACT_UI__","displayName","Header","MenuHeader","MenuItem","Separator","MenuSeparator","propTypes","PropTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func"],"sources":["Dropdown.tsx"],"sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterProps } from '../../lib/filterProps';\nimport { MenuHeader } from '../MenuHeader';\nimport { MenuItem } from '../MenuItem';\nimport { MenuSeparator } from '../MenuSeparator';\nimport { Select } from '../Select';\nimport { Nullable } from '../../typings/utility-types';\nimport { ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { getDropdownTheme } from './getDropdownTheme';\n\nconst PASS_PROPS = {\n  _renderButton: true,\n  error: true,\n  disabled: true,\n  disablePortal: true,\n  menuAlign: true,\n  menuWidth: true,\n  maxMenuHeight: true,\n  use: true,\n  size: true,\n  warning: true,\n  width: true,\n  onOpen: true,\n  onClose: true,\n  onMouseEnter: true,\n  onMouseLeave: true,\n  onMouseOver: true,\n  menuPos: true,\n  id: true,\n  'aria-describedby': true,\n  'aria-label': true,\n};\n\nexport interface DropdownProps\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    CommonProps {\n  /** Задает подпись на кнопке. */\n  caption: React.ReactNode;\n\n  /** Добавляет иконку слева от текста кнопки. */\n  icon?: React.ReactElement<any>;\n\n  /** Задает ширину выпадающего меню. */\n  width?: React.CSSProperties['width'];\n\n  /** @ignore */\n  _renderButton?: (params: any) => JSX.Element;\n\n  /** Отключает использование портала. */\n  disablePortal?: boolean;\n\n  /** Делает компонент недоступным.*/\n  disabled?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n\n  /** Задает максимальную высоту меню. */\n  maxMenuHeight?: number;\n\n  /** Задает текущую позицию выпадающего окна вручную.\n   */\n  menuPos?: 'top' | 'bottom';\n\n  /** Задает выравнивание выпадающего меню. */\n  menuAlign?: 'left' | 'right';\n\n  /** Задает длину меню. */\n  menuWidth?: number | string;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задаёт стиль кнопки. */\n  use?: ButtonUse;\n\n  /** Задает функцию, которая вызывается при закрытии меню. */\n  onClose?: () => void;\n\n  /** Задает функцию, которая вызывается при открытии меню. */\n  onOpen?: () => void;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave)  */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\nexport const DropdownDataTids = {\n  root: 'Dropdown__root',\n} as const;\n\n/**\n * Выпадающее меню `Dropdown`. Содержит несколько команд, объединенных по смыслу.\n *\n * Используйте кнопку-меню:\n * * когда не хватает места для нескольких кнопок.\n * * когда названия действий очень длинные.\n * * когда действия редко используются или объединены по смыслу.\n *\n * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом Select.\n */\n@rootNode\nexport class Dropdown extends React.Component<DropdownProps> {\n  public static __KONTUR_REACT_UI__ = 'Dropdown';\n  public static displayName = 'Dropdown';\n\n  public static Header = MenuHeader;\n  public static MenuItem = MenuItem;\n  public static Separator = MenuSeparator;\n\n  public static propTypes = {\n    /**\n     * Подпись на кнопке.\n     */\n    caption: PropTypes.node.isRequired,\n\n    /**\n     * Отключает использование портала\n     */\n    disablePortal: PropTypes.bool,\n\n    /**\n     * Визуально отключает Dropdown\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Визуально показать наличие ошибки.\n     */\n    error: PropTypes.bool,\n\n    /**\n     * Иконка слева от текста кнопки\n     */\n    icon: PropTypes.node,\n\n    maxMenuHeight: PropTypes.number,\n\n    menuAlign: PropTypes.oneOf(['left', 'right']),\n\n    menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n    /**\n     * Смотри Button.\n     */\n    use: PropTypes.any,\n\n    /**\n     * Визуально показать наличие предупреждения.\n     */\n    warning: PropTypes.bool,\n\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    /**\n     * Вызывается при закрытии меню.\n     */\n    onClose: PropTypes.func,\n\n    onMouseEnter: PropTypes.func,\n\n    onMouseLeave: PropTypes.func,\n\n    onMouseOver: PropTypes.func,\n\n    /**\n     * Вызывается при открытии меню.\n     */\n    onOpen: PropTypes.func,\n  };\n\n  private _select: Nullable<DropdownSelectType>;\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getDropdownTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain = () => {\n    const { caption, icon, ...rest } = this.props;\n    const items = React.Children.map(this.props.children, (item) => item) || [];\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...rest}>\n        <Select<React.ReactNode, React.ReactNode>\n          data-tid={DropdownDataTids.root}\n          ref={this._refSelect}\n          {...filterProps(rest, PASS_PROPS)}\n          value={caption}\n          items={items}\n          _icon={icon}\n          renderValue={renderValue}\n        />\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public open() {\n    if (this._select) {\n      this._select.open();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public close() {\n    if (this._select) {\n      this._select.close();\n    }\n  }\n\n  private _refSelect = (element: DropdownSelectType): void => {\n    this._select = element;\n  };\n}\n\nfunction renderValue(value: any) {\n  return value;\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,184 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Dropdown', () => {
+  story('SimpleDropdown', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
+      },
+    });
+
+    test('idle', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'idle');
+    });
+
+    test('clicked', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'clicked');
+    });
+
+    test('MenuItem hover', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'MenuItem hover');
+    });
+
+    test('selected item', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'selected item');
+    });
+  });
+
+  story('WithMenuItemIcon', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '.dropdown-test-container' });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('InsideScrollableContainer', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '.dropdown-test-container' });
+
+    test('scrolled', async (context) => {
+      await context.webdriver
+        .actions()
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      const opened = await context.takeScreenshot();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('.dropdown-test-container') as HTMLElement;
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      });
+      const scrolled = await context.takeScreenshot();
+      await context.matchImages({ opened, scrolled });
+    });
+  });
+
+  story('WithCustomSelectTheme', () => {
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened top with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top with portal');
+    });
+
+    test('opened bottom with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom with portal');
+    });
+
+    test('opened top without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top without portal');
+    });
+
+    test('opened bottom without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom without portal');
+    });
+  });
+
+  story('Size', () => {
+    test('clicked all', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="open-all"]' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'ClickedAll');
+    });
+  });
+});

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

@@ -0,0 +1,263 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const outOfViewTests = (side: 'left' | 'right') => {
+  test('out of viewport', async (context) => {
+    if (side === 'left') {
+      await context.webdriver.executeScript(function () {
+        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
+        container.scrollLeft = container.scrollWidth;
+      });
+    }
+
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid="firstMenu"]' }))
+      .perform();
+    await delay(1000);
+
+    await context.matchImage(await context.takeScreenshot(), 'out of viewport');
+  });
+
+  test('out of edge with min menu width', async (context) => {
+    if (side === 'left') {
+      await context.webdriver.executeScript(function () {
+        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
+        container.scrollLeft = container.scrollWidth;
+      });
+    }
+
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid="secondMenu"]' }))
+      .perform();
+    await delay(1000);
+
+    await context.matchImage(await context.takeScreenshot(), 'out of viewport with min menu width');
+  });
+};
+
+const textAlignmentTests = () => {
+  test('opened', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'opened');
+  });
+};
+
+const navigateInNestedMenuItems = () => {
+  test('navigate', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+      .sendKeys(Key.DOWN)
+      .sendKeys(Key.DOWN)
+      .perform();
+    const arrowDown = await context.webdriver.takeScreenshot();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ENTER)
+      .perform();
+    await delay(1000);
+    const enter = await context.webdriver.takeScreenshot();
+    await context.matchImages({ arrowDown, enter });
+  });
+};
+
+kind('DropdownMenu', () => {
+  story('SimpleExample', () => {
+    test('plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('clickAfterClickedOnCaption', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clickAfterClickedOnCaption');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('enterPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'enterPress');
+    });
+
+    test('escapePress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ESCAPE)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'escapePress');
+    });
+  });
+
+  story('CaptionWidth', () => {
+    test('plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+  });
+
+  story('WithHeaderAndFooter', () => {
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'clicked');
+    });
+
+    test('scrolled by 100', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
+        scrollContainer.scrollTop += 100;
+      });
+      await delay(2000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled by 100');
+    });
+
+    test('scrolled down to bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
+        scrollContainer.scrollTop += scrollContainer.scrollHeight;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled down to bottom');
+    });
+  });
+
+  story('MobileExampleWithHorizontalPadding', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: null });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DropdownMenu"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver
+        .actions({ bridge: true })
+        .move({ origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+  story('MenuOutOfViewPortRight', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { flacky: { in: ['firefox2022', 'firefox2022Dark'] } },
+    });
+    outOfViewTests('right');
+  });
+  story('MenuOutOfViewPortLeft', () => {
+    outOfViewTests('left');
+  });
+
+  story('WithItemsAndIcons', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithItemsAndIconsWithoutTextAlignment', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithNestedMenuItems', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    navigateInNestedMenuItems();
+  });
+});

package/cjs/components/FileUploader/FileUploader.mixins.js

@@ -1,10 +1,10 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.fileUploaderSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+"use strict";exports.__esModule = true;exports.fileUploaderSizeMixin = void 0;var _Emotion = require("../../lib/theming/Emotion");
 
 var fileUploaderSizeMixin = exports.fileUploaderSizeMixin = function fileUploaderSizeMixin(fontSize, lineHeight, paddingX, paddingY) {
-  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", " ", ";\n    line-height: ", ";\n  "])),
-  fontSize,
+  return /*#__PURE__*/(0, _Emotion.css)("font-size:",
+  fontSize, ";box-sizing:border-box;padding:",
 
-  paddingY, paddingX,
-  lineHeight);
+  paddingY, " ", paddingX, ";line-height:",
+  lineHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:fileUploaderSizeMixin;"));
 
 };

package/cjs/components/FileUploader/FileUploader.mixins.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","fileUploaderSizeMixin","exports","fontSize","lineHeight","paddingX","paddingY","css","_taggedTemplateLiteralLoose2","default"],"sources":["FileUploader.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const fileUploaderSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${paddingY} ${paddingX};\n    line-height: ${lineHeight};\n  `;\n};\n"],"mappings":"mSAAA,IAAAA,QAAA,GAAAC,OAAA,8BAAgD,IAAAC,eAAA;;AAEzC,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,SAAxBA,qBAAqBA,CAAIE,QAAgB,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,QAAgB,EAAK;EACjH,WAAOC,YAAG,EAAAP,eAAA,KAAAA,eAAA,OAAAQ,4BAAA,CAAAC,OAAA;EACKN,QAAQ;;EAEVG,QAAQ,EAAID,QAAQ;EAChBD,UAAU;;AAE7B,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","fileUploaderSizeMixin","exports","fontSize","lineHeight","paddingX","paddingY","css","process","env","NODE_ENV"],"sources":["FileUploader.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const fileUploaderSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${paddingY} ${paddingX};\n    line-height: ${lineHeight};\n  `;\n};\n"],"mappings":"8EAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEO,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,SAAxBA,qBAAqBA,CAAIE,QAAgB,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,QAAgB,EAAK;EACjH,wBAAOC,YAAG;EACKJ,QAAQ;;EAEVG,QAAQ,OAAID,QAAQ;EAChBD,UAAU,SAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAE7B,CAAC","ignoreList":[]}