@skbkontur/react-ui 0.0.0-38b6d1ada0 → 0.0.0-444dd4e7b3

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,20 +1,69 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import Prevent from './Prevent';
-import { SyntheticRadioEvent } from '../Radio';
-export declare type ItemType<T> = T | [T, React.ReactNode];
-export interface RadioGroupProps<T> {
+import React, { AriaAttributes } from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { Prevent } from './Prevent';
+export interface RadioGroupProps<T = string | number> extends CommonProps {
+    /**
+     * Значение по умолчанию. Должно быть одним из значений дочерних радиокнопок
+     * или значений из параметра `items`
+     */
     defaultValue?: T;
+    /**
+     * Значение радиогруппы. Должно быть одним из значений радиокнопок.
+     * Если не указано, то компонент будет работать, как неконтролируемый
+     */
     value?: T;
-    items?: Array<ItemType<T>>;
+    /**
+     * Может быть использовано, если не передан параметр `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;
-    onChange?: (event: SyntheticRadioEvent<T>, value: T) => any;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    /** Вызывается при изменении `value` */
+    onValueChange?: (value: T) => void;
     onBlur?: (event: FocusEvent) => void;
     onMouseLeave?: () => any;
     onMouseOver?: () => any;
@@ -23,118 +72,43 @@ export interface RadioGroupProps<T> {
 export interface RadioGroupState<T> {
     activeItem?: T;
 }
-declare class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGroupState<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>;
-        /**
-         * Обработчик события при переключении радиокнопок.
-         * Имеет тип
-         * `(event: SyntheticInputEvent<HTMLInputElement>, value: Value) => any`
-         */
-        onChange: 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 name;
     private getProps;
+    private setRootNode;
     constructor(props: RadioGroupProps<T>);
-    getChildContext(): {
-        activeItem: T | undefined;
-        onSelect: (event: SyntheticRadioEvent<T>, value: T) => void;
-        name: string;
-        disabled: boolean | undefined;
-        error: boolean | undefined;
-        warning: boolean | undefined;
-    };
+    private getRadioGroupContextValue;
     render(): JSX.Element;
+    renderMain(): JSX.Element;
     /**
      * @public
      */
     focus(): void;
-    private _getValue;
-    private _getName;
-    private _isControlled;
-    private _handleSelect;
-    private _renderChildren;
-    private _renderRadio;
-    private _ref;
+    private getValue;
+    private getName;
+    private isControlled;
+    private handleSelect;
+    private renderChildren;
+    private renderRadio;
+    private getKeyByItem;
+    private ref;
 }
-export default RadioGroup;
-declare function renderItem(_value: any, data: React.ReactNode): React.ReactNode;
+export {};

package/components/RadioGroup/RadioGroup.md

@@ -0,0 +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>;
+```

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

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    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);
+  },
+  itemFirst: function itemFirst() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-top: 0;\n    "])));
+  },
+  itemInline: function itemInline() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: inline-table;\n      margin-right: 15px;\n      margin-top: 0;\n      width: auto;\n    "])));
+  }
+});

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

@@ -0,0 +1 @@
+{"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/package.json

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

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

@@ -0,0 +1,7 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(): string;
+    item(t: Theme): string;
+    itemFirst(): string;
+    itemInline(): 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

@@ -0,0 +1 @@
+export * from "../RadioGroup";

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

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

package/components/RadioGroup/index/package.json

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

package/components/RadioGroup/index.d.ts

@@ -1 +1 @@
-export { default, RadioGroupProps, RadioGroupState, ItemType } from './RadioGroup';
+export * from './RadioGroup';

package/components/RadioGroup/package.json

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

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,98 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { globalObject } from '@skbkontur/global-object';
+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 = globalObject.matchMedia == null ? void 0 : globalObject.matchMedia(mediaQuery);
+
+  if (mql) {
+    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 (!globalObject.matchMedia) {
+    return false;
+  }
+
+  if (!eventListenersMap.has(mediaQuery)) {
+    var _globalObject$matchMe;
+
+    return !!((_globalObject$matchMe = globalObject.matchMedia(mediaQuery)) != null && _globalObject$matchMe.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":["globalObject","eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","listeners","mql","matchMedia","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","matches","e","media","forEach"],"mappings":"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","sourcesContent":["import { globalObject } from '@skbkontur/global-object';\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 = globalObject.matchMedia?.(mediaQuery);\n  if (mql) {\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}\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 (!globalObject.matchMedia) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return !!globalObject.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 {};