@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

package/components/RadioGroup/RadioGroup.d.ts

@@ -3,15 +3,61 @@ import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { Prevent } from './Prevent';
 export interface RadioGroupProps<T = string | number> extends CommonProps {
+    /**
+     * Значение по умолчанию. Должно быть одним из значений дочерних радиокнопок
+     * или значений из параметра `items`
+     */
     defaultValue?: T;
+    /**
+     * Значение радиогруппы. Должно быть одним из значений радиокнопок.
+     * Если не указано, то компонент будет работать, как неконтролируемый
+     */
     value?: T;
-    items?: T[] | [T, React.ReactNode][];
+    /**
+     * Может быть использовано, если не передан параметр `children`
+     *
+     * Массив параметров радиокнопок. Может быть типа `Array<Value>` или
+     * `Array<[Value, Data]>`, где тип `Value` — значение радиокнопки, а `Data`
+     * — значение которое будет использовано вторым параметром в `renderItem`.
+     * Если тип `items: Array<Value>`, то он будет приведен к типу
+     * `Array<[Value, Value]>`
+     */
+    items?: T[] | Array<[T, React.ReactNode]>;
+    /**
+     * Аттрибут name для вложенных радиокнопок. Если не указан, то сгенерируется
+     * случайное имя
+     */
     name?: string;
+    /**
+     * Метод получения уникального ключа по элементу
+     * @param item
+     */
+    toKey?: (item: T) => string | number;
+    /**
+     * Дизейблит все радиокнопки
+     */
     disabled?: boolean;
+    /**
+     * Переводит все радиокнопки в состояние валидации: предупреждение.
+     */
     warning?: boolean;
+    /**
+     * Переводит все радиокнопки в состояние валидации: ошибка.
+     */
     error?: boolean;
+    /**
+     * Выравнивает элементы в строку. Не работает с `children`
+     */
     inline?: boolean;
+    /**
+     * Ширина радиогруппы. Не работает с `children`
+     */
     width?: React.CSSProperties['width'];
+    /**
+     * Метод отрисовки контента радиокнопки. Не работает с `children`.
+     *
+     * Принимает два аргумента: `(value: Value, data: Data) => React.Node`
+     */
     renderItem?: (itemValue: T, data: React.ReactNode) => React.ReactNode;
     /** Вызывается при изменении `value` */
     onValueChange?: (value: T) => void;
@@ -23,107 +69,43 @@ export interface RadioGroupProps<T = string | number> extends CommonProps {
 export interface RadioGroupState<T> {
     activeItem?: T;
 }
+export declare const RadioGroupDataTids: {
+    readonly root: "RadioGroup__root";
+};
+declare type DefaultProps = Required<Pick<RadioGroupProps<unknown>, 'renderItem'>>;
+/**
+ *
+ * `children` может содержать любую разметку с компонентами Radio,
+ * если не передан параметр `items`.
+ * Каждому компоненту Radio нужно указать параметр `value`, такого же типа
+ * как и параметр `value` самой радиогруппы.
+ *
+ * Значения активного элемента сравниваются по строгому равенству `===`
+ */
 export declare class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGroupState<T>> {
     static __KONTUR_REACT_UI__: string;
-    static childContextTypes: {
-        error: PropTypes.Requireable<boolean>;
-        name: PropTypes.Requireable<string>;
-        warning: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        activeItem: PropTypes.Requireable<any>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     static propTypes: {
-        /**
-         * Может быть использовано, если не передан параметр `items`
-         *
-         * `children` может содержать любую разметку с компонентами Radio.
-         * Каждому компоненту Radio нужно указать параметр `value`, такого же типа
-         * как и параметр `value` самой радиогруппы.
-         *
-         * Значения активного элемента сравниваются по строгому равенству `===`
-         */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Значение по умолчанию. Должно быть одним из значений дочерних радиокнопок
-         * или значей из параметра `items`
-         */
-        defaultValue: PropTypes.Requireable<any>;
-        /**
-         * Дизейблит все радиокнопки
-         */
         disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Переводит все радиокнопки в состоянии ошибки
-         */
         error: PropTypes.Requireable<boolean>;
-        /**
-         * Выравнивает элементы в строку. Не работает с `children`
-         */
         inline: PropTypes.Requireable<boolean>;
-        /**
-         * Может быть использовано, если не передан параметр `children`
-         *
-         * Массив параметров радиокнопок. Может быть типа `Array<Value>` или
-         * `Array<[Value, Data]>`, где тип `Value` — значение радиокнопки, а `Data`
-         * — значение которое будет использовано вторым параметром в `renderItem`.
-         * Если тип `items: Array<Value>`, то он будет приведен к типу
-         * `Array<[Value, Value]>`
-         */
-        items: PropTypes.Requireable<any>;
-        /**
-         * Аттрибут name для вложенных радиокнопок. Если не указан, то сгенерируется
-         * случайное имя по алгоритму
-         * [uuid v1](https://github.com/kelektiv/node-uuid#version-1)
-         */
         name: PropTypes.Requireable<string>;
-        /**
-         * Метод отрисовки контента радиокнопки. Не работает с `children`.
-         *
-         * Принимает два аргумента: `(value: Value, data: Data) => React.Node`
-         */
-        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Значение радиогруппы. Должно быть одним из значений радиокнопок.
-         * Если не указано, то компонент будет работать, как неконтроллируемый
-         */
-        value: PropTypes.Requireable<any>;
-        /**
-         * Переводит все радиокнопки в состоянии предупреждения
-         */
         warning: PropTypes.Requireable<boolean>;
-        /**
-         * Ширина радиогруппы. Не работает с `children`
-         */
         width: PropTypes.Requireable<string | number>;
-        /**
-         * Обработчик события при переключении радиокнопок.
-         * Имеет тип
-         * `(value: Value) => any`
-         */
-        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    static defaultProps: {
-        renderItem: typeof renderItem;
-    };
+    static defaultProps: DefaultProps;
     static Prevent: typeof Prevent;
     private theme;
     private node;
     private name;
     private getProps;
+    private setRootNode;
     constructor(props: RadioGroupProps<T>);
-    getChildContext(): {
-        activeItem: T | undefined;
-        onSelect: (value: T) => void;
-        name: string;
-        disabled: boolean | undefined;
-        error: boolean | undefined;
-        warning: boolean | undefined;
-    };
+    private getRadioGroupContextValue;
     render(): JSX.Element;
     renderMain(): JSX.Element;
     /**
@@ -136,7 +118,7 @@ export declare class RadioGroup<T> extends React.Component<RadioGroupProps<T>, R
     private handleSelect;
     private renderChildren;
     private renderRadio;
+    private getKeyByItem;
     private ref;
 }
-declare function renderItem<T>(_value: T, data: React.ReactNode): React.ReactNode;
 export {};

package/components/RadioGroup/RadioGroup.md

@@ -1,43 +1,43 @@
-```jsx harmony
-import { Gapped, Radio } from '@skbkontur/react-ui';
-
-let items = ['One', 'Two', 'Three', 'Four'];
-
-let simpleRadioGroup = (
-  <div>
-    <h2>Numbers</h2>
-    <RadioGroup name="number-simple" items={items} defaultValue="One" />
-  </div>
-);
-
-let complexRadioGroup = (
-  <div>
-    <h2>Numbers</h2>
-    <RadioGroup name="number-complex" defaultValue="3">
-      <Gapped gap={40}>
-        <Gapped vertical gap={0}>
-          <b>Odd</b>
-          <Radio value="1">One</Radio>
-          <Radio value="3">Three</Radio>
-          <Radio value="5" disabled>
-            Five
-          </Radio>
-          <Radio value="7">Seven</Radio>
-        </Gapped>
-        <Gapped vertical gap={0}>
-          <b>Even</b>
-          <Radio value="2">Two</Radio>
-          <Radio value="4">Four</Radio>
-          <Radio value="6">Six</Radio>
-          <Radio value="8">Eight</Radio>
-        </Gapped>
-      </Gapped>
-    </RadioGroup>
-  </div>
-);
-
-<div>
-  {simpleRadioGroup}
-  {complexRadioGroup}
-</div>;
-```
+```jsx harmony
+import { Gapped, Radio } from '@skbkontur/react-ui';
+
+let items = ['One', 'Two', 'Three', 'Four'];
+
+let simpleRadioGroup = (
+  <div>
+    <h2>Numbers</h2>
+    <RadioGroup name="number-simple" items={items} defaultValue="One" />
+  </div>
+);
+
+let complexRadioGroup = (
+  <div>
+    <h2>Numbers</h2>
+    <RadioGroup name="number-complex" defaultValue="3">
+      <Gapped gap={40}>
+        <Gapped vertical gap={0}>
+          <b>Odd</b>
+          <Radio value="1">One</Radio>
+          <Radio value="3">Three</Radio>
+          <Radio value="5" disabled>
+            Five
+          </Radio>
+          <Radio value="7">Seven</Radio>
+        </Gapped>
+        <Gapped vertical gap={0}>
+          <b>Even</b>
+          <Radio value="2">Two</Radio>
+          <Radio value="4">Four</Radio>
+          <Radio value="6">Six</Radio>
+          <Radio value="8">Eight</Radio>
+        </Gapped>
+      </Gapped>
+    </RadioGroup>
+  </div>
+);
+
+<div>
+  {simpleRadioGroup}
+  {complexRadioGroup}
+</div>;
+```

package/components/RadioGroup/RadioGroup.styles/RadioGroup.styles.js

@@ -3,9 +3,9 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      user-select: none;\n      cursor: default;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      user-select: none;\n      cursor: default;\n      line-height: normal;\n    "])));
   },
   item: function item(t) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: table;\n      margin-top: ", ";\n      width: 100%;\n    "])), t.radioGroupLegacyItemGap);
@@ -16,5 +16,4 @@ var styles = {
   itemInline: function itemInline() {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: inline-table;\n      margin-right: 15px;\n      margin-top: 0;\n      width: auto;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/RadioGroup/RadioGroup.styles/RadioGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RadioGroup.styles.ts"],"names":["css","memoizeStyle","styles","root","item","t","radioGroupLegacyItemGap","itemFirst","itemInline","jsStyles"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;;;AAKD,GAPY;;AASbI,EAAAA,IATa,gBASRC,CATQ,EASE;AACb,WAAOL,GAAP;;AAEgBK,IAAAA,CAAC,CAACC,uBAFlB;;;AAKD,GAfY;;AAiBbC,EAAAA,SAjBa,uBAiBD;AACV,WAAOP,GAAP;;;AAGD,GArBY;;AAuBbQ,EAAAA,UAvBa,wBAuBA;AACX,WAAOR,GAAP;;;;;;AAMD,GA9BY,EAAf;;;AAiCA,OAAO,IAAMS,QAAQ,GAAGR,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      display: inline-block;\r\n      user-select: none;\r\n      cursor: default;\r\n    `;\r\n  },\r\n\r\n  item(t: Theme) {\r\n    return css`\r\n      display: table;\r\n      margin-top: ${t.radioGroupLegacyItemGap};\r\n      width: 100%;\r\n    `;\r\n  },\r\n\r\n  itemFirst() {\r\n    return css`\r\n      margin-top: 0;\r\n    `;\r\n  },\r\n\r\n  itemInline() {\r\n    return css`\r\n      display: inline-table;\r\n      margin-right: 15px;\r\n      margin-top: 0;\r\n      width: auto;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["RadioGroup.styles.ts"],"names":["css","memoizeStyle","styles","root","item","t","radioGroupLegacyItemGap","itemFirst","itemInline"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;;;AAMD,GARgC;;AAUjCI,EAAAA,IAViC,gBAU5BC,CAV4B,EAUlB;AACb,WAAOL,GAAP;;AAEgBK,IAAAA,CAAC,CAACC,uBAFlB;;;AAKD,GAhBgC;;AAkBjCC,EAAAA,SAlBiC,uBAkBrB;AACV,WAAOP,GAAP;;;AAGD,GAtBgC;;AAwBjCQ,EAAAA,UAxBiC,wBAwBpB;AACX,WAAOR,GAAP;;;;;;AAMD,GA/BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      user-select: none;\n      cursor: default;\n      line-height: normal;\n    `;\n  },\n\n  item(t: Theme) {\n    return css`\n      display: table;\n      margin-top: ${t.radioGroupLegacyItemGap};\n      width: 100%;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-top: 0;\n    `;\n  },\n\n  itemInline() {\n    return css`\n      display: inline-table;\n      margin-right: 15px;\n      margin-top: 0;\n      width: auto;\n    `;\n  },\n});\n"]}

package/components/RadioGroup/RadioGroup.styles.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     root(): string;
     item(t: Theme): string;
     itemFirst(): string;

package/components/RadioGroup/RadioGroupContext/RadioGroupContext.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export var RadioGroupContext = /*#__PURE__*/React.createContext({
+  activeItem: undefined,
+  onSelect: function onSelect() {
+    return undefined;
+  },
+  name: '',
+  disabled: undefined,
+  error: undefined,
+  warning: undefined
+});
+RadioGroupContext.displayName = 'RadioGroupContext';

package/components/RadioGroup/RadioGroupContext/RadioGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RadioGroupContext.tsx"],"names":["React","RadioGroupContext","createContext","activeItem","undefined","onSelect","name","disabled","error","warning","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;AAWA,OAAO,IAAMC,iBAAiB,gBAAGD,KAAK,CAACE,aAAN,CAAgD;AAC/EC,EAAAA,UAAU,EAAEC,SADmE;AAE/EC,EAAAA,QAAQ,EAAE,4BAAMD,SAAN,EAFqE;AAG/EE,EAAAA,IAAI,EAAE,EAHyE;AAI/EC,EAAAA,QAAQ,EAAEH,SAJqE;AAK/EI,EAAAA,KAAK,EAAEJ,SALwE;AAM/EK,EAAAA,OAAO,EAAEL,SANsE,EAAhD,CAA1B;;;AASPH,iBAAiB,CAACS,WAAlB,GAAgC,mBAAhC","sourcesContent":["import React from 'react';\n\nexport interface RadioGroupContextType<T> {\n  activeItem: T | undefined;\n  onSelect: (value: T) => void;\n  name: string;\n  disabled: boolean | undefined;\n  error: boolean | undefined;\n  warning: boolean | undefined;\n}\n\nexport const RadioGroupContext = React.createContext<RadioGroupContextType<any>>({\n  activeItem: undefined,\n  onSelect: () => undefined,\n  name: '',\n  disabled: undefined,\n  error: undefined,\n  warning: undefined,\n});\n\nRadioGroupContext.displayName = 'RadioGroupContext';\n"]}

package/components/RadioGroup/RadioGroupContext/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/RadioGroup/RadioGroupContext.js",
+  "module": "RadioGroupContext",
+  "types": "../RadioGroupContext.d.ts",
+  "sideEffects": false
+}

package/components/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface RadioGroupContextType<T> {
+    activeItem: T | undefined;
+    onSelect: (value: T) => void;
+    name: string;
+    disabled: boolean | undefined;
+    error: boolean | undefined;
+    warning: boolean | undefined;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextType<any>>;

package/components/RadioGroup/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAd","sourcesContent":["export * from './RadioGroup';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAd","sourcesContent":["export * from './RadioGroup';\n"]}

package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { isFunction } from "../../../lib/utils";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { useResponsiveLayout } from "../useResponsiveLayout";
+/**
+ * Компонент для определения текущего лэйаута.
+ */
+
+export function ResponsiveLayout(props) {
+  var _props$children, _props$children2;
+
+  var layoutFlags = useResponsiveLayout({
+    customMediaQueries: props.customMediaQueries
+  });
+  useEffect(function () {
+    if (props.onLayoutChange) {
+      props.onLayoutChange(layoutFlags);
+    }
+  }, [layoutFlags]);
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, isFunction(props.children) ? (_props$children = props.children(layoutFlags)) != null ? _props$children : null : (_props$children2 = props.children) != null ? _props$children2 : null);
+}

package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveLayout.tsx"],"names":["React","useEffect","isFunction","CommonWrapper","useResponsiveLayout","ResponsiveLayout","props","layoutFlags","customMediaQueries","onLayoutChange","children"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;;AAEA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,aAAT,QAA8B,8BAA9B;;;AAGA,SAASC,mBAAT,QAAoC,uBAApC;;;;;;;;AAQA;AACA;AACA;;AAEA,OAAO,SAASC,gBAAT,CAAoEC,KAApE,EAAqG;AAC1G,MAAMC,WAAW,GAAGH,mBAAmB,CAAI,EAAEI,kBAAkB,EAAEF,KAAK,CAACE,kBAA5B,EAAJ,CAAvC;;AAEAP,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIK,KAAK,CAACG,cAAV,EAA0B;AACxBH,MAAAA,KAAK,CAACG,cAAN,CAAqBF,WAArB;AACD;AACF,GAJQ,EAIN,CAACA,WAAD,CAJM,CAAT;;AAMA;AACE,wBAAC,aAAD,EAAmBD,KAAnB;AACGJ,IAAAA,UAAU,CAACI,KAAK,CAACI,QAAP,CAAV,sBAA6BJ,KAAK,CAACI,QAAN,CAAeH,WAAf,CAA7B,8BAA4D,IAA5D,uBAAmED,KAAK,CAACI,QAAzE,+BAAqF,IADxF,CADF;;;AAKD","sourcesContent":["import React, { useEffect } from 'react';\n\nimport { isFunction } from '../../lib/utils';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags } from './types';\nimport { useResponsiveLayout } from './useResponsiveLayout';\n\ninterface ResponsiveLayoutProps<T extends MediaQueriesType = EmptyObject> {\n  onLayoutChange?: (layout: ResponsiveLayoutFlags<T>) => void;\n  children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags<T>) => React.ReactNode);\n  customMediaQueries?: T;\n}\n\n/**\n * Компонент для определения текущего лэйаута.\n */\n\nexport function ResponsiveLayout<T extends MediaQueriesType = EmptyObject>(props: ResponsiveLayoutProps<T>) {\n  const layoutFlags = useResponsiveLayout<T>({ customMediaQueries: props.customMediaQueries });\n\n  useEffect(() => {\n    if (props.onLayoutChange) {\n      props.onLayoutChange(layoutFlags);\n    }\n  }, [layoutFlags]);\n\n  return (\n    <CommonWrapper {...props}>\n      {isFunction(props.children) ? props.children(layoutFlags) ?? null : props.children ?? null}\n    </CommonWrapper>\n  );\n}\n"]}

package/components/ResponsiveLayout/ResponsiveLayout/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/ResponsiveLayout.js",
+  "module": "ResponsiveLayout",
+  "types": "../ResponsiveLayout.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/ResponsiveLayout.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags } from './types';
+interface ResponsiveLayoutProps<T extends MediaQueriesType = EmptyObject> {
+    onLayoutChange?: (layout: ResponsiveLayoutFlags<T>) => void;
+    children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags<T>) => React.ReactNode);
+    customMediaQueries?: T;
+}
+/**
+ * Компонент для определения текущего лэйаута.
+ */
+export declare function ResponsiveLayout<T extends MediaQueriesType = EmptyObject>(props: ResponsiveLayoutProps<T>): JSX.Element;
+export {};

package/components/ResponsiveLayout/ResponsiveLayout.md

@@ -0,0 +1,74 @@
+```ts static
+interface ResponsiveLayoutFlags {
+  isMobile: boolean;
+}
+```
+
+Компонент ожидает в себя функцию, в которую аргументом передается объект с флагом лэйаута.
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+class SomeComponent {
+  public render() {
+    return (
+      <ResponsiveLayout>
+        {
+          ({ isMobile }) => {
+            /* ... */
+          }
+        }
+      </ResponsiveLayout>
+    )
+  }
+}
+```
+
+Также существует проп `onLayoutChange`, который вызывает переданный в него коллбэк при изменении лэйаута. Аргументом передается объект с флагом.
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+class SomeComponent {
+  public render() {
+    return (
+      <div>
+        <ResponsiveLayout onLayoutChange={({ isMobile }) => console.log(isMobile)} />
+      </div>
+    )
+  }
+}
+```
+
+В компонент можно передать проп `customMediaQueries: MediaQueriesType`, который позволяет кастомизировать возвращаемые флаги:
+```ts static
+type MediaQueriesType = Record<string, string>;
+```
+1. Без кастомизации есть только флаг isMobile
+2. Поля из `customMediaQueries` дополняют список возвращаемых флагов в `ResponsiveLayoutFlags`
+3. При добавлении кастомного флага isMobile, значение дефолтного флага перезаписывается в пользу кастомного
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+const customMediaQueries = {
+  isTablet: '(min-width: 577px)',
+  isDesktop: '(min-width: 1280px)',
+};
+
+class SomeComponent {
+  public render() {
+    return (
+      <ResponsiveLayout customMediaQueries={customMediaQueries}>
+        {
+          ({ isMobile, isTablet, isDesktop }) => {
+            /* ... */
+          }
+        }
+      </ResponsiveLayout>
+    )
+  }
+}
+```
+
+Как альтернативу можно использовать хук [useResponsiveLayout](#/Mobiles).

package/components/ResponsiveLayout/ResponsiveLayoutEvents/ResponsiveLayoutEvents.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { canUseDOM } from "../../../lib/client";
+export var eventListenersMap = new Map();
+export function addResponsiveLayoutListener(mediaQuery, callback) {
+  if (eventListenersMap.has(mediaQuery)) {
+    addCallbackToMQListener(mediaQuery, callback);
+  } else {
+    createMQListener(mediaQuery, callback);
+  }
+
+  return {
+    remove: function remove() {
+      removeCallbackFromMQListener(mediaQuery, callback);
+    }
+  };
+}
+
+function addCallbackToMQListener(mediaQuery, callback) {
+  var eventListener = eventListenersMap.get(mediaQuery);
+
+  if (eventListener) {
+    eventListenersMap.set(mediaQuery, _extends({}, eventListener, {
+      listeners: [].concat(eventListener.listeners, [callback])
+    }));
+  }
+}
+
+function createMQListener(mediaQuery, callback) {
+  var mql = window.matchMedia(mediaQuery);
+  var newMediaQueryInfo = {
+    mql: mql,
+    listeners: [callback]
+  };
+  eventListenersMap.set(mediaQuery, newMediaQueryInfo);
+
+  if (mql.addEventListener) {
+    mql.addEventListener('change', changeCallback);
+  } else {
+    mql.addListener(changeCallback);
+  }
+}
+
+function removeCallbackFromMQListener(mediaQuery, callback) {
+  if (eventListenersMap.has(mediaQuery)) {
+    var eventListener = eventListenersMap.get(mediaQuery);
+
+    if (eventListener) {
+      var newListeners = eventListener.listeners.filter(function (listener) {
+        return listener !== callback;
+      });
+
+      if (newListeners.length === 0) {
+        if (eventListener.mql.removeEventListener) {
+          eventListener.mql.removeEventListener('change', changeCallback);
+        } else {
+          eventListener.mql.removeListener(changeCallback);
+        }
+
+        eventListenersMap["delete"](mediaQuery);
+        return;
+      }
+
+      eventListenersMap.set(mediaQuery, _extends({}, eventListener, {
+        listeners: [].concat(newListeners)
+      }));
+    }
+  }
+}
+
+export function checkMatches(mediaQuery) {
+  var _eventListener$mql$ma;
+
+  if (!canUseDOM) {
+    return false;
+  }
+
+  if (!eventListenersMap.has(mediaQuery)) {
+    return window.matchMedia(mediaQuery).matches;
+  }
+
+  var eventListener = eventListenersMap.get(mediaQuery);
+  return (_eventListener$mql$ma = eventListener == null ? void 0 : eventListener.mql.matches) != null ? _eventListener$mql$ma : false;
+}
+
+function changeCallback(e) {
+  var eventListener = eventListenersMap.get(e.media);
+
+  if (eventListener) {
+    eventListener.listeners.forEach(function (listener) {
+      listener(e);
+    });
+  }
+}

package/components/ResponsiveLayout/ResponsiveLayoutEvents/ResponsiveLayoutEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveLayoutEvents.ts"],"names":["canUseDOM","eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","listeners","mql","window","matchMedia","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","matches","e","media","forEach"],"mappings":"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","sourcesContent":["import { canUseDOM } from '../../lib/client';\n\ninterface mediaQueryData {\n  mql: MediaQueryList;\n  listeners: Array<(e: MediaQueryListEvent) => void>;\n}\n\nexport interface listenerToken {\n  remove: () => void;\n}\n\nexport const eventListenersMap = new Map<string, mediaQueryData>();\n\nexport function addResponsiveLayoutListener(\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(mediaQuery, callback);\n  }\n\n  return {\n    remove() {\n      removeCallbackFromMQListener(mediaQuery, callback);\n    },\n  };\n}\n\nfunction addCallbackToMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const eventListener = eventListenersMap.get(mediaQuery);\n\n  if (eventListener) {\n    eventListenersMap.set(mediaQuery, {\n      ...eventListener,\n      listeners: [...eventListener.listeners, callback],\n    });\n  }\n}\n\nfunction createMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = window.matchMedia(mediaQuery);\n  const newMediaQueryInfo: mediaQueryData = { mql, listeners: [callback] };\n\n  eventListenersMap.set(mediaQuery, newMediaQueryInfo);\n  if (mql.addEventListener) {\n    mql.addEventListener('change', changeCallback);\n  } else {\n    mql.addListener(changeCallback);\n  }\n}\n\nfunction removeCallbackFromMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  if (eventListenersMap.has(mediaQuery)) {\n    const eventListener = eventListenersMap.get(mediaQuery);\n\n    if (eventListener) {\n      const newListeners = eventListener.listeners.filter((listener) => listener !== callback);\n\n      if (newListeners.length === 0) {\n        if (eventListener.mql.removeEventListener) {\n          eventListener.mql.removeEventListener('change', changeCallback);\n        } else {\n          eventListener.mql.removeListener(changeCallback);\n        }\n        eventListenersMap.delete(mediaQuery);\n        return;\n      }\n\n      eventListenersMap.set(mediaQuery, {\n        ...eventListener,\n        listeners: [...newListeners],\n      });\n    }\n  }\n}\n\nexport function checkMatches(mediaQuery: string) {\n  if (!canUseDOM) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return window.matchMedia(mediaQuery).matches;\n  }\n\n  const eventListener = eventListenersMap.get(mediaQuery);\n  return eventListener?.mql.matches ?? false;\n}\n\nfunction changeCallback(e: MediaQueryListEvent) {\n  const eventListener = eventListenersMap.get(e.media);\n\n  if (eventListener) {\n    eventListener.listeners.forEach((listener) => {\n      listener(e);\n    });\n  }\n}\n"]}

package/components/ResponsiveLayout/ResponsiveLayoutEvents/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/ResponsiveLayoutEvents.js",
+  "module": "ResponsiveLayoutEvents",
+  "types": "../ResponsiveLayoutEvents.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/ResponsiveLayoutEvents.d.ts

@@ -0,0 +1,11 @@
+interface mediaQueryData {
+    mql: MediaQueryList;
+    listeners: Array<(e: MediaQueryListEvent) => void>;
+}
+export interface listenerToken {
+    remove: () => void;
+}
+export declare const eventListenersMap: Map<string, mediaQueryData>;
+export declare function addResponsiveLayoutListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void): listenerToken;
+export declare function checkMatches(mediaQuery: string): boolean;
+export {};