@skbkontur/react-ui 1.6.4 → 1.6.8-fixed-modal-stack

package/README.md

@@ -1,135 +1,135 @@
-# React UI
-
-[![Build Status](https://tc.skbkontur.ru/app/rest/builds/buildType:FrontendInfrastructure_Packages_RunAll/statusIcon)](https://tc.skbkontur.ru/project.html?projectId=FrontendInfrastructure_Packages_ReactUI&tab=projectOverview)
-
-- [Варианты использования](#Варианты-использования)
-  - [Квик-старт](#Квик-старт) **@skbkontur/react-ui** собранная версия библиотеки
-  - [Слоу-старт](#Слоу-старт) **retail-ui** исходники для самостоятельной сборки, для переопределения `.less`-переменных
-- [FAQ](#FAQ)
-
-## <a name="Варианты-использования"></a>Варианты использования
-
-### <a name="Квик-старт"></a>Квик-старт
-
-```bash
-yarn add @skbkontur/react-ui
-```
-
-И используем компонентики у себя в проекте:
-
-```jsx static
-import Button from '@skbkontur/react-ui/Button';
-import Toast from '@skbkontur/react-ui/Toast';
-
-const MyApp = () => (
-  <div>
-    Click this button <Button onClick={() => Toast.push('Hey!')}>Click me</Button>
-  </div>
-);
-```
-
-Если ругается, что `regeneratorRuntime` не определен, то необходимо подключить `regenerator-runtime` или `@babel/polyfill`, например в `index.html`
-
-Квик-старт подойдёт, если Вебпак настроен на сборку. Например, вы используете `create-react-app`. В противном случае добавьте в конфиг Вебпака `style-`, `css-` и `file-loader`
-
-### <a name="Слоу-старт"></a>Слоу-старт
-
-```bash
-yarn add retail-ui
-```
-
-Необходимо установить как зависимости и добавить в [конфиг Вебпака](https://webpack.js.org/configuration/) следующие лоадеры:
-
-```js static
-module: {
-  rules: [
-    {
-      test: /\.jsx?$/,
-      use: [
-        {
-          loader: 'babel-loader',
-          options: {
-            presets: ['env', 'react'],
-            plugins: ['proposal-object-rest-spread', 'proposal-class-properties'],
-          },
-        },
-      ],
-      include: /retail-ui/,
-    },
-    {
-      test: /\.less$/,
-      use: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: { modules: 'global' },
-        },
-        'less-loader',
-      ],
-    },
-    {
-      test: /\.(png|woff|woff2|eot)$/,
-      use: ['file-loader'],
-    },
-  ];
-}
-```
-
-### Хотим другой цвет кнопки!
-
-Тут придется юзать слоу-старт. В конфиге нужно указать:
-
-```js static
-resolve: {
-  alias: {
-    'react-ui-theme': path.join(__dirname, 'path-to-my-theme-variables.less')
-  }
-}
-```
-
-Список переменных можно глянуть в `components/variables.less`
-
-### Глобальные css-стили приложения портят внешний вид контролов
-
-Если библиотека используется в проекте с легаси, где стилизация сделана прямо по названиям тегов, то внешний вид контролов из библиотеки может сильно испортиться
-
-Если нет возможности разобрать легаси, то можно увеличить специфичность селекторов в библиотеке, тогда стили контролов будут приоритетнее стилей из легаси проекта
-
-Специфичность достигается за счет n-кратного повторения css-класса `react-ui` в селекторе стилей. Количество повторений задается через переменную `@specificity-level`, значение по умолчанию равно нулю, то есть по умолчанию css-класс `react-ui` никак ни на что не будет влиять
-
-Чтобы специфичность заработала в легаси проекте, react-блок, в котором используются компоненты из библиотеки, должен быть обернут в тег с css-классом `react-ui`
-
-Пример настройки специфичности
-
-```less
-/* ... */
-@specificity-level: 5;
-/* ... */
-```
-
-## <a name="FAQ"></a>FAQ
-
-### Сломались стили при использовании css-loader 2.x (create-react-app/CRA 3.x)
-
-Во [2-й версии](https://github.com/webpack-contrib/css-loader/releases/tag/v2.0.0), `css-loader` отключили использование `css-modules` по умолчанию.
-**Решение**: В опциях к `css-loader` явно задать `modules: 'global'`.
-
-### Как использовать retail-ui с storybook 5.x?
-
-В 5-й версии изменилось [API сторибука для кастомизации настроек webpack](https://github.com/storybooks/storybook/blob/v5.0.0/MIGRATION.md#webpack-config-simplifcation).
-Кроме того был изменен дефолтный webpack конфиг. Это порождает проблемы вида [storybooks/storybook#4891](https://github.com/storybooks/storybook/issues/4891).
-**Решение**: Заменить лоадеры для `css/less`. Например [так](https://github.com/storybooks/storybook/issues/6319#issuecomment-477852640) на свои
-
-### Возникает ошибка `Error: Can't resolve 'mask-char-font/font.eot'`
-
-Ошибка проявляется при использовании `css-loader@1.x` с выставленой опцией `modules`.
-**Решение**: Обновить `css-loader` до 2-й версии или дополнительно указать опцию `url: false`
-
-### Не могу прокинуть css-класс компонентам. Как кастомизировать?
-
-Никак.
-
-### Помощь в развитии
-
-Мы рады любой сторонней помощи. Не стесняйтесь писать в [issues](https://github.com/skbkontur/retail-ui/issues)
-баги и идеи для развития библиотеки.<br />
+# React UI
+
+[![Build Status](https://tc.skbkontur.ru/app/rest/builds/buildType:FrontendInfrastructure_Packages_RunAll/statusIcon)](https://tc.skbkontur.ru/project.html?projectId=FrontendInfrastructure_Packages_ReactUI&tab=projectOverview)
+
+- [Варианты использования](#Варианты-использования)
+  - [Квик-старт](#Квик-старт) **@skbkontur/react-ui** собранная версия библиотеки
+  - [Слоу-старт](#Слоу-старт) **retail-ui** исходники для самостоятельной сборки, для переопределения `.less`-переменных
+- [FAQ](#FAQ)
+
+## <a name="Варианты-использования"></a>Варианты использования
+
+### <a name="Квик-старт"></a>Квик-старт
+
+```bash
+yarn add @skbkontur/react-ui
+```
+
+И используем компонентики у себя в проекте:
+
+```jsx static
+import Button from '@skbkontur/react-ui/Button';
+import Toast from '@skbkontur/react-ui/Toast';
+
+const MyApp = () => (
+  <div>
+    Click this button <Button onClick={() => Toast.push('Hey!')}>Click me</Button>
+  </div>
+);
+```
+
+Если ругается, что `regeneratorRuntime` не определен, то необходимо подключить `regenerator-runtime` или `@babel/polyfill`, например в `index.html`
+
+Квик-старт подойдёт, если Вебпак настроен на сборку. Например, вы используете `create-react-app`. В противном случае добавьте в конфиг Вебпака `style-`, `css-` и `file-loader`
+
+### <a name="Слоу-старт"></a>Слоу-старт
+
+```bash
+yarn add retail-ui
+```
+
+Необходимо установить как зависимости и добавить в [конфиг Вебпака](https://webpack.js.org/configuration/) следующие лоадеры:
+
+```js static
+module: {
+  rules: [
+    {
+      test: /\.jsx?$/,
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+            plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
+          },
+        },
+      ],
+      include: /retail-ui/,
+    },
+    {
+      test: /\.less$/,
+      use: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: { modules: 'global' },
+        },
+        'less-loader',
+      ],
+    },
+    {
+      test: /\.(png|woff|woff2|eot)$/,
+      use: ['file-loader'],
+    },
+  ];
+}
+```
+
+### Хотим другой цвет кнопки!
+
+Тут придется юзать слоу-старт. В конфиге нужно указать:
+
+```js static
+resolve: {
+  alias: {
+    'react-ui-theme': path.join(__dirname, 'path-to-my-theme-variables.less')
+  }
+}
+```
+
+Список переменных можно глянуть в `components/variables.less`
+
+### Глобальные css-стили приложения портят внешний вид контролов
+
+Если библиотека используется в проекте с легаси, где стилизация сделана прямо по названиям тегов, то внешний вид контролов из библиотеки может сильно испортиться
+
+Если нет возможности разобрать легаси, то можно увеличить специфичность селекторов в библиотеке, тогда стили контролов будут приоритетнее стилей из легаси проекта
+
+Специфичность достигается за счет n-кратного повторения css-класса `react-ui` в селекторе стилей. Количество повторений задается через переменную `@specificity-level`, значение по умолчанию равно нулю, то есть по умолчанию css-класс `react-ui` никак ни на что не будет влиять
+
+Чтобы специфичность заработала в легаси проекте, react-блок, в котором используются компоненты из библиотеки, должен быть обернут в тег с css-классом `react-ui`
+
+Пример настройки специфичности
+
+```less
+/* ... */
+@specificity-level: 5;
+/* ... */
+```
+
+## <a name="FAQ"></a>FAQ
+
+### Сломались стили при использовании css-loader 2.x (create-react-app/CRA 3.x)
+
+Во [2-й версии](https://github.com/webpack-contrib/css-loader/releases/tag/v2.0.0), `css-loader` отключили использование `css-modules` по умолчанию.
+**Решение**: В опциях к `css-loader` явно задать `modules: 'global'`.
+
+### Как использовать retail-ui с storybook 5.x?
+
+В 5-й версии изменилось [API сторибука для кастомизации настроек webpack](https://github.com/storybooks/storybook/blob/v5.0.0/MIGRATION.md#webpack-config-simplifcation).
+Кроме того был изменен дефолтный webpack конфиг. Это порождает проблемы вида [storybooks/storybook#4891](https://github.com/storybooks/storybook/issues/4891).
+**Решение**: Заменить лоадеры для `css/less`. Например [так](https://github.com/storybooks/storybook/issues/6319#issuecomment-477852640) на свои
+
+### Возникает ошибка `Error: Can't resolve 'mask-char-font/font.eot'`
+
+Ошибка проявляется при использовании `css-loader@1.x` с выставленой опцией `modules`.
+**Решение**: Обновить `css-loader` до 2-й версии или дополнительно указать опцию `url: false`
+
+### Не могу прокинуть css-класс компонентам. Как кастомизировать?
+
+Никак.
+
+### Помощь в развитии
+
+Мы рады любой сторонней помощи. Не стесняйтесь писать в [issues](https://github.com/skbkontur/retail-ui/issues)
+баги и идеи для развития библиотеки.<br />

package/components/Autocomplete/Autocomplete.adapter.d.ts

@@ -1,2 +1,2 @@
-import Autocomplete from './Autocomplete.js';
-export default Autocomplete;
+import Autocomplete from './Autocomplete.js';
+export default Autocomplete;

package/components/Autocomplete/Autocomplete.adapter.js.flow

@@ -1,4 +1,4 @@
-/* @flow */
-import Autocomplete from './Autocomplete.js';
-
-export default Autocomplete;
+/* @flow */
+import Autocomplete from './Autocomplete.js';
+
+export default Autocomplete;

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,108 +1,108 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { InputProps } from '../Input';
-import { Nullable } from '../../typings/utility-types';
-export interface AutocompleteProps extends InputProps {
-    /** Функция отрисовки элемента меню */
-    renderItem: (item: string) => React.ReactNode;
-    /** Промис, резолвящий элементы меню */
-    source?: string[] | ((patter: string) => Promise<string[]>);
-    /** Отключает использование портала */
-    disablePortal: boolean;
-    /** Отрисовка тени у выпадающего меню */
-    hasShadow: boolean;
-    /** Выравнивание выпадающего меню */
-    menuAlign: 'left' | 'right';
-    /** Максимальная высота меню */
-    menuMaxHeight: number | string;
-    /** Ширина меню */
-    menuWidth?: number | string;
-    /** Отключить скролл окна, когда меню открыто */
-    preventWindowScroll: boolean;
-    /** onChange */
-    onChange: (event: {
-        target: {
-            value: string;
-        };
-    }, value: string) => void;
-    /** onBlur */
-    onBlur?: () => void;
-    /** Размер инпута */
-    size: InputProps['size'];
-    /** value */
-    value: string;
-}
-export interface AutocomplpeteState {
-    items: Nullable<string[]>;
-    selected: number;
-}
-/**
- * Стандартный инпут с подсказками.
- *
- * Все свойства передаются во внутренний *Input*.
- */
-declare class Autocomplete extends React.Component<AutocompleteProps, AutocomplpeteState> {
-    static propTypes: {
-        /**
-         * Функция для отрисовки элемента в выпадающем списке. Единственный аргумент
-         * — *item*.
-         */
-        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Если передан массив, то совпадения ищутся по этому массиву.
-         *
-         * Если передается функция, то она должна возвращать thenable, который
-         * резолвится уже отфильтрованным массивом. Возвращенный thenable может
-         * иметь метод cancel, который будет вызван при отмене поиска (пользователь
-         * изменил строку поиска, автокомплит потерял фокус).
-         * ```
-         * function(pattern) {
-         *   return service.findAll(pattern);
-         * }
-         * ```
-         */
-        source: PropTypes.Requireable<any[] | ((...args: any[]) => any)>;
-    };
-    static defaultProps: {
-        renderItem: typeof renderItem;
-        size: string;
-        disablePortal: boolean;
-        hasShadow: boolean;
-        menuMaxHeight: number;
-        menuAlign: string;
-        preventWindowScroll: boolean;
-    };
-    state: AutocomplpeteState;
-    private opened;
-    private input;
-    private menu;
-    private focused;
-    private requestId;
-    private getProps;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    componentDidUpdate(prevProps: AutocompleteProps): void;
-    render(): JSX.Element;
-    private renderMenu;
-    private handleChange;
-    private handleFocus;
-    private handleBlur;
-    private handleClickOutside;
-    private handleKeyDown;
-    private handleMenuItemClick;
-    private getAnchor;
-    private handleItemClick;
-    private choose;
-    private updateItems;
-    private fireChange;
-    private refInput;
-    private refMenu;
-}
-declare function renderItem(item: any): any;
-export default Autocomplete;
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { InputProps } from '../Input';
+import { Nullable } from '../../typings/utility-types';
+export interface AutocompleteProps extends InputProps {
+    /** Функция отрисовки элемента меню */
+    renderItem: (item: string) => React.ReactNode;
+    /** Промис, резолвящий элементы меню */
+    source?: string[] | ((patter: string) => Promise<string[]>);
+    /** Отключает использование портала */
+    disablePortal: boolean;
+    /** Отрисовка тени у выпадающего меню */
+    hasShadow: boolean;
+    /** Выравнивание выпадающего меню */
+    menuAlign: 'left' | 'right';
+    /** Максимальная высота меню */
+    menuMaxHeight: number | string;
+    /** Ширина меню */
+    menuWidth?: number | string;
+    /** Отключить скролл окна, когда меню открыто */
+    preventWindowScroll: boolean;
+    /** onChange */
+    onChange: (event: {
+        target: {
+            value: string;
+        };
+    }, value: string) => void;
+    /** onBlur */
+    onBlur?: () => void;
+    /** Размер инпута */
+    size: InputProps['size'];
+    /** value */
+    value: string;
+}
+export interface AutocomplpeteState {
+    items: Nullable<string[]>;
+    selected: number;
+}
+/**
+ * Стандартный инпут с подсказками.
+ *
+ * Все свойства передаются во внутренний *Input*.
+ */
+declare class Autocomplete extends React.Component<AutocompleteProps, AutocomplpeteState> {
+    static propTypes: {
+        /**
+         * Функция для отрисовки элемента в выпадающем списке. Единственный аргумент
+         * — *item*.
+         */
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Если передан массив, то совпадения ищутся по этому массиву.
+         *
+         * Если передается функция, то она должна возвращать thenable, который
+         * резолвится уже отфильтрованным массивом. Возвращенный thenable может
+         * иметь метод cancel, который будет вызван при отмене поиска (пользователь
+         * изменил строку поиска, автокомплит потерял фокус).
+         * ```
+         * function(pattern) {
+         *   return service.findAll(pattern);
+         * }
+         * ```
+         */
+        source: PropTypes.Requireable<any[] | ((...args: any[]) => any)>;
+    };
+    static defaultProps: {
+        renderItem: typeof renderItem;
+        size: string;
+        disablePortal: boolean;
+        hasShadow: boolean;
+        menuMaxHeight: number;
+        menuAlign: string;
+        preventWindowScroll: boolean;
+    };
+    state: AutocomplpeteState;
+    private opened;
+    private input;
+    private menu;
+    private focused;
+    private requestId;
+    private getProps;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    componentDidUpdate(prevProps: AutocompleteProps): void;
+    render(): JSX.Element;
+    private renderMenu;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handleClickOutside;
+    private handleKeyDown;
+    private handleMenuItemClick;
+    private getAnchor;
+    private handleItemClick;
+    private choose;
+    private updateItems;
+    private fireChange;
+    private refInput;
+    private refMenu;
+}
+declare function renderItem(item: any): any;
+export default Autocomplete;

package/components/Autocomplete/Autocomplete.js

@@ -12,10 +12,10 @@ var MenuItem_1 = tslib_1.__importDefault(require("../MenuItem"));
 var RenderLayer_1 = tslib_1.__importDefault(require("../RenderLayer"));
 var createPropsGetter_1 = require("../internal/createPropsGetter");
 var fixClickFocusIE_1 = require("../../lib/events/fixClickFocusIE");
-/**
-                                                                      * Стандартный инпут с подсказками.
-                                                                      *
-                                                                      * Все свойства передаются во внутренний *Input*.
+/**
+                                                                      * Стандартный инпут с подсказками.
+                                                                      *
+                                                                      * Все свойства передаются во внутренний *Input*.
                                                                       */
 var Autocomplete = /** @class */function (_super) {
   tslib_1.__extends(Autocomplete, _super);
@@ -104,16 +104,16 @@ var Autocomplete = /** @class */function (_super) {
     };
     return _this;
   }
-  /**
-     * @public
+  /**
+     * @public
      */
   Autocomplete.prototype.focus = function () {
     if (this.input) {
       this.input.focus();
     }
   };
-  /**
-      * @public
+  /**
+      * @public
       */
   Autocomplete.prototype.blur = function () {
     this.handleBlur();
@@ -206,23 +206,23 @@ var Autocomplete = /** @class */function (_super) {
     }
   };
   Autocomplete.propTypes = {
-    /**
-                              * Функция для отрисовки элемента в выпадающем списке. Единственный аргумент
-                              * — *item*.
+    /**
+                              * Функция для отрисовки элемента в выпадающем списке. Единственный аргумент
+                              * — *item*.
                               */
     renderItem: PropTypes.func,
-    /**
-                                 * Если передан массив, то совпадения ищутся по этому массиву.
-                                 *
-                                 * Если передается функция, то она должна возвращать thenable, который
-                                 * резолвится уже отфильтрованным массивом. Возвращенный thenable может
-                                 * иметь метод cancel, который будет вызван при отмене поиска (пользователь
-                                 * изменил строку поиска, автокомплит потерял фокус).
-                                 * ```
-                                 * function(pattern) {
-                                 *   return service.findAll(pattern);
-                                 * }
-                                 * ```
+    /**
+                                 * Если передан массив, то совпадения ищутся по этому массиву.
+                                 *
+                                 * Если передается функция, то она должна возвращать thenable, который
+                                 * резолвится уже отфильтрованным массивом. Возвращенный thenable может
+                                 * иметь метод cancel, который будет вызван при отмене поиска (пользователь
+                                 * изменил строку поиска, автокомплит потерял фокус).
+                                 * ```
+                                 * function(pattern) {
+                                 *   return service.findAll(pattern);
+                                 * }
+                                 * ```
                                  */
     source: PropTypes.oneOfType([PropTypes.array, PropTypes.func]) };
 

package/components/Autocomplete/Autocomplete.js.flow

@@ -1,37 +1,37 @@
-/* @flow */
-import type { InputProps } from '../Input';
-
-export type AutocompleteProps = {
-  ...$Exact<InputProps>,
-  renderItem?: (item: string) => React$Node,
-  source?: string[] | ((patter: string) => Promise<string[]>),
-  disablePortal?: boolean,
-  hasShadow?: boolean,
-  menuAlign?: 'left' | 'right',
-  menuMaxHeight?: number | string,
-  menuWidth?: number | string,
-  preventWindowScroll?: boolean,
-  onChange: (
-    event: {
-      target: {
-        value: string,
-      },
-    },
-    value: string,
-  ) => void,
-  onBlur?: () => void,
-  size?: $PropertyType<InputProps, 'size'>,
-  value: string,
-};
-
-export type AutocomplpeteState = {|
-  items: void | null | string[],
-  selected: number,
-|};
-
-declare class Autocomplete extends React$Component<AutocompleteProps, AutocomplpeteState> {
-  focus(): void;
-  blur(): void;
-}
-
-export default Autocomplete;
+/* @flow */
+import type { InputProps } from '../Input';
+
+export type AutocompleteProps = {
+  ...$Exact<InputProps>,
+  renderItem?: (item: string) => React$Node,
+  source?: string[] | ((patter: string) => Promise<string[]>),
+  disablePortal?: boolean,
+  hasShadow?: boolean,
+  menuAlign?: 'left' | 'right',
+  menuMaxHeight?: number | string,
+  menuWidth?: number | string,
+  preventWindowScroll?: boolean,
+  onChange: (
+    event: {
+      target: {
+        value: string,
+      },
+    },
+    value: string,
+  ) => void,
+  onBlur?: () => void,
+  size?: $PropertyType<InputProps, 'size'>,
+  value: string,
+};
+
+export type AutocomplpeteState = {|
+  items: void | null | string[],
+  selected: number,
+|};
+
+declare class Autocomplete extends React$Component<AutocompleteProps, AutocomplpeteState> {
+  focus(): void;
+  blur(): void;
+}
+
+export default Autocomplete;