@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

package/components/RadioGroup/RadioGroup/RadioGroup.js

@@ -8,7 +8,6 @@ import { getRandomID, isNonNullable } from "../../../lib/utils";
 import { Radio } from "../../Radio";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { FocusTrap } from "../../../internal/FocusTrap";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
@@ -21,13 +20,12 @@ export var RadioGroupDataTids = {
 };
 
 /**
+ * Группа радиокнопок `RadioGroup` используется для выбора одного значения из нескольких, когда вариантов выбора немного — 2–5.
  *
- * `children` может содержать любую разметку с компонентами Radio,
- * если не передан параметр `items`.
- * Каждому компоненту Radio нужно указать параметр `value`, такого же типа
- * как и параметр `value` самой радиогруппы.
+ * `children` может содержать любую разметку с компонентами Radio, если не передан параметр `items`.
+ * Каждому компоненту Radio нужно указать параметр `value`, такого же типа, как и параметр `value` самой радиогруппы.
  *
- * Значения активного элемента сравниваются по строгому равенству `===`
+ * Значения активного элемента сравниваются по строгому равенству `===`.
  */
 export var RadioGroup = rootNode(_class = (_RadioGroup = /*#__PURE__*/function (_React$Component) {
   function RadioGroup(props) {
@@ -68,7 +66,7 @@ export var RadioGroup = rootNode(_class = (_RadioGroup = /*#__PURE__*/function (
       var _cx;
       var itemProps = {
         key: _this.getKeyByItem(itemValue),
-        className: cx((_cx = {}, _cx[styles.item(_this.theme)] = true, _cx[styles.itemFirst()] = index === 0, _cx[styles.itemInline()] = !!_this.props.inline, _cx))
+        className: cx((_cx = {}, _cx[styles.item()] = true, _cx[styles.itemFirst()] = index === 0, _cx[styles.itemInline()] = !!_this.props.inline, _cx))
       };
       return /*#__PURE__*/(
         React.createElement("span", _extends({}, itemProps, {
@@ -96,13 +94,6 @@ export var RadioGroup = rootNode(_class = (_RadioGroup = /*#__PURE__*/function (
   _inheritsLoose(RadioGroup, _React$Component);
   var _proto = RadioGroup.prototype;
   _proto.render = function render() {
-    var _this2 = this;
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
-    });
-  };
-  _proto.renderMain = function renderMain() {
     var _this$props = this.props,
       width = _this$props.width,
       onMouseLeave = _this$props.onMouseLeave,

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

@@ -1 +1 @@
-{"version":3,"names":["React","invariant","getRandomID","isNonNullable","Radio","createPropsGetter","FocusTrap","ThemeContext","CommonWrapper","cx","rootNode","getVisualStateDataAttributes","styles","Prevent","RadioGroupContext","RadioGroupDataTids","root","RadioGroup","_class","_RadioGroup","_React$Component","props","_this","call","name","getProps","defaultProps","getRadioGroupContextValue","activeItem","getValue","onSelect","handleSelect","getName","disabled","error","warning","isControlled","value","state","setState","onValueChange","renderRadio","itemValue","data","index","_cx","itemProps","key","getKeyByItem","className","item","theme","itemFirst","itemInline","inline","createElement","_extends","role","renderItem","toKey","undefined","ref","element","node","defaultValue","_inheritsLoose","_proto","prototype","render","_this2","Consumer","renderMain","_this$props","width","onMouseLeave","onMouseOver","onMouseEnter","onBlur","ariaDescribedby","style","handlers","rootNodeRef","setRootNode","Provider","renderChildren","focus","radio","querySelector","_this$props2","items","children","mapItems","Component","__KONTUR_REACT_UI__","displayName","_value","fn","result","_iterator","_createForOfIteratorHelperLoose","_step","done","entry","_normalizeEntry","normalizeEntry","push","Array","isArray"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\n\nimport { getRandomID, isNonNullable } from '../../lib/utils';\nimport { Radio } from '../Radio';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { FocusTrap } from '../../internal/FocusTrap';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles } from './RadioGroup.styles';\nimport { Prevent } from './Prevent';\nimport { RadioGroupContext, RadioGroupContextType } from './RadioGroupContext';\n\nexport interface RadioGroupProps<T = string | number> extends CommonProps {\n  /**\n   * Значение по умолчанию. Должно быть одним из значений дочерних радиокнопок\n   * или значений из параметра `items`\n   */\n  defaultValue?: T;\n  /**\n   * Значение радиогруппы. Должно быть одним из значений радиокнопок.\n   * Если не указано, то компонент будет работать, как неконтролируемый\n   */\n  value?: T;\n  /**\n   * Может быть использовано, если не передан параметр `children`\n   *\n   * Массив параметров радиокнопок. Может быть типа `Array<Value>` или\n   * `Array<[Value, Data]>`, где тип `Value` — значение радиокнопки, а `Data`\n   * — значение которое будет использовано вторым параметром в `renderItem`.\n   * Если тип `items: Array<Value>`, то он будет приведен к типу\n   * `Array<[Value, Value]>`\n   */\n  items?: T[] | Array<[T, React.ReactNode]>;\n  /**\n   * Аттрибут name для вложенных радиокнопок. Если не указан, то сгенерируется\n   * случайное имя\n   */\n  name?: string;\n\n  /**\n   * Метод получения уникального ключа по элементу\n   * @param item\n   */\n  toKey?: (item: T) => string | number;\n  /**\n   * Дизейблит все радиокнопки\n   */\n  disabled?: boolean;\n  /**\n   * Переводит все радиокнопки в состояние валидации: предупреждение.\n   */\n  warning?: boolean;\n  /**\n   * Переводит все радиокнопки в состояние валидации: ошибка.\n   */\n  error?: boolean;\n  /**\n   * Выравнивает элементы в строку. Не работает с `children`\n   */\n  inline?: boolean;\n  /**\n   * Ширина радиогруппы. Не работает с `children`\n   */\n  width?: React.CSSProperties['width'];\n  /**\n   * Метод отрисовки контента радиокнопки. Не работает с `children`.\n   *\n   * Принимает два аргумента: `(value: Value, data: Data) => React.Node`\n   */\n  renderItem?: (itemValue: T, data: React.ReactNode) => React.ReactNode;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n  /** Вызывается при изменении `value` */\n  onValueChange?: (value: T) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onMouseLeave?: () => any;\n  onMouseOver?: () => any;\n  onMouseEnter?: () => any;\n}\n\nexport interface RadioGroupState<T> {\n  activeItem?: T;\n}\n\nexport const RadioGroupDataTids = {\n  root: 'RadioGroup__root',\n} as const;\n\ntype DefaultProps = Required<Pick<RadioGroupProps<unknown>, 'renderItem'>>;\n\n/**\n *\n * `children` может содержать любую разметку с компонентами Radio,\n * если не передан параметр `items`.\n * Каждому компоненту Radio нужно указать параметр `value`, такого же типа\n * как и параметр `value` самой радиогруппы.\n *\n * Значения активного элемента сравниваются по строгому равенству `===`\n */\n@rootNode\nexport class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGroupState<T>> {\n  public static __KONTUR_REACT_UI__ = 'RadioGroup';\n  public static displayName = 'RadioGroup';\n\n  public static defaultProps: DefaultProps = {\n    renderItem,\n  };\n\n  public static Prevent = Prevent;\n\n  private theme!: Theme;\n\n  private node: Nullable<HTMLSpanElement>;\n  private name = getRandomID();\n  private getProps = createPropsGetter(RadioGroup.defaultProps);\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: RadioGroupProps<T>) {\n    super(props);\n\n    this.state = {\n      activeItem: this.props.defaultValue,\n    };\n  }\n\n  private getRadioGroupContextValue = (): RadioGroupContextType<T> => {\n    return {\n      activeItem: this.getValue(),\n      onSelect: this.handleSelect,\n      name: this.getName(),\n      disabled: this.props.disabled,\n      error: this.props.error,\n      warning: this.props.warning,\n    };\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const {\n      width,\n      onMouseLeave,\n      onMouseOver,\n      onMouseEnter,\n      onBlur,\n      'aria-describedby': ariaDescribedby,\n      disabled,\n    } = this.props;\n    const style = {\n      width: width ?? 'auto',\n    };\n    const handlers = {\n      onMouseOver,\n      onMouseEnter,\n      onMouseLeave,\n    };\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n        <FocusTrap onBlur={onBlur}>\n          <span\n            data-tid={RadioGroupDataTids.root}\n            ref={this.ref}\n            style={style}\n            className={styles.root()}\n            role=\"radiogroup\"\n            {...handlers}\n            aria-describedby={ariaDescribedby}\n          >\n            <RadioGroupContext.Provider value={this.getRadioGroupContextValue()}>\n              {this.renderChildren()}\n            </RadioGroupContext.Provider>\n          </span>\n        </FocusTrap>\n      </CommonWrapper>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus() {\n    const node = this.node;\n    if (!node) {\n      return;\n    }\n\n    let radio = node.querySelector('input[type=\"radio\"]:checked') as Nullable<HTMLInputElement>;\n\n    // If no checked radios, try get first radio\n    if (!radio || radio.disabled) {\n      radio = node.querySelector('input[type=\"radio\"]:not([disabled])') as Nullable<HTMLInputElement>;\n    }\n\n    if (radio) {\n      radio.focus();\n    }\n  }\n\n  private getValue = () => (this.isControlled() ? this.props.value : this.state.activeItem);\n\n  private getName = () => this.props.name || this.name;\n\n  private isControlled = () => isNonNullable(this.props.value);\n\n  private handleSelect = (value: T) => {\n    if (!this.isControlled()) {\n      this.setState({ activeItem: value });\n    }\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private renderChildren() {\n    const { items, children } = this.props;\n    invariant((!items && children) || (items && !children), 'Either items or children must be passed, not both');\n    return items ? mapItems<T>(this.renderRadio, items) : children;\n  }\n\n  private renderRadio = (itemValue: T, data: React.ReactNode, index: number): JSX.Element => {\n    const itemProps = {\n      key: this.getKeyByItem(itemValue),\n      className: cx({\n        [styles.item(this.theme)]: true,\n        [styles.itemFirst()]: index === 0,\n        [styles.itemInline()]: !!this.props.inline,\n      }),\n    };\n\n    return (\n      <span {...itemProps} role=\"presentation\">\n        <Radio value={itemValue}>{this.getProps().renderItem(itemValue, data)}</Radio>\n      </span>\n    );\n  };\n\n  private getKeyByItem = (itemValue: T) => {\n    if (this.props.toKey) {\n      return this.props.toKey(itemValue);\n    }\n    return typeof itemValue === 'string' || typeof itemValue === 'number' ? itemValue : undefined;\n  };\n\n  private ref = (element: HTMLSpanElement) => {\n    this.node = element;\n  };\n}\n\nfunction renderItem<T>(_value: T, data: React.ReactNode) {\n  return data;\n}\n\nfunction mapItems<T>(\n  fn: (value: T, data: React.ReactNode, index: number) => React.ReactNode,\n  items: T[] | Array<[T, React.ReactNode]>,\n) {\n  const result: React.ReactNode[] = [];\n  let index = 0;\n  for (const entry of items) {\n    const [value, data] = normalizeEntry<T>(entry);\n    result.push(fn(value, data, index));\n    ++index;\n  }\n  return result;\n}\n\nfunction normalizeEntry<T>(entry: T | [T, React.ReactNode]): [T, React.ReactNode] {\n  if (!Array.isArray(entry)) {\n    return [entry, entry as unknown as React.ReactNode];\n  }\n  return entry;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","invariant","getRandomID","isNonNullable","Radio","createPropsGetter","FocusTrap","CommonWrapper","cx","rootNode","getVisualStateDataAttributes","styles","Prevent","RadioGroupContext","RadioGroupDataTids","root","RadioGroup","_class","_RadioGroup","_React$Component","props","_this","call","name","getProps","defaultProps","getRadioGroupContextValue","activeItem","getValue","onSelect","handleSelect","getName","disabled","error","warning","isControlled","value","state","setState","onValueChange","renderRadio","itemValue","data","index","_cx","itemProps","key","getKeyByItem","className","item","itemFirst","itemInline","inline","createElement","_extends","role","renderItem","toKey","undefined","ref","element","node","defaultValue","_inheritsLoose","_proto","prototype","render","_this$props","width","onMouseLeave","onMouseOver","onMouseEnter","onBlur","ariaDescribedby","style","handlers","rootNodeRef","setRootNode","Provider","renderChildren","focus","radio","querySelector","_this$props2","items","children","mapItems","Component","__KONTUR_REACT_UI__","displayName","_value","fn","result","_iterator","_createForOfIteratorHelperLoose","_step","done","entry","_normalizeEntry","normalizeEntry","push","Array","isArray"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\n\nimport { getRandomID, isNonNullable } from '../../lib/utils';\nimport { Radio } from '../Radio';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { FocusTrap } from '../../internal/FocusTrap';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles } from './RadioGroup.styles';\nimport { Prevent } from './Prevent';\nimport { RadioGroupContext, RadioGroupContextType } from './RadioGroupContext';\n\nexport interface RadioGroupProps<T = string | number> extends CommonProps {\n  /** Задает значение по умолчанию. Должно быть одним из значений дочерних радиокнопок или значений из параметра `items`. */\n  defaultValue?: T;\n\n  /** Задает значение радиогруппы. Должно быть одним из значений радиокнопок.\n   * Если не указано, то компонент будет работать, как неконтролируемый. */\n  value?: T;\n\n  /** Задает массив параметров радиокнопок. Может быть типа `Array<Value>` или `Array<[Value, Data]>`,\n   * где тип `Value` — значение радиокнопки, а `Data` — значение которое будет использовано вторым параметром в `renderItem`.\n   * Тип `Array<Value>` будет приведен к типу `Array<[Value, Value]>`.\n   * Может быть использовано, если не передан параметр `children`. */\n  items?: T[] | Array<[T, React.ReactNode]>;\n\n  /** Устанавливает аттрибут name для вложенных радиокнопок. Если не указан, то сгенерируется случайное имя. */\n  name?: string;\n\n  /** Получает уникальный ключ по элементу\n   * @param item - элемент, по которуму нужно получить ключ. */\n  toKey?: (item: T) => string | number;\n\n  /** Делает все радиокнопки недоступными. */\n  disabled?: boolean;\n\n  /** Переводит все радиокнопки в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n\n  /** Переводит все радиокнопки в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Выравнивает элементы items в строку. Не работает с children. */\n  inline?: boolean;\n\n  /** Задает ширину радиогруппы. Не работает с `children`. */\n  width?: React.CSSProperties['width'];\n\n  /** Задает функцию, которая отображает контент радиокнопки. Не работает с `children`.\n   * @param {Value} itemValue - значение радиокнопки.\n   * @param {Data} data - значение для отрисовки радиокнопки. */\n  renderItem?: (itemValue: T, data: React.ReactNode) => React.ReactNode;\n\n  /** @ignore */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n\n  /** Задает функцию, которая вызывается при изменении значения радиогруппы (value). */\n  onValueChange?: (value: T) => void;\n\n  /** Задает функцию, которая вызывается при потере радиогруппой фокуса. */\n  onBlur?: (event: FocusEvent) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: () => any;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n  onMouseOver?: () => any;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave)  */\n  onMouseEnter?: () => any;\n}\n\nexport interface RadioGroupState<T> {\n  activeItem?: T;\n}\n\nexport const RadioGroupDataTids = {\n  root: 'RadioGroup__root',\n} as const;\n\ntype DefaultProps = Required<Pick<RadioGroupProps<unknown>, 'renderItem'>>;\n\n/**\n * Группа радиокнопок `RadioGroup` используется для выбора одного значения из нескольких, когда вариантов выбора немного — 2–5.\n *\n * `children` может содержать любую разметку с компонентами Radio, если не передан параметр `items`.\n * Каждому компоненту Radio нужно указать параметр `value`, такого же типа, как и параметр `value` самой радиогруппы.\n *\n * Значения активного элемента сравниваются по строгому равенству `===`.\n */\n@rootNode\nexport class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGroupState<T>> {\n  public static __KONTUR_REACT_UI__ = 'RadioGroup';\n  public static displayName = 'RadioGroup';\n\n  public static defaultProps: DefaultProps = {\n    renderItem,\n  };\n\n  public static Prevent = Prevent;\n\n  private node: Nullable<HTMLSpanElement>;\n  private name = getRandomID();\n  private getProps = createPropsGetter(RadioGroup.defaultProps);\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: RadioGroupProps<T>) {\n    super(props);\n\n    this.state = {\n      activeItem: this.props.defaultValue,\n    };\n  }\n\n  private getRadioGroupContextValue = (): RadioGroupContextType<T> => {\n    return {\n      activeItem: this.getValue(),\n      onSelect: this.handleSelect,\n      name: this.getName(),\n      disabled: this.props.disabled,\n      error: this.props.error,\n      warning: this.props.warning,\n    };\n  };\n\n  public render() {\n    const {\n      width,\n      onMouseLeave,\n      onMouseOver,\n      onMouseEnter,\n      onBlur,\n      'aria-describedby': ariaDescribedby,\n      disabled,\n    } = this.props;\n    const style = {\n      width: width ?? 'auto',\n    };\n    const handlers = {\n      onMouseOver,\n      onMouseEnter,\n      onMouseLeave,\n    };\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n        <FocusTrap onBlur={onBlur}>\n          <span\n            data-tid={RadioGroupDataTids.root}\n            ref={this.ref}\n            style={style}\n            className={styles.root()}\n            role=\"radiogroup\"\n            {...handlers}\n            aria-describedby={ariaDescribedby}\n          >\n            <RadioGroupContext.Provider value={this.getRadioGroupContextValue()}>\n              {this.renderChildren()}\n            </RadioGroupContext.Provider>\n          </span>\n        </FocusTrap>\n      </CommonWrapper>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus() {\n    const node = this.node;\n    if (!node) {\n      return;\n    }\n\n    let radio = node.querySelector('input[type=\"radio\"]:checked') as Nullable<HTMLInputElement>;\n\n    // If no checked radios, try get first radio\n    if (!radio || radio.disabled) {\n      radio = node.querySelector('input[type=\"radio\"]:not([disabled])') as Nullable<HTMLInputElement>;\n    }\n\n    if (radio) {\n      radio.focus();\n    }\n  }\n\n  private getValue = () => (this.isControlled() ? this.props.value : this.state.activeItem);\n\n  private getName = () => this.props.name || this.name;\n\n  private isControlled = () => isNonNullable(this.props.value);\n\n  private handleSelect = (value: T) => {\n    if (!this.isControlled()) {\n      this.setState({ activeItem: value });\n    }\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private renderChildren() {\n    const { items, children } = this.props;\n    invariant((!items && children) || (items && !children), 'Either items or children must be passed, not both');\n    return items ? mapItems<T>(this.renderRadio, items) : children;\n  }\n\n  private renderRadio = (itemValue: T, data: React.ReactNode, index: number): JSX.Element => {\n    const itemProps = {\n      key: this.getKeyByItem(itemValue),\n      className: cx({\n        [styles.item()]: true,\n        [styles.itemFirst()]: index === 0,\n        [styles.itemInline()]: !!this.props.inline,\n      }),\n    };\n\n    return (\n      <span {...itemProps} role=\"presentation\">\n        <Radio value={itemValue}>{this.getProps().renderItem(itemValue, data)}</Radio>\n      </span>\n    );\n  };\n\n  private getKeyByItem = (itemValue: T) => {\n    if (this.props.toKey) {\n      return this.props.toKey(itemValue);\n    }\n    return typeof itemValue === 'string' || typeof itemValue === 'number' ? itemValue : undefined;\n  };\n\n  private ref = (element: HTMLSpanElement) => {\n    this.node = element;\n  };\n}\n\nfunction renderItem<T>(_value: T, data: React.ReactNode) {\n  return data;\n}\n\nfunction mapItems<T>(\n  fn: (value: T, data: React.ReactNode, index: number) => React.ReactNode,\n  items: T[] | Array<[T, React.ReactNode]>,\n) {\n  const result: React.ReactNode[] = [];\n  let index = 0;\n  for (const entry of items) {\n    const [value, data] = normalizeEntry<T>(entry);\n    result.push(fn(value, data, index));\n    ++index;\n  }\n  return result;\n}\n\nfunction normalizeEntry<T>(entry: T | [T, React.ReactNode]): [T, React.ReactNode] {\n  if (!Array.isArray(entry)) {\n    return [entry, entry as unknown as React.ReactNode];\n  }\n  return entry;\n}\n"],"mappings":"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","ignoreList":[]}

package/components/RadioGroup/RadioGroup.d.ts

@@ -2,71 +2,46 @@ import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { Prevent } from './Prevent';
 export interface RadioGroupProps<T = string | number> extends CommonProps {
-    /**
-     * Значение по умолчанию. Должно быть одним из значений дочерних радиокнопок
-     * или значений из параметра `items`
-     */
+    /** Задает значение по умолчанию. Должно быть одним из значений дочерних радиокнопок или значений из параметра `items`. */
     defaultValue?: T;
-    /**
-     * Значение радиогруппы. Должно быть одним из значений радиокнопок.
-     * Если не указано, то компонент будет работать, как неконтролируемый
-     */
+    /** Задает значение радиогруппы. Должно быть одним из значений радиокнопок.
+     * Если не указано, то компонент будет работать, как неконтролируемый. */
     value?: T;
-    /**
-     * Может быть использовано, если не передан параметр `children`
-     *
-     * Массив параметров радиокнопок. Может быть типа `Array<Value>` или
-     * `Array<[Value, Data]>`, где тип `Value` — значение радиокнопки, а `Data`
-     * — значение которое будет использовано вторым параметром в `renderItem`.
-     * Если тип `items: Array<Value>`, то он будет приведен к типу
-     * `Array<[Value, Value]>`
-     */
+    /** Задает массив параметров радиокнопок. Может быть типа `Array<Value>` или `Array<[Value, Data]>`,
+     * где тип `Value` — значение радиокнопки, а `Data` — значение которое будет использовано вторым параметром в `renderItem`.
+     * Тип `Array<Value>` будет приведен к типу `Array<[Value, Value]>`.
+     * Может быть использовано, если не передан параметр `children`. */
     items?: T[] | Array<[T, React.ReactNode]>;
-    /**
-     * Аттрибут name для вложенных радиокнопок. Если не указан, то сгенерируется
-     * случайное имя
-     */
+    /** Устанавливает аттрибут name для вложенных радиокнопок. Если не указан, то сгенерируется случайное имя. */
     name?: string;
-    /**
-     * Метод получения уникального ключа по элементу
-     * @param item
-     */
+    /** Получает уникальный ключ по элементу
+     * @param item - элемент, по которуму нужно получить ключ. */
     toKey?: (item: T) => string | number;
-    /**
-     * Дизейблит все радиокнопки
-     */
+    /** Делает все радиокнопки недоступными. */
     disabled?: boolean;
-    /**
-     * Переводит все радиокнопки в состояние валидации: предупреждение.
-     */
+    /** Переводит все радиокнопки в состояние валидации "предупреждение". */
     warning?: boolean;
-    /**
-     * Переводит все радиокнопки в состояние валидации: ошибка.
-     */
+    /** Переводит все радиокнопки в состояние валидации "ошибка". */
     error?: boolean;
-    /**
-     * Выравнивает элементы в строку. Не работает с `children`
-     */
+    /** Выравнивает элементы items в строку. Не работает с children. */
     inline?: boolean;
-    /**
-     * Ширина радиогруппы. Не работает с `children`
-     */
+    /** Задает ширину радиогруппы. Не работает с `children`. */
     width?: React.CSSProperties['width'];
-    /**
-     * Метод отрисовки контента радиокнопки. Не работает с `children`.
-     *
-     * Принимает два аргумента: `(value: Value, data: Data) => React.Node`
-     */
+    /** Задает функцию, которая отображает контент радиокнопки. Не работает с `children`.
+     * @param {Value} itemValue - значение радиокнопки.
+     * @param {Data} data - значение для отрисовки радиокнопки. */
     renderItem?: (itemValue: T, data: React.ReactNode) => React.ReactNode;
-    /**
-     * Атрибут для указания id элемента(-ов), описывающих его
-     */
+    /** @ignore */
     'aria-describedby'?: AriaAttributes['aria-describedby'];
-    /** Вызывается при изменении `value` */
+    /** Задает функцию, которая вызывается при изменении значения радиогруппы (value). */
     onValueChange?: (value: T) => void;
+    /** Задает функцию, которая вызывается при потере радиогруппой фокуса. */
     onBlur?: (event: FocusEvent) => void;
+    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
     onMouseLeave?: () => any;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */
     onMouseOver?: () => any;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave)  */
     onMouseEnter?: () => any;
 }
 export interface RadioGroupState<T> {
@@ -77,20 +52,18 @@ export declare const RadioGroupDataTids: {
 };
 type DefaultProps = Required<Pick<RadioGroupProps<unknown>, 'renderItem'>>;
 /**
+ * Группа радиокнопок `RadioGroup` используется для выбора одного значения из нескольких, когда вариантов выбора немного — 2–5.
  *
- * `children` может содержать любую разметку с компонентами Radio,
- * если не передан параметр `items`.
- * Каждому компоненту Radio нужно указать параметр `value`, такого же типа
- * как и параметр `value` самой радиогруппы.
+ * `children` может содержать любую разметку с компонентами Radio, если не передан параметр `items`.
+ * Каждому компоненту Radio нужно указать параметр `value`, такого же типа, как и параметр `value` самой радиогруппы.
  *
- * Значения активного элемента сравниваются по строгому равенству `===`
+ * Значения активного элемента сравниваются по строгому равенству `===`.
  */
 export declare class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGroupState<T>> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     static defaultProps: DefaultProps;
     static Prevent: typeof Prevent;
-    private theme;
     private node;
     private name;
     private getProps;
@@ -98,7 +71,6 @@ export declare class RadioGroup<T> extends React.Component<RadioGroupProps<T>, R
     constructor(props: RadioGroupProps<T>);
     private getRadioGroupContextValue;
     render(): React.JSX.Element;
-    renderMain(): React.JSX.Element;
     /**
      * @public
      */

package/components/RadioGroup/RadioGroup.md

@@ -1,3 +1,4 @@
+### Базовый пример
 ```jsx harmony
 import { Gapped, Radio } from '@skbkontur/react-ui';
 

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

@@ -5,8 +5,8 @@ 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);
+  item: function item() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: table;\n      margin-top: 0;\n      width: 100%;\n    "])));
   },
   itemFirst: function itemFirst() {
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-top: 0;\n    "])));

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","item","t","_templateObject2","radioGroupLegacyItemGap","itemFirst","_templateObject3","itemInline","_templateObject4"],"sources":["RadioGroup.styles.ts"],"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"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;EAMZ,CAAC;;EAEDC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOP,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;;IAEME,CAAC,CAACE,uBAAuB;;;EAG3C,CAAC;;EAEDC,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;EAGZ,CAAC;;EAEDO,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","item","_templateObject2","itemFirst","_templateObject3","itemInline","_templateObject4"],"sources":["RadioGroup.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\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() {\n    return css`\n      display: table;\n      margin-top: 0;\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"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;EAMZ,CAAC;;EAEDC,IAAI,WAAAA,KAAA,EAAG;IACL,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;EAKZ,CAAC;;EAEDG,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;EAGZ,CAAC;;EAEDK,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}

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

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

package/components/RadioGroup/__creevey__/RadioGroup.creevey.mts

@@ -0,0 +1,86 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('RadioGroup', () => {
+  story('Vertical', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '#RadioGroup-wrap',
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('hovered', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hovered');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('mouseLeave', async (context) => {
+      // NOTE Firefox bug if click send right after click from previous test it results as double click
+      await delay(500);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'mouseLeave');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('arrow_down', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .sendKeys(Key.TAB)
+        .pause(100)
+        .sendKeys(Key.DOWN)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'arrow_down');
+    });
+  });
+});

package/components/RadioGroup/__docs__/RadioGroup.mdx

@@ -0,0 +1,28 @@
+import * as RadioGroupStories from './RadioGroup.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={RadioGroupStories} />
+
+# RadioGroup
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/selection-elements/radio/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A2669)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js

@@ -4,9 +4,8 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { useResponsiveLayout } from "../useResponsiveLayout";
 
 /**
- * Компонент для определения текущего лэйаута.
+ * Компонент `ResponsiveLayout` для определения текущего лэйаута.
  */
-
 export function ResponsiveLayout(props) {
   var _props$children, _props$children2;
   var layoutFlags = useResponsiveLayout({

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","isFunction","CommonWrapper","useResponsiveLayout","ResponsiveLayout","props","_props$children","_props$children2","layoutFlags","customMediaQueries","onLayoutChange","createElement","children","__KONTUR_REACT_UI__","displayName"],"sources":["ResponsiveLayout.tsx"],"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\nResponsiveLayout.__KONTUR_REACT_UI__ = 'ResponsiveLayout';\nResponsiveLayout.displayName = 'ResponsiveLayout';\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;;AAExC,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,8BAA8B;;;AAG5D,SAASC,mBAAmB,QAAQ,uBAAuB;;;;;;;;AAQ3D;AACA;AACA;;AAEA,OAAO,SAASC,gBAAgBA,CAA2CC,KAA+B,EAAE,KAAAC,eAAA,EAAAC,gBAAA;EAC1G,IAAMC,WAAW,GAAGL,mBAAmB,CAAI,EAAEM,kBAAkB,EAAEJ,KAAK,CAACI,kBAAkB,CAAC,CAAC,CAAC;;EAE5FT,SAAS,CAAC,YAAM;IACd,IAAIK,KAAK,CAACK,cAAc,EAAE;MACxBL,KAAK,CAACK,cAAc,CAACF,WAAW,CAAC;IACnC;EACF,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;;EAEjB;IACET,KAAA,CAAAY,aAAA,CAACT,aAAa,EAAKG,KAAK;IACrBJ,UAAU,CAACI,KAAK,CAACO,QAAQ,CAAC,IAAAN,eAAA,GAAGD,KAAK,CAACO,QAAQ,CAACJ,WAAW,CAAC,YAAAF,eAAA,GAAI,IAAI,IAAAC,gBAAA,GAAGF,KAAK,CAACO,QAAQ,YAAAL,gBAAA,GAAI;IACzE,CAAC;;AAEpB;;AAEAH,gBAAgB,CAACS,mBAAmB,GAAG,kBAAkB;AACzDT,gBAAgB,CAACU,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["React","useEffect","isFunction","CommonWrapper","useResponsiveLayout","ResponsiveLayout","props","_props$children","_props$children2","layoutFlags","customMediaQueries","onLayoutChange","createElement","children","__KONTUR_REACT_UI__","displayName"],"sources":["ResponsiveLayout.tsx"],"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  /** Задает функцию, которая вызывается при изменении лейаута. */\n  onLayoutChange?: (layout: ResponsiveLayoutFlags<T>) => void;\n\n  /** @ignore */\n  children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags<T>) => React.ReactNode);\n\n  /** Позволяет кастомизировать возвращаемые флаги. */\n  customMediaQueries?: T;\n}\n\n/**\n * Компонент `ResponsiveLayout` для определения текущего лэйаута.\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\nResponsiveLayout.__KONTUR_REACT_UI__ = 'ResponsiveLayout';\nResponsiveLayout.displayName = 'ResponsiveLayout';\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;;AAExC,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,8BAA8B;;;AAG5D,SAASC,mBAAmB,QAAQ,uBAAuB;;;;;;;;;;;;;AAa3D;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAA2CC,KAA+B,EAAE,KAAAC,eAAA,EAAAC,gBAAA;EAC1G,IAAMC,WAAW,GAAGL,mBAAmB,CAAI,EAAEM,kBAAkB,EAAEJ,KAAK,CAACI,kBAAkB,CAAC,CAAC,CAAC;;EAE5FT,SAAS,CAAC,YAAM;IACd,IAAIK,KAAK,CAACK,cAAc,EAAE;MACxBL,KAAK,CAACK,cAAc,CAACF,WAAW,CAAC;IACnC;EACF,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;;EAEjB;IACET,KAAA,CAAAY,aAAA,CAACT,aAAa,EAAKG,KAAK;IACrBJ,UAAU,CAACI,KAAK,CAACO,QAAQ,CAAC,IAAAN,eAAA,GAAGD,KAAK,CAACO,QAAQ,CAACJ,WAAW,CAAC,YAAAF,eAAA,GAAI,IAAI,IAAAC,gBAAA,GAAGF,KAAK,CAACO,QAAQ,YAAAL,gBAAA,GAAI;IACzE,CAAC;;AAEpB;;AAEAH,gBAAgB,CAACS,mBAAmB,GAAG,kBAAkB;AACzDT,gBAAgB,CAACU,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/components/ResponsiveLayout/ResponsiveLayout.d.ts

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

package/components/ResponsiveLayout/ResponsiveLayout.md

@@ -1,10 +1,11 @@
+### Вспомогательный интерфейс
 ```ts static
 interface ResponsiveLayoutFlags {
   isMobile: boolean;
 }
 ```
 
-Компонент ожидает в себя функцию, в которую аргументом передается объект с флагом лэйаута.
+### Компонент ожидает в себя функцию, в которую аргументом передается объект с флагом лэйаута.
 
 ```jsx static
 import { ResponsiveLayout } from '@skbkontur/react-ui';
@@ -24,7 +25,7 @@ class SomeComponent {
 }
 ```
 
-Также существует проп `onLayoutChange`, который вызывает переданный в него коллбэк при изменении лэйаута. Аргументом передается объект с флагом.
+### Также существует проп `onLayoutChange`, который вызывает переданный в него коллбэк при изменении лэйаута. Аргументом передается объект с флагом.
 
 ```jsx static
 import { ResponsiveLayout } from '@skbkontur/react-ui';
@@ -40,7 +41,7 @@ class SomeComponent {
 }
 ```
 
-В компонент можно передать проп `customMediaQueries: MediaQueriesType`, который позволяет кастомизировать возвращаемые флаги:
+### В компонент можно передать проп `customMediaQueries: MediaQueriesType`, который позволяет кастомизировать возвращаемые флаги:
 ```ts static
 type MediaQueriesType = Record<string, string>;
 ```

package/components/ResponsiveLayout/__docs__/ResponsiveLayout.mdx

@@ -0,0 +1,97 @@
+import * as ResponsiveLayoutStories from './ResponsiveLayout.docs.stories.tsx';
+import { ArgTypes, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={ResponsiveLayoutStories} />
+
+# ResponsiveLayout
+
+<Description />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+```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).