@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/cjs/lib/listenFocusOutside.d.ts

@@ -1,4 +1,8 @@
 export declare function containsTargetOrRenderContainer(target: Element): (element: Element) => boolean;
+/**
+ * Searches RenderContainer placed in "rootNode" for "node"
+ */
+export declare function findRenderContainer(node: Element, rootNode: Element, container?: Element): Element | null;
 export declare function listen(elements: HTMLElement[] | (() => HTMLElement[]), callback: (event: Event) => void): {
     remove(): void;
 };

package/cjs/lib/listenFocusOutside.js

@@ -1,7 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.containsTargetOrRenderContainer = containsTargetOrRenderContainer;exports.listen = listen;var _reactDom = _interopRequireDefault(require("react-dom"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.containsTargetOrRenderContainer = containsTargetOrRenderContainer;exports.findRenderContainer = findRenderContainer;exports.listen = listen;var _reactDom = _interopRequireDefault(require("react-dom"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
-var _utils = require("./utils");
+var _client = require("./client");
 
 
 
@@ -11,22 +11,22 @@ var _utils = require("./utils");
 var handlers = [];
 
 function addHandleEvent() {
-  /**
-                            * Firefox do not supports 'focusin' event.
-                            * Focus events bubbles multiple time
-                            * without possibilty to cancell bubbling.
-                            * Using debounce to capture only first focus event
-                            * Mozilla Firefix
-                            *   ¯\_(ツ)_/¯
-                            */
+  /**
+   * Firefox do not supports 'focusin' event.
+   * Focus events bubbles multiple time
+   * without possibilty to cancell bubbling.
+   * Using debounce to capture only first focus event
+   * Mozilla Firefix
+   *   ¯\_(ツ)_/¯
+   */
   document.body.addEventListener(
-  _utils.isFirefox ? 'focus' : 'focusin',
-  _utils.isFirefox ? (0, _lodash.default)(handleNativeFocus, 0, { leading: true, trailing: false }) : handleNativeFocus,
-  _utils.isFirefox);
+  _client.isFirefox ? 'focus' : 'focusin',
+  _client.isFirefox ? (0, _lodash.default)(handleNativeFocus, 0, { leading: true, trailing: false }) : handleNativeFocus,
+  { capture: true });
 
 }
 
-if (typeof document !== 'undefined') {
+if (_client.isBrowser) {
   if (document.readyState === 'complete') {
     addHandleEvent();
   } else {
@@ -64,9 +64,9 @@ function containsTargetOrRenderContainer(target) {
   };
 }
 
-/**
-   * Searches RenderContainer placed in "rootNode" for "node"
-   */
+/**
+ * Searches RenderContainer placed in "rootNode" for "node"
+ */
 function findRenderContainer(node, rootNode, container) {
   var currentNode = node.parentNode;
   if (

package/cjs/lib/listenFocusOutside.js.map

@@ -1 +1 @@
-{"version":3,"sources":["listenFocusOutside.ts"],"names":["handlers","addHandleEvent","document","body","addEventListener","isFirefox","handleNativeFocus","leading","trailing","readyState","window","event","target","srcElement","forEach","handler","elements","some","containsTargetOrRenderContainer","ReactDOM","unstable_batchedUpdates","callback","element","contains","container","findRenderContainer","node","rootNode","currentNode","parentNode","documentElement","Element","newContainerId","getAttribute","nextNode","querySelector","Error","listen","push","remove","index","indexOf","splice"],"mappings":"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","sourcesContent":["import ReactDOM from 'react-dom';\r\nimport debounce from 'lodash.debounce';\r\n\r\nimport { isFirefox } from './utils';\r\n\r\ninterface FocusOutsideEventHandler {\r\n  elements: HTMLElement[] | (() => HTMLElement[]);\r\n  callback: (event: Event) => void;\r\n}\r\n\r\nconst handlers: FocusOutsideEventHandler[] = [];\r\n\r\nfunction addHandleEvent() {\r\n  /**\r\n   * Firefox do not supports 'focusin' event.\r\n   * Focus events bubbles multiple time\r\n   * without possibilty to cancell bubbling.\r\n   * Using debounce to capture only first focus event\r\n   * Mozilla Firefix\r\n   *   ¯\\_(ツ)_/¯\r\n   */\r\n  document.body.addEventListener(\r\n    isFirefox ? 'focus' : ('focusin' as 'focus'),\r\n    isFirefox ? debounce(handleNativeFocus, 0, { leading: true, trailing: false }) : handleNativeFocus,\r\n    isFirefox,\r\n  );\r\n}\r\n\r\nif (typeof(document) !== 'undefined') {\r\n  if (document.readyState === 'complete') {\r\n    addHandleEvent();\r\n  } else {\r\n    window.addEventListener('load', addHandleEvent);\r\n  }\r\n}\r\n\r\nfunction handleNativeFocus(event: UIEvent) {\r\n  // FIXME: not safe casting\r\n  const target: HTMLElement = (event.target || event.srcElement) as HTMLElement;\r\n\r\n  handlers.forEach(handler => {\r\n    let elements = handler.elements;\r\n    if (typeof elements === 'function') {\r\n      elements = elements();\r\n    }\r\n\r\n    if (elements.some(containsTargetOrRenderContainer(target))) {\r\n      return;\r\n    }\r\n    ReactDOM.unstable_batchedUpdates(() => handler.callback(event));\r\n  });\r\n}\r\n\r\nexport function containsTargetOrRenderContainer(target: Element) {\r\n  return (element: Element) => {\r\n    if (!element) {\r\n      return false;\r\n    }\r\n    if (element.contains(target)) {\r\n      return true;\r\n    }\r\n    const container = findRenderContainer(target, element);\r\n    return !!container && element.contains(container);\r\n  };\r\n}\r\n\r\n/**\r\n * Searches RenderContainer placed in \"rootNode\" for \"node\"\r\n */\r\nfunction findRenderContainer(node: Element, rootNode: Element, container?: Element): Element | null {\r\n  const currentNode = node.parentNode;\r\n  if (\r\n    !currentNode ||\r\n    node === rootNode ||\r\n    currentNode === rootNode ||\r\n    currentNode === document.body ||\r\n    currentNode === document.documentElement ||\r\n    !(currentNode instanceof Element)\r\n  ) {\r\n    return container ? container : null;\r\n  }\r\n\r\n  const newContainerId = currentNode.getAttribute('data-rendered-container-id');\r\n  if (newContainerId) {\r\n    const nextNode = document.querySelector(`[data-render-container-id~=\"${newContainerId}\"]`);\r\n\r\n    if (!nextNode) {\r\n      throw Error(`Origin node for container with id ${newContainerId} was not found`);\r\n    }\r\n\r\n    return findRenderContainer(nextNode, rootNode, nextNode);\r\n  }\r\n\r\n  return findRenderContainer(currentNode, rootNode, container);\r\n}\r\n\r\nexport function listen(elements: HTMLElement[] | (() => HTMLElement[]), callback: (event: Event) => void) {\r\n  const handler = {\r\n    elements,\r\n    callback,\r\n  };\r\n  handlers.push(handler);\r\n\r\n  return {\r\n    remove() {\r\n      const index = handlers.indexOf(handler);\r\n      if (index > -1) {\r\n        handlers.splice(index, 1);\r\n      }\r\n    },\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["listenFocusOutside.ts"],"names":["handlers","addHandleEvent","document","body","addEventListener","isFirefox","handleNativeFocus","leading","trailing","capture","isBrowser","readyState","window","event","target","srcElement","forEach","handler","elements","some","containsTargetOrRenderContainer","ReactDOM","unstable_batchedUpdates","callback","element","contains","container","findRenderContainer","node","rootNode","currentNode","parentNode","documentElement","Element","newContainerId","getAttribute","nextNode","querySelector","Error","listen","push","remove","index","indexOf","splice"],"mappings":"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","sourcesContent":["import ReactDOM from 'react-dom';\nimport debounce from 'lodash.debounce';\n\nimport { isBrowser, isFirefox } from './client';\n\ninterface FocusOutsideEventHandler {\n  elements: HTMLElement[] | (() => HTMLElement[]);\n  callback: (event: Event) => void;\n}\n\nconst handlers: FocusOutsideEventHandler[] = [];\n\nfunction addHandleEvent() {\n  /**\n   * Firefox do not supports 'focusin' event.\n   * Focus events bubbles multiple time\n   * without possibilty to cancell bubbling.\n   * Using debounce to capture only first focus event\n   * Mozilla Firefix\n   *   ¯\\_(ツ)_/¯\n   */\n  document.body.addEventListener(\n    isFirefox ? 'focus' : ('focusin' as 'focus'),\n    isFirefox ? debounce(handleNativeFocus, 0, { leading: true, trailing: false }) : handleNativeFocus,\n    { capture: true },\n  );\n}\n\nif (isBrowser) {\n  if (document.readyState === 'complete') {\n    addHandleEvent();\n  } else {\n    window.addEventListener('load', addHandleEvent);\n  }\n}\n\nfunction handleNativeFocus(event: UIEvent) {\n  // FIXME: not safe casting\n  const target: HTMLElement = (event.target || event.srcElement) as HTMLElement;\n\n  handlers.forEach((handler) => {\n    let elements = handler.elements;\n    if (typeof elements === 'function') {\n      elements = elements();\n    }\n\n    if (elements.some(containsTargetOrRenderContainer(target))) {\n      return;\n    }\n    ReactDOM.unstable_batchedUpdates(() => handler.callback(event));\n  });\n}\n\nexport function containsTargetOrRenderContainer(target: Element) {\n  return (element: Element) => {\n    if (!element) {\n      return false;\n    }\n    if (element.contains(target)) {\n      return true;\n    }\n    const container = findRenderContainer(target, element);\n    return !!container && element.contains(container);\n  };\n}\n\n/**\n * Searches RenderContainer placed in \"rootNode\" for \"node\"\n */\nexport function findRenderContainer(node: Element, rootNode: Element, container?: Element): Element | null {\n  const currentNode = node.parentNode;\n  if (\n    !currentNode ||\n    node === rootNode ||\n    currentNode === rootNode ||\n    currentNode === document.body ||\n    currentNode === document.documentElement ||\n    !(currentNode instanceof Element)\n  ) {\n    return container ? container : null;\n  }\n\n  const newContainerId = currentNode.getAttribute('data-rendered-container-id');\n  if (newContainerId) {\n    const nextNode = document.querySelector(`[data-render-container-id~=\"${newContainerId}\"]`);\n\n    if (!nextNode) {\n      throw Error(`Origin node for container with id ${newContainerId} was not found`);\n    }\n\n    return findRenderContainer(nextNode, rootNode, nextNode);\n  }\n\n  return findRenderContainer(currentNode, rootNode, container);\n}\n\nexport function listen(elements: HTMLElement[] | (() => HTMLElement[]), callback: (event: Event) => void) {\n  const handler = {\n    elements,\n    callback,\n  };\n  handlers.push(handler);\n\n  return {\n    remove() {\n      const index = handlers.indexOf(handler);\n      if (index > -1) {\n        handlers.splice(index, 1);\n      }\n    },\n  };\n}\n"]}

package/cjs/lib/locale/LOCALECONTEXT.md

@@ -1,246 +1,221 @@
-Локализации компонентов через контекст `React.Context<LocaleContextProps>`
-
-```typescript
-interface LocaleContextProps {
-  locale?: LocaleControls;
-  langCode?: LangCodes;
-}
-```
-
-Доступные языки
-
-```typescript
-enum LangCodes {
-  ru_RU = 'ru_RU',
-  en_GB = 'en_GB',
-}
-```
-
-<details><summary>LocaleControls</summary>
-
-```typescript
-interface LocaleControls {
-  Spinner?: SpinnerLocale;
-  TokenInput?: TokenInputLocale;
-  ComboBox?: ComboBoxLocale;
-  TopBar?: TopBarLocale;
-  Select?: SelectLocale;
-  Paging?: PagingLocale;
-  Logotype?: LogotypeLocale;
-  DatePicker?: DatePickerLocale;
-  Fias?: FiasLocale;
-}
-```
-
-</details>
-
-### Использование
-
-Дефолтная локализация `<TokenInput />`
-
-```jsx harmony
-import { LangCodes, LocaleContext, TokenInput, TokenInputType } from '@skbkontur/react-ui';
-const delay = ms => v => new Promise(resolve => setTimeout(resolve, ms, v));
-
-<LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
-  <TokenInput type={TokenInputType.Combined} getItems={() => Promise.resolve([]).then(delay(500))} />
-</LocaleContext.Provider>;
-```
-
-Кастомная локализация `<TokenInput />`
-
-```jsx harmony
-import { LangCodes, LocaleContext, TokenInput, TokenInputType } from '@skbkontur/react-ui';
-const delay = ms => v => new Promise(resolve => setTimeout(resolve, ms, v));
-
-const customLocale = {
-  TokenInput: {
-    addButtonComment: 'Press Enter or type Spacebar',
-  },
-};
-
-<LocaleContext.Provider value={{ locale: customLocale, langCode: LangCodes.en_GB }}>
-  <TokenInput type={TokenInputType.Combined} delimiters={[' ']} getItems={() => Promise.resolve([]).then(delay(500))} />
-</LocaleContext.Provider>;
-```
-
-Некоторые контролы используют компоненты других контролов.
-<br/>
-Для инкапсуляции локализации можно использовать несколько контекстов.
-
-```jsx harmony
-import { Gapped, LangCodes, LocaleContext, Spinner, TokenInput } from '@skbkontur/react-ui';
-
-const delay = ms => v => new Promise(resolve => setTimeout(resolve, ms, v));
-
-const customLocale = {
-  Spinner: {
-    loading: 'awaiting...',
-  },
-};
-
-<LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
-  <Gapped vertical gap={10}>
-    <LocaleContext.Provider value={{ langCode: LangCodes.en_GB, locale: customLocale }}>
-      <TokenInput getItems={() => Promise.resolve([]).then(delay(1500))} />
-    </LocaleContext.Provider>
-    <TokenInput getItems={() => Promise.resolve([]).then(delay(1500))} />
-    <Spinner />
-  </Gapped>
-</LocaleContext.Provider>;
-```
-
-Локализация функционального компонента через useContext.
-
-```jsx harmony
-import { useContext } from 'react';
-import { LangCodes, LocaleContext } from '@skbkontur/react-ui';
-
-const languages = {
-  [LangCodes.ru_RU]: 'Русский',
-  [LangCodes.en_GB]: 'English',
-}
-
-function LocalizedByHook() {
-  const { langCode } = useContext(LocaleContext);
-  return <div>{languages[langCode]}</div>;
-}
-
-<LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
-  <LocalizedByHook />
-</LocaleContext.Provider>
-```
-
-### Обзор всех доступных контролов
-
-```jsx harmony
-import {
-  ComboBox,
-  DateInput,
-  DatePicker,
-  Fias,
-  Gapped,
-  LocaleContext,
-  Logotype,
-  Paging,
-  Select,
-  Spinner,
-  TokenInput,
-  TopBar,
-  LangCodes,
-} from '@skbkontur/react-ui';
-import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
-
-const delay = ms => v => new Promise(resolve => setTimeout(resolve, ms, v));
-
-const items = [
-  { label: 'aaa', value: 1 },
-  { label: 'bbb', value: 2 },
-  { label: 'ccc', value: 3 },
-];
-
-const LocalizationControlNames = {
-  ComboBox: 'ComboBox',
-  Spinner: 'Spinner',
-  TokenInput: 'TokenInput',
-  TopBar: 'TopBar',
-  Select: 'Select',
-  Paging: 'Paging',
-  Logotype: 'Logotype',
-  DatePicker: 'DatePicker',
-  DateInput: 'DateInput',
-  Fias: 'Fias',
-};
-
-class LocalizationControls extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      langCode: LangCodes.ru_RU,
-      controlName: null,
-    };
-  }
-
-  render() {
-    const customLocaleRU = {};
-    const customLocaleEN = {};
-
-    const locale = this.state.langCode === LangCodes.en_GB ? customLocaleEN : customLocaleRU;
-
-    return (
-      <Gapped vertical gap={10}>
-        <Select
-          value={this.state.langCode}
-          placeholder="Выбрать язык"
-          items={Object.values(LangCodes)}
-          onValueChange={langCode => this.setState({ langCode })}
-        />
-        <Select
-          value={this.state.controlName}
-          placeholder="Выбрать контрол"
-          items={Object.values(LocalizationControlNames)}
-          onValueChange={controlName => this.setState({ controlName })}
-        />
-        <LocaleContext.Provider value={{ langCode: this.state.langCode, locale: locale }}>
-          {this.getControl(this.state.controlName)}
-        </LocaleContext.Provider>
-      </Gapped>
-    );
-  }
-
-  getControl(controlName) {
-    switch (controlName) {
-      case LocalizationControlNames.ComboBox:
-        return (
-          <ComboBox
-            getItems={str => Promise.resolve(items.filter(({ label }) => label.includes(str))).then(delay(500))}
-            onValueChange={({ label: langCode }) => this.setState({ langCode })}
-          />
-        );
-
-      case LocalizationControlNames.TokenInput:
-        return <TokenInput type={TokenInputType.Combined} getItems={() => Promise.resolve([]).then(delay(500))} />;
-
-      case LocalizationControlNames.Spinner:
-        return <Spinner />;
-
-      case LocalizationControlNames.DatePicker:
-        return <DatePicker value="30.12.2012" />;
-
-      case LocalizationControlNames.DateInput:
-        return <DateInput value="30.12.2012" />;
-
-      case LocalizationControlNames.TopBar:
-        return (
-          <TopBar>
-            <TopBar.Start>
-              <TopBar.ItemStatic>
-                <Logotype suffix="ui" withWidget />
-              </TopBar.ItemStatic>
-            </TopBar.Start>
-            <TopBar.End>
-              <TopBar.User userName="Alexander The Great" />
-              <TopBar.Divider />
-              <TopBar.Logout onClick={() => alert('Logout!')} />
-            </TopBar.End>
-          </TopBar>
-        );
-
-      case LocalizationControlNames.Logotype:
-        return <Logotype />;
-
-      case LocalizationControlNames.Select:
-        return <Select />;
-
-      case LocalizationControlNames.Paging:
-        return <Paging activePage={1} pagesCount={12} onPageChange={value => value} />;
-
-      case LocalizationControlNames.Fias:
-        return <Fias />;
-    }
-    return null;
-  }
-}
-
-<LocalizationControls />;
-```
+Локализации компонентов через контекст `React.Context<LocaleContextProps>`
+
+```typescript static
+interface LocaleContextProps {
+  locale?: LocaleControls;
+  langCode?: LangCodes;
+}
+```
+
+Доступные языки
+
+```typescript static
+enum LangCodes {
+  ru_RU = 'ru_RU',
+  en_GB = 'en_GB',
+}
+```
+
+LocaleControls
+
+```typescript static
+interface LocaleControls {
+  Spinner?: SpinnerLocale;
+  TokenInput?: TokenInputLocale;
+  ComboBox?: ComboBoxLocale;
+  Select?: SelectLocale;
+  Paging?: PagingLocale;
+  DatePicker?: DatePickerLocale;
+}
+```
+
+### Использование
+
+Дефолтная локализация `<TokenInput />`
+
+```jsx harmony
+import { LangCodes, LocaleContext, TokenInput, TokenInputType } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+<LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
+  <TokenInput type={TokenInputType.Combined} getItems={() => Promise.resolve([]).then(delay(500))} />
+</LocaleContext.Provider>;
+```
+
+Кастомная локализация `<TokenInput />`
+
+```jsx harmony
+import { LocaleContext, TokenInput, TokenInputType } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const customLocale = {
+  TokenInput: {
+    addButtonComment: 'Press Enter or type Spacebar',
+  },
+};
+
+<LocaleContext.Provider value={{ locale: customLocale }}>
+  <TokenInput type={TokenInputType.Combined} delimiters={[' ']} getItems={() => Promise.resolve([]).then(delay(500))} />
+</LocaleContext.Provider>;
+```
+
+Некоторые контролы используют компоненты других контролов.
+<br/>
+Для инкапсуляции локализации можно использовать несколько контекстов.
+
+```jsx harmony
+import { Gapped, LangCodes, LocaleContext, Spinner, TokenInput } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const customLocale = {
+  Spinner: {
+    loading: 'awaiting...',
+  },
+};
+
+<LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
+  <Gapped vertical gap={10}>
+    <LocaleContext.Provider value={{ locale: customLocale }}>
+      <TokenInput getItems={() => Promise.resolve([]).then(delay(1500))} />
+    </LocaleContext.Provider>
+    <TokenInput getItems={() => Promise.resolve([]).then(delay(1500))} />
+    <Spinner />
+  </Gapped>
+</LocaleContext.Provider>;
+```
+
+Локализация функционального компонента через useContext.
+
+```jsx harmony
+import { useContext } from 'react';
+import { LangCodes, LocaleContext } from '@skbkontur/react-ui';
+
+const languages = {
+  [LangCodes.ru_RU]: 'Русский',
+  [LangCodes.en_GB]: 'English',
+};
+
+function LocalizedByHook() {
+  const { langCode } = useContext(LocaleContext);
+  return <div>{languages[langCode]}</div>;
+}
+
+<LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
+  <LocalizedByHook />
+</LocaleContext.Provider>;
+```
+
+### Обзор всех доступных контролов
+
+```jsx harmony
+import {
+  ComboBox,
+  DateInput,
+  DatePicker,
+  Gapped,
+  LocaleContext,
+  Paging,
+  Select,
+  Spinner,
+  TokenInput,
+  LangCodes,
+} from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const items = [
+  { label: 'aaa', value: 1 },
+  { label: 'bbb', value: 2 },
+  { label: 'ccc', value: 3 },
+];
+
+const LocalizationControlNames = {
+  ComboBox: 'ComboBox',
+  Spinner: 'Spinner',
+  TokenInput: 'TokenInput',
+  Select: 'Select',
+  Paging: 'Paging',
+  DatePicker: 'DatePicker',
+  DateInput: 'DateInput',
+};
+
+class LocalizationControls extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      langCode: LangCodes.ru_RU,
+      controlName: null,
+    };
+  }
+
+  render() {
+    // попробуйте кастомизировать локаль любого контрола
+    const customLocaleRU = {};
+    const customLocaleEN = {};
+
+    const locale = this.state.langCode === LangCodes.en_GB ? customLocaleEN : customLocaleRU;
+
+    return (
+      <Gapped vertical gap={10}>
+        <Select
+          value={this.state.langCode}
+          placeholder="Выбрать язык"
+          items={Object.values(LangCodes)}
+          onValueChange={langCode => this.setState({ langCode })}
+        />
+        <Select
+          value={this.state.controlName}
+          placeholder="Выбрать контрол"
+          items={Object.values(LocalizationControlNames)}
+          onValueChange={controlName => this.setState({ controlName })}
+        />
+        <LocaleContext.Provider value={{ langCode: this.state.langCode, locale: locale }}>
+          {this.getControl(this.state.controlName)}
+        </LocaleContext.Provider>
+      </Gapped>
+    );
+  }
+
+  getControl(controlName) {
+    switch (controlName) {
+      case LocalizationControlNames.ComboBox:
+        return (
+          <ComboBox
+            getItems={str => Promise.resolve(items.filter(({ label }) => label.includes(str))).then(delay(500))}
+            onValueChange={({ label: langCode }) => this.setState({ langCode })}
+          />
+        );
+
+      case LocalizationControlNames.TokenInput:
+        return <TokenInput type={TokenInputType.Combined} getItems={() => Promise.resolve([]).then(delay(500))} />;
+
+      case LocalizationControlNames.Spinner:
+        return <Spinner />;
+
+      case LocalizationControlNames.DatePicker:
+        return <DatePicker value="30.12.2012" />;
+
+      case LocalizationControlNames.DateInput:
+        return <DateInput value="30.12.2012" />;
+
+      case LocalizationControlNames.Select:
+        return <Select />;
+
+      case LocalizationControlNames.Paging:
+        return <Paging activePage={1} pagesCount={12} onPageChange={value => value} />;
+    }
+    return null;
+  }
+}
+
+<LocalizationControls />;
+```
+
+### Локализация @skbkontur/react-ui-addons
+
+Компоненты `@skbkontur/react-ui-addons` так же поддерживают локализацию через `LocaleContext` из `@skbkontur/react-ui`.
+См. пример с кастомной локализацией. Дефолтные локали описаны для каждого компонента в [докумендации аддонов](https://ui.gitlab-pages.kontur.host/docs/#/react-ui-addons).

package/cjs/lib/locale/LocaleContext.js

@@ -8,6 +8,9 @@ var _constants = require("./constants");
 
 
 
-var LocaleContext = _react.default.createContext({
+var LocaleContext = /*#__PURE__*/_react.default.createContext({
   locale: {},
-  langCode: _constants.defaultLangCode });exports.LocaleContext = LocaleContext;
+  langCode: _constants.defaultLangCode });exports.LocaleContext = LocaleContext;
+
+
+LocaleContext.displayName = 'LocaleContext';

package/cjs/lib/locale/LocaleContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LocaleContext.ts"],"names":["LocaleContext","React","createContext","locale","langCode","defaultLangCode"],"mappings":"2JAAA;;;AAGA;;;;;;;AAOO,IAAMA,aAAa,GAAGC,eAAMC,aAAN,CAAwC;AACnEC,EAAAA,MAAM,EAAE,EAD2D;AAEnEC,EAAAA,QAAQ,EAAEC,0BAFyD,EAAxC,CAAtB,C","sourcesContent":["import React from 'react';\r\n\r\nimport { LangCodes, LocaleControls } from './types';\r\nimport { defaultLangCode } from './constants';\r\n\r\nexport interface LocaleContextProps {\r\n  locale?: LocaleControls;\r\n  langCode?: LangCodes;\r\n}\r\n\r\nexport const LocaleContext = React.createContext<LocaleContextProps>({\r\n  locale: {},\r\n  langCode: defaultLangCode,\r\n});\r\n\r\n"]}
+{"version":3,"sources":["LocaleContext.ts"],"names":["LocaleContext","React","createContext","locale","langCode","defaultLangCode","displayName"],"mappings":"2JAAA;;;AAGA;;;;;;;AAOO,IAAMA,aAAa,gBAAGC,eAAMC,aAAN,CAAwC;AACnEC,EAAAA,MAAM,EAAE,EAD2D;AAEnEC,EAAAA,QAAQ,EAAEC,0BAFyD,EAAxC,CAAtB,C;;;AAKPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import React from 'react';\n\nimport { LangCodes, LocaleControls } from './types';\nimport { defaultLangCode } from './constants';\n\nexport interface LocaleContextProps {\n  locale?: LocaleControls;\n  langCode?: LangCodes;\n}\n\nexport const LocaleContext = React.createContext<LocaleContextProps>({\n  locale: {},\n  langCode: defaultLangCode,\n});\n\nLocaleContext.displayName = 'LocaleContext';\n"]}

package/cjs/lib/locale/LocaleHelper.js

@@ -5,7 +5,7 @@ LocaleHelper = /*#__PURE__*/function () {
 
 
 
-  function LocaleHelper(locales, langCode) {if (langCode === void 0) {langCode = _constants.defaultLangCode;}this.locales = void 0;this.defaultLangCode = void 0;
+  function LocaleHelper(locales, langCode) {if (langCode === void 0) {langCode = _constants.defaultLangCode;}
     this.locales = locales;
     this.defaultLangCode = langCode;
   }var _proto = LocaleHelper.prototype;_proto.

package/cjs/lib/locale/LocaleHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LocaleHelper.ts"],"names":["LocaleHelper","locales","langCode","defaultLangCode","get"],"mappings":"qEAAA,wC;;;AAGaA,Y;;;;AAIX,wBAAmBC,OAAnB,EAAwDC,QAAxD,EAA+F,KAAvCA,QAAuC,cAAvCA,QAAuC,GAAjBC,0BAAiB,OAH9EF,OAG8E,eAF9EE,eAE8E;AAC7F,SAAKF,OAAL,GAAeA,OAAf;AACA,SAAKE,eAAL,GAAuBD,QAAvB;AACD,G;;AAEME,EAAAA,G,GAAP,aAAWF,QAAX,EAA0D,KAA/CA,QAA+C,cAA/CA,QAA+C,GAAzB,KAAKC,eAAoB;AACxD,WAAO,KAAKF,OAAL,CAAaC,QAAb,KAA0B,KAAKD,OAAL,CAAa,KAAKE,eAAlB,CAA1B,IAAiE,EAAxE;AACD,G","sourcesContent":["import { defaultLangCode } from './constants';\r\nimport { LangCodes } from './types';\r\n\r\nexport class LocaleHelper<C> {\r\n  private readonly locales: { [key in LangCodes]?: C };\r\n  private readonly defaultLangCode: LangCodes;\r\n\r\n  public constructor(locales: { [key in LangCodes]?: C }, langCode: LangCodes = defaultLangCode) {\r\n    this.locales = locales;\r\n    this.defaultLangCode = langCode;\r\n  }\r\n\r\n  public get(langCode: LangCodes = this.defaultLangCode): C {\r\n    return this.locales[langCode] || this.locales[this.defaultLangCode] || ({} as C);\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["LocaleHelper.ts"],"names":["LocaleHelper","locales","langCode","defaultLangCode","get"],"mappings":"qEAAA,wC;;;AAGaA,Y;;;;AAIX,wBAAmBC,OAAnB,EAAwDC,QAAxD,EAA+F,KAAvCA,QAAuC,cAAvCA,QAAuC,GAAjBC,0BAAiB;AAC7F,SAAKF,OAAL,GAAeA,OAAf;AACA,SAAKE,eAAL,GAAuBD,QAAvB;AACD,G;;AAEME,EAAAA,G,GAAP,aAAWF,QAAX,EAA0D,KAA/CA,QAA+C,cAA/CA,QAA+C,GAAzB,KAAKC,eAAoB;AACxD,WAAO,KAAKF,OAAL,CAAaC,QAAb,KAA0B,KAAKD,OAAL,CAAa,KAAKE,eAAlB,CAA1B,IAAiE,EAAxE;AACD,G","sourcesContent":["import { defaultLangCode } from './constants';\nimport { LangCodes } from './types';\n\nexport class LocaleHelper<C> {\n  private readonly locales: { [key in LangCodes]?: C };\n  private readonly defaultLangCode: LangCodes;\n\n  public constructor(locales: { [key in LangCodes]?: C }, langCode: LangCodes = defaultLangCode) {\n    this.locales = locales;\n    this.defaultLangCode = langCode;\n  }\n\n  public get(langCode: LangCodes = this.defaultLangCode): C {\n    return this.locales[langCode] || this.locales[this.defaultLangCode] || ({} as C);\n  }\n}\n"]}

package/cjs/lib/locale/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["constants.ts"],"names":["defaultLangCode","LangCodes","ru_RU"],"mappings":"wEAAA;;AAEO,IAAMA,eAAoC,GAAGC,iBAAUC,KAAvD,C","sourcesContent":["import { LangCodes } from './types';\r\n\r\nexport const defaultLangCode: Readonly<LangCodes> = LangCodes.ru_RU;\r\n"]}
+{"version":3,"sources":["constants.ts"],"names":["defaultLangCode","LangCodes","ru_RU"],"mappings":"wEAAA;;AAEO,IAAMA,eAAoC,GAAGC,iBAAUC,KAAvD,C","sourcesContent":["import { LangCodes } from './types';\n\nexport const defaultLangCode: Readonly<LangCodes> = LangCodes.ru_RU;\n"]}

package/cjs/lib/locale/decorators.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { LocaleContext } from './LocaleContext';
 import { LocaleHelper } from './LocaleHelper';
 import { LangCodes, LocaleControls } from './types';
-export declare function locale<C>(controlName: keyof LocaleControls, localeHelper: LocaleHelper<C>): <T extends new (...args: any[]) => React.Component<{}, {}, any>>(constructor: T) => {
+export declare function locale<C>(controlName: keyof LocaleControls, localeHelper: LocaleHelper<C>): <T extends new (...args: any[]) => React.Component>(constructor: T) => {
     new (...args: any[]): {
-        context: import("./LocaleContext").LocaleContextProps;
-        controlName: "Spinner" | "TokenInput" | "ComboBox" | "TopBar" | "Select" | "Paging" | "Logotype" | "DatePicker" | "Fias";
+        context: React.ContextType<typeof LocaleContext>;
+        controlName: keyof LocaleControls;
         localeHelper: LocaleHelper<C>;
         locale: C;
         readonly langCode: LangCodes;