@skbkontur/react-ui 1.6.9 → 1.6.11

package/components/Token/README.md

@@ -1,109 +1,109 @@
-Token example
-
-```js
-const { default: Token } = require('./Token');
-
-<Token>Example</Token>;
-```
-
-You can control color of each token
-
-```js
-const { default: Gapped } = require('../Gapped');
-const colors = {
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-  gray: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  blue: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  green: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  yellow: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  red: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  mono: {
-    idle: 'white',
-    active: 'black',
-  },
-};
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token colors={colors.default}>Default</Token>
-    <Token isActive colors={colors.default}>
-      Default
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.gray}>Gray</Token>
-    <Token isActive colors={colors.gray}>
-      Gray
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.blue}>Blue</Token>
-    <Token isActive colors={colors.blue}>
-      Blue
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.green}>Green</Token>
-    <Token isActive colors={colors.green}>
-      Green
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.yellow}>Yellow</Token>
-    <Token isActive colors={colors.yellow}>
-      Yellow
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.red}>Red</Token>
-    <Token isActive colors={colors.red}>
-      Red
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.mono}>Monochrome</Token>
-    <Token isActive colors={colors.mono}>
-      Monochrome
-    </Token>
-  </Gapped>
-</Gapped>;
-```
-
-Can accept validation state
-
-```js
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token>Correct</Token>
-    <Token warning>Warned</Token>
-    <Token error>Errored</Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token isActive>Correct</Token>
-    <Token isActive warning>
-      Warned
-    </Token>
-    <Token isActive error>
-      Errored
-    </Token>
-  </Gapped>
-</Gapped>
-```
+Token example
+
+```js
+const { default: Token } = require('./Token');
+
+<Token>Example</Token>;
+```
+
+You can control color of each token
+
+```js
+const { default: Gapped } = require('../Gapped');
+const colors = {
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+  gray: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  blue: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  green: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  yellow: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  red: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  mono: {
+    idle: 'white',
+    active: 'black',
+  },
+};
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token colors={colors.default}>Default</Token>
+    <Token isActive colors={colors.default}>
+      Default
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.gray}>Gray</Token>
+    <Token isActive colors={colors.gray}>
+      Gray
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.blue}>Blue</Token>
+    <Token isActive colors={colors.blue}>
+      Blue
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.green}>Green</Token>
+    <Token isActive colors={colors.green}>
+      Green
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.yellow}>Yellow</Token>
+    <Token isActive colors={colors.yellow}>
+      Yellow
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.red}>Red</Token>
+    <Token isActive colors={colors.red}>
+      Red
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.mono}>Monochrome</Token>
+    <Token isActive colors={colors.mono}>
+      Monochrome
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+Can accept validation state
+
+```js
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token>Correct</Token>
+    <Token warning>Warned</Token>
+    <Token error>Errored</Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token isActive>Correct</Token>
+    <Token isActive warning>
+      Warned
+    </Token>
+    <Token isActive error>
+      Errored
+    </Token>
+  </Gapped>
+</Gapped>
+```

package/components/Token/Token.js.flow

@@ -1,25 +1,25 @@
-/* @flow */
-import type { MouseEventHandler } from '../eventHandlers';
-
-export type TokenColorName = string;
-
-export type TokenColors = {|
-  idle: TokenColorName,
-  active?: TokenColorName,
-|};
-
-type TokenActions = {|
-  onClick?: MouseEventHandler<HTMLDivElement>,
-  onRemove?: MouseEventHandler<HTMLElement>,
-|};
-
-export type TokenProps = {|
-  colors?: TokenColors,
-  isActive?: boolean,
-  error?: boolean,
-  warning?: boolean,
-|};
-
-declare var Token: React$ComponentType<TokenProps & TokenActions>;
-
-export default Token;
+/* @flow */
+import type { MouseEventHandler } from '../eventHandlers';
+
+export type TokenColorName = string;
+
+export type TokenColors = {|
+  idle: TokenColorName,
+  active?: TokenColorName,
+|};
+
+type TokenActions = {|
+  onClick?: MouseEventHandler<HTMLDivElement>,
+  onRemove?: MouseEventHandler<HTMLElement>,
+|};
+
+export type TokenProps = {|
+  colors?: TokenColors,
+  isActive?: boolean,
+  error?: boolean,
+  warning?: boolean,
+|};
+
+declare var Token: React$ComponentType<TokenProps & TokenActions>;
+
+export default Token;

package/components/Token/TokenRemoveIcon.js.flow

@@ -1,11 +1,11 @@
-/* @flow */
-import type { MouseEventHandler } from '../eventHandlers';
-
-export type RemoveIconProps = {|
-  className?: string,
-  onClick?: MouseEventHandler<HTMLElement>,
-|};
-
-declare var TokenRemoveIcon: (props: RemoveIconProps) => React$Node;
-
-export default TokenRemoveIcon;
+/* @flow */
+import type { MouseEventHandler } from '../eventHandlers';
+
+export type RemoveIconProps = {|
+  className?: string,
+  onClick?: MouseEventHandler<HTMLElement>,
+|};
+
+declare var TokenRemoveIcon: (props: RemoveIconProps) => React$Node;
+
+export default TokenRemoveIcon;

package/components/Token/index.js.flow

@@ -1,2 +1,2 @@
-/* @flow */
-export { default, TokenColors, TokenColorName, TokenProps } from './Token';
+/* @flow */
+export { default, TokenColors, TokenColorName, TokenProps } from './Token';

package/components/TokenInput/README.md

@@ -1,82 +1,82 @@
-```jsx
-const { default: Token } = require('../Token');
-const { TokenInputType } = require('./TokenInput');
-const delay = ms => v => new Promise(resolve => setTimeout(resolve, ms, v));
-
-const getItems = q =>
-  Promise.resolve(
-    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
-      x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
-    ),
-  ).then(delay(500));
-
-const tokenColors = {
-  First: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  Second: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  Third: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  Fourth: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  Fifth: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  Sixth: {
-    idle: 'white',
-    active: 'black',
-  },
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-};
-
-<div style={{ width: '300px' }}>
-  <TokenInput
-    type={TokenInputType.Combined}
-    getItems={getItems}
-    selectedItems={state.selectedItems}
-    onChange={itemsNew => setState({ selectedItems: itemsNew })}
-    renderToken={(item, { isActive, onClick, onRemove }) => (
-      <Token
-        key={item.toString()}
-        colors={tokenColors[item] || tokenColors.default}
-        isActive={isActive}
-        onClick={onClick}
-        onRemove={onRemove}
-      >
-        {item}
-      </Token>
-    )}
-  />
-</div>;
-```
-
-#### Локали по умолчанию (см. `LocaleProvider`)
-
-```typescript
-interface TokenInputLocale {
-  addButtonComment?: string;
-  addButtonTitle?: string;
-}
-
-const ru_RU = {
-  addButtonComment: 'Нажмите Enter или поставьте запятую',
-  addButtonTitle: 'Добавить',
-};
-
-const en_GB = {
-  addButtonComment: 'Press Enter or type comma',
-  addButtonTitle: 'Add',
-};
-```
+```jsx
+const { default: Token } = require('../Token');
+const { TokenInputType } = require('./TokenInput');
+const delay = ms => v => new Promise(resolve => setTimeout(resolve, ms, v));
+
+const getItems = q =>
+  Promise.resolve(
+    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
+      x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
+    ),
+  ).then(delay(500));
+
+const tokenColors = {
+  First: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  Second: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  Third: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  Fourth: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  Fifth: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  Sixth: {
+    idle: 'white',
+    active: 'black',
+  },
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+};
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    type={TokenInputType.Combined}
+    getItems={getItems}
+    selectedItems={state.selectedItems}
+    onChange={itemsNew => setState({ selectedItems: itemsNew })}
+    renderToken={(item, { isActive, onClick, onRemove }) => (
+      <Token
+        key={item.toString()}
+        colors={tokenColors[item] || tokenColors.default}
+        isActive={isActive}
+        onClick={onClick}
+        onRemove={onRemove}
+      >
+        {item}
+      </Token>
+    )}
+  />
+</div>;
+```
+
+#### Локали по умолчанию (см. `LocaleProvider`)
+
+```typescript
+interface TokenInputLocale {
+  addButtonComment?: string;
+  addButtonTitle?: string;
+}
+
+const ru_RU = {
+  addButtonComment: 'Нажмите Enter или поставьте запятую',
+  addButtonTitle: 'Добавить',
+};
+
+const en_GB = {
+  addButtonComment: 'Press Enter or type comma',
+  addButtonTitle: 'Add',
+};
+```

package/components/TokenInput/TextWidthHelper.js.flow

@@ -1,10 +1,10 @@
-/* @flow */
-export type TextWidthHelperProps = {|
-  text?: string,
-|};
-
-declare class TextWidthHelper extends React$Component<TextWidthHelperProps> {
-  getTextWidth(): number;
-}
-
-export default TextWidthHelper;
+/* @flow */
+export type TextWidthHelperProps = {|
+  text?: string,
+|};
+
+declare class TextWidthHelper extends React$Component<TextWidthHelperProps> {
+  getTextWidth(): number;
+}
+
+export default TextWidthHelper;

package/components/TokenInput/TokenInput.js.flow

@@ -1,39 +1,39 @@
-/* @flow */
-import type { TokenProps } from '../Token';
-import type { MenuItemState } from '../MenuItem';
-
-export type TokenInputType = 0 | 1 | 2;
-
-export type TokenInputProps<T> = {|
-  selectedItems: T[],
-  onChange: (items: T[]) => void,
-  autoFocus?: boolean,
-  type?: TokenInputType,
-  getItems?: (query: string) => Promise<T[]>,
-  hideMenuIfEmptyInputValue?: boolean,
-  renderItem: (item: T, state: MenuItemState) => React$Node | void,
-  renderValue: (item: T) => React$Node,
-  renderNotFound: () => React$Node,
-  valueToItem: (item: string) => T,
-  placeholder?: string,
-  delimiters?: string[],
-  error?: boolean,
-  warning?: boolean,
-  disabled?: boolean,
-  width: string | number,
-  renderTokenComponent?: (token: (props?: $Shape<TokenProps>) => React$Node, value?: T) => React$Node,
-|};
-
-export type TokenInputState<T> = {|
-  autocompleteItems?: T[],
-  activeTokens: T[],
-  inFocus?: boolean,
-  inputValue: string,
-  inputValueWidth: number,
-  preventBlur?: boolean,
-  loading?: boolean,
-|};
-
-declare class TokenInput<T = string> extends React$Component<TokenInputProps<T>, TokenInputState<T>> {}
-
-export default TokenInput;
+/* @flow */
+import type { TokenProps } from '../Token';
+import type { MenuItemState } from '../MenuItem';
+
+export type TokenInputType = 0 | 1 | 2;
+
+export type TokenInputProps<T> = {|
+  selectedItems: T[],
+  onChange: (items: T[]) => void,
+  autoFocus?: boolean,
+  type?: TokenInputType,
+  getItems?: (query: string) => Promise<T[]>,
+  hideMenuIfEmptyInputValue?: boolean,
+  renderItem: (item: T, state: MenuItemState) => React$Node | void,
+  renderValue: (item: T) => React$Node,
+  renderNotFound: () => React$Node,
+  valueToItem: (item: string) => T,
+  placeholder?: string,
+  delimiters?: string[],
+  error?: boolean,
+  warning?: boolean,
+  disabled?: boolean,
+  width: string | number,
+  renderTokenComponent?: (token: (props?: $Shape<TokenProps>) => React$Node, value?: T) => React$Node,
+|};
+
+export type TokenInputState<T> = {|
+  autocompleteItems?: T[],
+  activeTokens: T[],
+  inFocus?: boolean,
+  inputValue: string,
+  inputValueWidth: number,
+  preventBlur?: boolean,
+  loading?: boolean,
+|};
+
+declare class TokenInput<T = string> extends React$Component<TokenInputProps<T>, TokenInputState<T>> {}
+
+export default TokenInput;

package/components/TokenInput/TokenInputMenu.js.flow

@@ -1,17 +1,17 @@
-/* @flow */
-import type { ComboBoxMenuProps } from '../CustomComboBox/ComboBoxMenu';
-
-export type TokenInputMenuProps<T> = {|
-  ...$Exact<ComboBoxMenuProps<T>>,
-  anchorElement: HTMLElement,
-  inputValue: string,
-  showAddItemHint?: boolean,
-  onAddItem: (item: string) => void,
-|};
-
-declare class TokenInputMenu<T = string> extends React$Component<TokenInputMenuProps<T>> {
-  // eslint-disable-next-line flowtype/no-weak-types
-  getMenuRef: () => any;
-}
-
-export default TokenInputMenu;
+/* @flow */
+import type { ComboBoxMenuProps } from '../CustomComboBox/ComboBoxMenu';
+
+export type TokenInputMenuProps<T> = {|
+  ...$Exact<ComboBoxMenuProps<T>>,
+  anchorElement: HTMLElement,
+  inputValue: string,
+  showAddItemHint?: boolean,
+  onAddItem: (item: string) => void,
+|};
+
+declare class TokenInputMenu<T = string> extends React$Component<TokenInputMenuProps<T>> {
+  // eslint-disable-next-line flowtype/no-weak-types
+  getMenuRef: () => any;
+}
+
+export default TokenInputMenu;