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

package/cjs/components/RadioGroup/RadioGroup.js

@@ -6,8 +6,6 @@ var _Radio = require("../Radio");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _FocusTrap = require("../../internal/FocusTrap");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
@@ -70,16 +68,6 @@ var _RadioGroupContext = require("./RadioGroupContext");var _class, _RadioGroup;
 
 
 
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -98,13 +86,12 @@ var RadioGroupDataTids = exports.RadioGroupDataTids = {
 
 
 /**
+ * Группа радиокнопок `RadioGroup` используется для выбора одного значения из нескольких, когда вариантов выбора немного — 2–5.
  *
- * `children` может содержать любую разметку с компонентами Radio,
- * если не передан параметр `items`.
- * Каждому компоненту Radio нужно указать параметр `value`, такого же типа
- * как и параметр `value` самой радиогруппы.
+ * `children` может содержать любую разметку с компонентами Radio, если не передан параметр `items`.
+ * Каждому компоненту Radio нужно указать параметр `value`, такого же типа, как и параметр `value` самой радиогруппы.
  *
- * Значения активного элемента сравниваются по строгому равенству `===`
+ * Значения активного элемента сравниваются по строгому равенству `===`.
  */var
 
 RadioGroup = exports.RadioGroup = (0, _rootNode.rootNode)(_class = (_RadioGroup = /*#__PURE__*/function (_React$Component) {
@@ -122,8 +109,6 @@ RadioGroup = exports.RadioGroup = (0, _rootNode.rootNode)(_class = (_RadioGroup
 
 
 
-
-
   function RadioGroup(props) {var _this;
     _this = _React$Component.call(this, props) || this;_this.name = (0, _utils.getRandomID)();_this.getProps = (0, _createPropsGetter.createPropsGetter)(RadioGroup.defaultProps);_this.
 
@@ -192,17 +177,6 @@ RadioGroup = exports.RadioGroup = (0, _rootNode.rootNode)(_class = (_RadioGroup
 
 
 
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -240,7 +214,7 @@ RadioGroup = exports.RadioGroup = (0, _rootNode.rootNode)(_class = (_RadioGroup
       var itemProps = {
         key: _this.getKeyByItem(itemValue),
         className: (0, _Emotion.cx)((_cx = {}, _cx[
-        _RadioGroup2.styles.item(_this.theme)] = true, _cx[
+        _RadioGroup2.styles.item()] = true, _cx[
         _RadioGroup2.styles.itemFirst()] = index === 0, _cx[
         _RadioGroup2.styles.itemInline()] = !!_this.props.inline, _cx)
         )
@@ -262,7 +236,7 @@ RadioGroup = exports.RadioGroup = (0, _rootNode.rootNode)(_class = (_RadioGroup
 
     ref = function (element) {
       _this.node = element;
-    };_this.state = { activeItem: _this.props.defaultValue };return _this;}(0, _inheritsLoose2.default)(RadioGroup, _React$Component);var _proto = RadioGroup.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.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,onMouseOver = _this$props.onMouseOver,onMouseEnter = _this$props.onMouseEnter,onBlur = _this$props.onBlur,ariaDescribedby = _this$props['aria-describedby'],disabled = _this$props.disabled;var style = { width: width != null ? width : 'auto' };var handlers = { onMouseOver: onMouseOver, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave };return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: disabled })), /*#__PURE__*/_react.default.createElement(_FocusTrap.FocusTrap, { onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({ "data-tid": RadioGroupDataTids.root, ref: this.ref, style: style, className: _RadioGroup2.styles.root(), role: "radiogroup" }, handlers, { "aria-describedby": ariaDescribedby }), /*#__PURE__*/_react.default.createElement(_RadioGroupContext.RadioGroupContext.Provider, { value: this.getRadioGroupContextValue() }, this.renderChildren()))));} /**
+    };_this.state = { activeItem: _this.props.defaultValue };return _this;}(0, _inheritsLoose2.default)(RadioGroup, _React$Component);var _proto = RadioGroup.prototype;_proto.render = function render() {var _this$props = this.props,width = _this$props.width,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onMouseEnter = _this$props.onMouseEnter,onBlur = _this$props.onBlur,ariaDescribedby = _this$props['aria-describedby'],disabled = _this$props.disabled;var style = { width: width != null ? width : 'auto' };var handlers = { onMouseOver: onMouseOver, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave };return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: disabled })), /*#__PURE__*/_react.default.createElement(_FocusTrap.FocusTrap, { onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({ "data-tid": RadioGroupDataTids.root, ref: this.ref, style: style, className: _RadioGroup2.styles.root(), role: "radiogroup" }, handlers, { "aria-describedby": ariaDescribedby }), /*#__PURE__*/_react.default.createElement(_RadioGroupContext.RadioGroupContext.Provider, { value: this.getRadioGroupContextValue() }, this.renderChildren()))));} /**
    * @public
    */;_proto.focus = function focus() {var node = this.node;if (!node) {return;}var radio = node.querySelector('input[type="radio"]:checked'); // If no checked radios, try get first radio
     if (!radio || radio.disabled) {radio = node.querySelector('input[type="radio"]:not([disabled])');}if (radio) {radio.focus();}};_proto.renderChildren = function renderChildren() {var _this$props2 = this.props,items = _this$props2.items,children = _this$props2.children;(0, _invariant.default)(!items && children || items && !children, 'Either items or children must be passed, not both');return items ? mapItems(this.renderRadio, items) : children;};return RadioGroup;}(_react.default.Component), _RadioGroup.__KONTUR_REACT_UI__ = 'RadioGroup', _RadioGroup.displayName = 'RadioGroup', _RadioGroup.defaultProps = { renderItem: renderItem }, _RadioGroup.Prevent = _Prevent.Prevent, _RadioGroup)) || _class;function renderItem(_value, data) {

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_invariant","_utils","_Radio","_createPropsGetter","_FocusTrap","_ThemeContext","_CommonWrapper","_Emotion","_rootNode","_getVisualStateDataAttributes","_RadioGroup2","_Prevent","_RadioGroupContext","_class","_RadioGroup","RadioGroupDataTids","exports","root","RadioGroup","rootNode","_React$Component","props","_this","call","name","getRandomID","getProps","createPropsGetter","defaultProps","getRadioGroupContextValue","activeItem","getValue","onSelect","handleSelect","getName","disabled","error","warning","isControlled","value","state","isNonNullable","setState","onValueChange","renderRadio","itemValue","data","index","_cx","itemProps","key","getKeyByItem","className","cx","styles","item","theme","itemFirst","itemInline","inline","default","createElement","_extends2","role","Radio","renderItem","toKey","undefined","ref","element","node","defaultValue","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","renderMain","_this$props","width","onMouseLeave","onMouseOver","onMouseEnter","onBlur","ariaDescribedby","style","handlers","CommonWrapper","rootNodeRef","setRootNode","getVisualStateDataAttributes","FocusTrap","RadioGroupContext","Provider","renderChildren","focus","radio","querySelector","_this$props2","items","children","invariant","mapItems","React","Component","__KONTUR_REACT_UI__","displayName","Prevent","_value","fn","result","_iterator","_createForOfIteratorHelperLoose2","_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","_interopRequireDefault","require","_invariant","_utils","_Radio","_createPropsGetter","_FocusTrap","_CommonWrapper","_Emotion","_rootNode","_getVisualStateDataAttributes","_RadioGroup2","_Prevent","_RadioGroupContext","_class","_RadioGroup","RadioGroupDataTids","exports","root","RadioGroup","rootNode","_React$Component","props","_this","call","name","getRandomID","getProps","createPropsGetter","defaultProps","getRadioGroupContextValue","activeItem","getValue","onSelect","handleSelect","getName","disabled","error","warning","isControlled","value","state","isNonNullable","setState","onValueChange","renderRadio","itemValue","data","index","_cx","itemProps","key","getKeyByItem","className","cx","styles","item","itemFirst","itemInline","inline","default","createElement","_extends2","role","Radio","renderItem","toKey","undefined","ref","element","node","defaultValue","_inheritsLoose2","_proto","prototype","render","_this$props","width","onMouseLeave","onMouseOver","onMouseEnter","onBlur","ariaDescribedby","style","handlers","CommonWrapper","rootNodeRef","setRootNode","getVisualStateDataAttributes","FocusTrap","RadioGroupContext","Provider","renderChildren","focus","radio","querySelector","_this$props2","items","children","invariant","mapItems","React","Component","__KONTUR_REACT_UI__","displayName","Prevent","_value","fn","result","_iterator","_createForOfIteratorHelperLoose2","_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/cjs/components/RadioGroup/RadioGroup.md

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

package/cjs/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/cjs/components/RadioGroup/RadioGroup.styles.js

@@ -1,6 +1,5 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-
 var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
     return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      user-select: none;\n      cursor: default;\n      line-height: normal;\n    "])));
@@ -11,10 +10,10 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
 
   },
 
-  item: function item(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: table;\n      margin-top: ", ";\n      width: 100%;\n    "])),
+  item: function item() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: table;\n      margin-top: 0;\n      width: 100%;\n    "])));
+
 
-    t.radioGroupLegacyItemGap);
 
 
   },

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","styles","exports","memoizeStyle","root","css","_taggedTemplateLiteralLoose2","default","item","t","radioGroupLegacyItemGap","itemFirst","itemInline"],"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":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAAA,EAAG;IACL,WAAOC,YAAG,EAAAR,eAAA,KAAAA,eAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;;;EAMZ,CAAC;;EAEDC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOJ,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAEME,CAAC,CAACC,uBAAuB;;;EAG3C,CAAC;;EAEDC,SAAS,WAAAA,UAAA,EAAG;IACV,WAAON,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDK,UAAU,WAAAA,WAAA,EAAG;IACX,WAAOP,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","styles","exports","memoizeStyle","root","css","_taggedTemplateLiteralLoose2","default","item","itemFirst","itemInline"],"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":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAAA,EAAG;IACL,WAAOC,YAAG,EAAAR,eAAA,KAAAA,eAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;;;EAMZ,CAAC;;EAEDC,IAAI,WAAAA,KAAA,EAAG;IACL,WAAOH,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;;EAEDE,SAAS,WAAAA,UAAA,EAAG;IACV,WAAOJ,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDG,UAAU,WAAAA,WAAA,EAAG;IACX,WAAOL,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/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/cjs/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/cjs/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/cjs/components/ResponsiveLayout/ResponsiveLayout.js

@@ -12,10 +12,14 @@ var _useResponsiveLayout = require("./useResponsiveLayout");
 
 
 
+
+
+
+
+
 /**
- * Компонент для определения текущего лэйаута.
+ * Компонент `ResponsiveLayout` для определения текущего лэйаута.
  */
-
 function ResponsiveLayout(props) {var _props$children, _props$children2;
   var layoutFlags = (0, _useResponsiveLayout.useResponsiveLayout)({ customMediaQueries: props.customMediaQueries });
 

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_CommonWrapper","_useResponsiveLayout","ResponsiveLayout","props","_props$children","_props$children2","layoutFlags","useResponsiveLayout","customMediaQueries","useEffect","onLayoutChange","default","createElement","CommonWrapper","isFunction","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":"kLAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;;;AAGA,IAAAG,oBAAA,GAAAH,OAAA;;;;;;;;AAQA;AACA;AACA;;AAEO,SAASI,gBAAgBA,CAA2CC,KAA+B,EAAE,KAAAC,eAAA,EAAAC,gBAAA;EAC1G,IAAMC,WAAW,GAAG,IAAAC,wCAAmB,EAAI,EAAEC,kBAAkB,EAAEL,KAAK,CAACK,kBAAkB,CAAC,CAAC,CAAC;;EAE5F,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIN,KAAK,CAACO,cAAc,EAAE;MACxBP,KAAK,CAACO,cAAc,CAACJ,WAAW,CAAC;IACnC;EACF,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;;EAEjB;IACEV,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,cAAA,CAAAa,aAAa,EAAKV,KAAK;IACrB,IAAAW,iBAAU,EAACX,KAAK,CAACY,QAAQ,CAAC,IAAAX,eAAA,GAAGD,KAAK,CAACY,QAAQ,CAACT,WAAW,CAAC,YAAAF,eAAA,GAAI,IAAI,IAAAC,gBAAA,GAAGF,KAAK,CAACY,QAAQ,YAAAV,gBAAA,GAAI;IACzE,CAAC;;AAEpB;;AAEAH,gBAAgB,CAACc,mBAAmB,GAAG,kBAAkB;AACzDd,gBAAgB,CAACe,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_CommonWrapper","_useResponsiveLayout","ResponsiveLayout","props","_props$children","_props$children2","layoutFlags","useResponsiveLayout","customMediaQueries","useEffect","onLayoutChange","default","createElement","CommonWrapper","isFunction","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":"kLAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;;;AAGA,IAAAG,oBAAA,GAAAH,OAAA;;;;;;;;;;;;;AAaA;AACA;AACA;AACO,SAASI,gBAAgBA,CAA2CC,KAA+B,EAAE,KAAAC,eAAA,EAAAC,gBAAA;EAC1G,IAAMC,WAAW,GAAG,IAAAC,wCAAmB,EAAI,EAAEC,kBAAkB,EAAEL,KAAK,CAACK,kBAAkB,CAAC,CAAC,CAAC;;EAE5F,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIN,KAAK,CAACO,cAAc,EAAE;MACxBP,KAAK,CAACO,cAAc,CAACJ,WAAW,CAAC;IACnC;EACF,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;;EAEjB;IACEV,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,cAAA,CAAAa,aAAa,EAAKV,KAAK;IACrB,IAAAW,iBAAU,EAACX,KAAK,CAACY,QAAQ,CAAC,IAAAX,eAAA,GAAGD,KAAK,CAACY,QAAQ,CAACT,WAAW,CAAC,YAAAF,eAAA,GAAI,IAAI,IAAAC,gBAAA,GAAGF,KAAK,CAACY,QAAQ,YAAAV,gBAAA,GAAI;IACzE,CAAC;;AAEpB;;AAEAH,gBAAgB,CAACc,mBAAmB,GAAG,kBAAkB;AACzDd,gBAAgB,CAACe,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/cjs/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/cjs/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).

package/cjs/components/ScrollContainer/ScrollBar.d.ts

@@ -12,12 +12,19 @@ export interface ScrollBarState {
     scrollState: ScrollBarScrollState;
 }
 export interface ScrollBarProps {
+    /** Инвертирует цвет скроллбара. */
     invert: boolean;
+    /** Задает ось скроллбара. */
     axis: ScrollAxis;
+    /** Задает HTML-атрибут class. */
     className?: string;
+    /** Задает функцию, которая вызывается при скролле. */
     onScroll?: (axis: ScrollAxis, state: ScrollBarScrollState, prevState: ScrollBarScrollState) => void;
+    /** Задает отступ от края экрана. */
     offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];
+    /** Отключает анимацию. */
     disableAnimations?: boolean;
+    /** Определяет, виден ли скроллбар. */
     isVisible: boolean;
 }
 export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {

package/cjs/components/ScrollContainer/ScrollBar.js

@@ -26,6 +26,19 @@ var _ScrollContainer3 = require("./ScrollContainer.helpers");var
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+