@skbkontur/react-ui 0.0.0-dd8159fe6c → 0.0.0-ecefada396

package/components/DropdownMenu/DropdownMenu.md

@@ -0,0 +1,154 @@
+Базовый пример меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с заданной шириной.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной шириной</Button>} menuWidth={350}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с заданной максимальной высотой.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной высотой</Button>} menuMaxHeight={150}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с выпадашкой слева по центру.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu positions={["left middle"]} caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню c шапкой и подвалом.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  header={<p>Это шапка в виде обычного текста</p>}
+  footer={<Button>А это подвал в виде кнопки</Button>}
+  caption={<Button use="primary">Открыть меню</Button>}
+  >
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с отключенной анимацией.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  disableAnimations
+  caption={<Button use="primary">Открыть меню без анимации</Button>}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+В `caption` можно передать любой элемент.
+
+```jsx harmony
+import MenuIcon from '@skbkontur/react-icons/Menu';
+import { MenuItem } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <MenuIcon size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+
+Условный рендер элементов меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
+
+```jsx harmony
+import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
+
+const [showItems, setShowItems] = React.useState(false);
+
+const hiddenItems = [
+  <MenuSeparator />,
+  <MenuItem>А я скрываюсь</MenuItem>,
+  <MenuItem>И я</MenuItem>,
+  <MenuItem>Я с вами</MenuItem>,
+];
+
+
+<Gapped>
+  <Button onClick={() => setShowItems(!showItems)}>
+    {showItems ? 'Спрятать' : 'Показать'} элементы
+  </Button>
+
+  <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+    <MenuItem>Меня видно всегда</MenuItem>
+    <MenuItem>Меня тоже</MenuItem>
+    <MenuItem>Ага, и меня!</MenuItem>
+    {showItems && hiddenItems}
+  </DropdownMenu>
+</Gapped>
+```

package/components/DropdownMenu/index/index.js

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

package/components/DropdownMenu/index/index.js.map

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

package/components/DropdownMenu/index/package.json

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

package/components/DropdownMenu/index.d.ts

@@ -1 +1 @@
-export { default, DropdownMenuProps } from './DropdownMenu';
+export * from './DropdownMenu';

package/components/DropdownMenu/package.json

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

package/components/FxInput/FxInput/FxInput.js

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from "../../Button";
+import { Group } from "../../Group";
+import { Input } from "../../Input";
+import { CurrencyInput } from "../../CurrencyInput";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { FunctionIcon, UndoIcon } from "../../../internal/icons/16px";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+/** Принимает все свойства `Input`'a */
+
+export var FxInput = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(FxInput, _React$Component);
+
+  function FxInput() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.input = null;
+    _this.getProps = createPropsGetter(FxInput.defaultProps);
+
+    _this.renderMain = function (props) {
+      var type = props.type,
+          onRestore = props.onRestore,
+          auto = props.auto,
+          refInput = props.refInput,
+          rest = _objectWithoutPropertiesLoose(props, ["type", "onRestore", "auto", "refInput"]);
+
+      var inputProps = {
+        align: 'right'
+      };
+      var button = null;
+
+      if (auto) {
+        inputProps.leftIcon = /*#__PURE__*/React.createElement(FunctionIcon, null);
+      } else {
+        button = /*#__PURE__*/React.createElement(Button, {
+          size: _this.props.size,
+          narrow: true,
+          onClick: _this.props.onRestore,
+          borderless: _this.props.borderless,
+          disabled: _this.props.disabled
+        }, /*#__PURE__*/React.createElement(UndoIcon, null));
+      }
+
+      return /*#__PURE__*/React.createElement(Group, {
+        width: _this.props.width
+      }, button, _this.getProps().type === 'currency' ? /*#__PURE__*/React.createElement(CurrencyInput, _extends({}, inputProps, rest, {
+        width: '100%',
+        ref: _this.refInput,
+        value: _this.props.value,
+        onValueChange: _this.props.onValueChange
+      })) : /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, rest, {
+        width: '100%',
+        ref: _this.refInput,
+        type: _this.props.type,
+        value: _this.props.value,
+        onValueChange: _this.props.onValueChange
+      })));
+    };
+
+    _this.focus = function () {
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };
+
+    _this.blur = function () {
+      if (_this.input) {
+        _this.input.blur();
+      }
+    };
+
+    _this.refInput = function (element) {
+      _this.input = element;
+
+      if (_this.props.refInput) {
+        _this.props.refInput(_this.input);
+      }
+    };
+
+    return _this;
+  }
+
+  var _proto = FxInput.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, this.renderMain);
+  };
+
+  return FxInput;
+}(React.Component);
+FxInput.__KONTUR_REACT_UI__ = 'FxInput';
+FxInput.propTypes = {
+  auto: PropTypes.bool,
+  type: PropTypes.string
+};
+FxInput.defaultProps = {
+  width: 250,
+  type: 'text',
+  value: ''
+};

package/components/FxInput/FxInput/FxInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FxInput.tsx"],"names":["React","PropTypes","Button","Group","Input","CurrencyInput","createPropsGetter","FunctionIcon","UndoIcon","CommonWrapper","FxInput","input","getProps","defaultProps","renderMain","props","type","onRestore","auto","refInput","rest","inputProps","align","button","leftIcon","size","borderless","disabled","width","value","onValueChange","focus","blur","element","render","Component","__KONTUR_REACT_UI__","propTypes","bool","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Button } from '../Button';\nimport { Group } from '../Group';\nimport { Input, InputProps, InputType } from '../Input';\nimport { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Override } from '../../typings/utility-types';\nimport { FunctionIcon, UndoIcon } from '../../internal/icons/16px';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\n\nexport interface FxInputProps\n  extends CommonProps,\n    Override<\n      CurrencyInputProps,\n      {\n        /** Авто-режим */\n        auto?: boolean;\n        /** Тип инпута */\n        type?: 'currency' | InputProps['type'];\n        /** onRestore */\n        onRestore?: () => void;\n        /** onValueChange */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n        /** Значение */\n        value?: React.ReactText;\n        /** ref Input'а */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n        /** Убрать лишние нули после запятой */\n        hideTrailingZeros?: boolean;\n      }\n    > {}\n\n/** Принимает все свойства `Input`'a */\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n\n  public static propTypes = {\n    auto: PropTypes.bool,\n    type: PropTypes.string,\n  };\n\n  public static defaultProps = {\n    width: 250,\n    type: 'text',\n    value: '',\n  };\n\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n\n  public render() {\n    return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n  }\n\n  public renderMain = (props: CommonWrapperRestProps<FxInputProps>) => {\n    const { type, onRestore, auto, refInput, ...rest } = props;\n    const inputProps: Partial<CurrencyInputProps> = {\n      align: 'right',\n    };\n\n    let button = null;\n\n    if (auto) {\n      inputProps.leftIcon = <FunctionIcon />;\n    } else {\n      button = (\n        <Button\n          size={this.props.size}\n          narrow\n          onClick={this.props.onRestore}\n          borderless={this.props.borderless}\n          disabled={this.props.disabled}\n        >\n          <UndoIcon />\n        </Button>\n      );\n    }\n\n    return (\n      <Group width={this.props.width}>\n        {button}\n        {this.getProps().type === 'currency' ? (\n          <CurrencyInput\n            {...inputProps}\n            {...rest}\n            width={'100%'}\n            ref={this.refInput}\n            value={this.props.value as CurrencyInputProps['value']}\n            onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n          />\n        ) : (\n          <Input\n            {...inputProps}\n            {...rest}\n            width={'100%'}\n            ref={this.refInput}\n            type={this.props.type as InputType}\n            value={this.props.value as InputProps['value']}\n            onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n          />\n        )}\n      </Group>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private refInput = (element: Input | CurrencyInput | null) => {\n    this.input = element;\n\n    if (this.props.refInput) {\n      this.props.refInput(this.input);\n    }\n  };\n}\n"]}

package/components/FxInput/FxInput/package.json

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

package/components/FxInput/FxInput.d.ts

@@ -1,36 +1,42 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import Input, { InputProps } from '../Input';
-import CurrencyInput, { CurrencyInputProps } from '../CurrencyInput';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input, InputProps } from '../Input';
+import { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';
 import { Override } from '../../typings/utility-types';
-export declare type FxInputProps = Override<CurrencyInputProps, {
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+export interface FxInputProps extends CommonProps, Override<CurrencyInputProps, {
     /** Авто-режим */
     auto?: boolean;
     /** Тип инпута */
     type?: 'currency' | InputProps['type'];
     /** onRestore */
     onRestore?: () => void;
-    /** onChange */
-    onChange: CurrencyInputProps['onChange'] | InputProps['onChange'];
+    /** onValueChange */
+    onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];
     /** Значение */
     value?: React.ReactText;
     /** ref Input'а */
     refInput?: (element: CurrencyInput | Input | null) => void;
-}>;
-export interface FxInputDefaultProps {
-    width: FxInputProps['width'];
-    type: FxInputProps['type'];
+    /** Убрать лишние нули после запятой */
+    hideTrailingZeros?: boolean;
+}> {
 }
 /** Принимает все свойства `Input`'a */
-declare class FxInput extends React.Component<FxInputProps> {
+export declare class FxInput extends React.Component<FxInputProps> {
+    static __KONTUR_REACT_UI__: string;
     static propTypes: {
         auto: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
     };
-    static defaultProps: FxInputDefaultProps;
+    static defaultProps: {
+        width: number;
+        type: string;
+        value: string;
+    };
     private input;
     private getProps;
     render(): JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<FxInputProps>) => JSX.Element;
     /**
      * @public
      */
@@ -41,4 +47,3 @@ declare class FxInput extends React.Component<FxInputProps> {
     blur: () => void;
     private refInput;
 }
-export default FxInput;

package/components/FxInput/FxInput.md

@@ -0,0 +1,16 @@
+```jsx harmony
+const [auto, setAuto] = React.useState(false);
+const [value, setValue] = React.useState();
+
+function handleValueChange(value) {
+  setAuto(false);
+  setValue(value);
+}
+
+function handleRestore() {
+  setAuto(true);
+  setValue('auto');
+}
+
+<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
+```

package/components/FxInput/index/index.js

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

package/components/FxInput/index/index.js.map

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

package/components/FxInput/index/package.json

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

package/components/FxInput/index.d.ts

@@ -1 +1 @@
-export { default, FxInputProps } from './FxInput';
+export * from './FxInput';

package/components/FxInput/package.json

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

package/components/Gapped/Gapped/Gapped.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+/**
+ * Контейнер, расстояние между элементами в котором равно `gap`.
+ */
+
+export var Gapped = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Gapped, _React$Component);
+
+  function Gapped() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Gapped.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, this.props.vertical ? this.renderVertical() : this.renderHorizontal());
+  };
+
+  _proto.getGapValue = function getGapValue() {
+    // DEPRECATED remove in 4.0
+    var propsGap = this.props.gap;
+
+    if (propsGap !== undefined && propsGap !== null) {
+      return propsGap;
+    } else {
+      return 8;
+    }
+  };
+
+  _proto.renderVertical = function renderVertical() {
+    var subsequentItemStyle = {
+      paddingTop: this.getGapValue()
+    };
+    var children = React.Children.toArray(this.props.children).filter(this.filterChildren).map(function (child, index) {
+      var style = index === 0 ? undefined : subsequentItemStyle;
+      return /*#__PURE__*/React.createElement("div", {
+        style: style,
+        key: index
+      }, child);
+    });
+    return /*#__PURE__*/React.createElement("div", null, children);
+  };
+
+  _proto.renderHorizontal = function renderHorizontal() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        verticalAlign = _this$props.verticalAlign,
+        wrap = _this$props.wrap;
+    var gap = this.getGapValue();
+
+    var itemStyle = _extends({
+      display: 'inline-block',
+      verticalAlign: verticalAlign
+    }, wrap ? {
+      marginLeft: gap,
+      marginTop: gap
+    } : {});
+
+    var rootStyle = wrap ? {
+      paddingTop: 1
+    } : {};
+    var contStyle = wrap ? {
+      marginTop: -gap - 1,
+      marginLeft: -gap
+    } : {
+      whiteSpace: 'nowrap'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: rootStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: contStyle
+    }, React.Children.toArray(children).filter(this.filterChildren).map(function (child, index) {
+      var marginLeft = index === 0 ? undefined : gap;
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: _extends({
+          marginLeft: marginLeft
+        }, itemStyle)
+      }, child);
+    })));
+  };
+
+  _proto.filterChildren = function filterChildren(child) {
+    return Boolean(child) || typeof child === 'number';
+  };
+
+  return Gapped;
+}(React.Component);
+Gapped.__KONTUR_REACT_UI__ = 'Gapped';
+Gapped.propTypes = {
+  /**
+  * Расстояние между элементами.
+  */
+  gap: PropTypes.number,
+
+  /**
+  * Располагать элементы вертикально.
+  */
+  vertical: PropTypes.bool,
+
+  /**
+  * Вертикальное выравнивание элементов.
+  */
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom'])
+};
+Gapped.defaultProps = {
+  wrap: false,
+  vertical: false,
+  verticalAlign: 'baseline'
+};

package/components/Gapped/Gapped/Gapped.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Gapped.tsx"],"names":["React","PropTypes","CommonWrapper","Gapped","render","props","vertical","renderVertical","renderHorizontal","getGapValue","propsGap","gap","undefined","subsequentItemStyle","paddingTop","children","Children","toArray","filter","filterChildren","map","child","index","style","verticalAlign","wrap","itemStyle","display","marginLeft","marginTop","rootStyle","contStyle","whiteSpace","Boolean","Component","__KONTUR_REACT_UI__","propTypes","number","bool","oneOf","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nexport interface GappedProps extends CommonProps {\n  /**\n   * Расстояние между элементами в пикселях\n   * @default 8\n   */\n  gap?: number;\n  /**\n   * Вертикальное выравнивание\n   * @default \"baseline\"\n   */\n  verticalAlign: 'top' | 'middle' | 'baseline' | 'bottom';\n  /**\n   * Расположение элементов по вертикали\n   * @default false\n   */\n  vertical: boolean;\n  /**\n   * Перенос элементов на новую строку при горизонтальном расположении\n   * @default false\n   */\n  wrap: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Контейнер, расстояние между элементами в котором равно `gap`.\n */\nexport class Gapped extends React.Component<GappedProps> {\n  public static __KONTUR_REACT_UI__ = 'Gapped';\n\n  public static propTypes = {\n    /**\n     * Расстояние между элементами.\n     */\n    gap: PropTypes.number,\n\n    /**\n     * Располагать элементы вертикально.\n     */\n    vertical: PropTypes.bool,\n\n    /**\n     * Вертикальное выравнивание элементов.\n     */\n    verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom']),\n  };\n\n  public static defaultProps = {\n    wrap: false,\n    vertical: false,\n    verticalAlign: 'baseline',\n  };\n\n  public render() {\n    return (\n      <CommonWrapper {...this.props}>\n        {this.props.vertical ? this.renderVertical() : this.renderHorizontal()}\n      </CommonWrapper>\n    );\n  }\n\n  private getGapValue() {\n    // DEPRECATED remove in 4.0\n    const { gap: propsGap } = this.props;\n    if (propsGap !== undefined && propsGap !== null) {\n      return propsGap;\n    } else {\n      return 8;\n    }\n  }\n\n  private renderVertical() {\n    const subsequentItemStyle: React.CSSProperties = {\n      paddingTop: this.getGapValue(),\n    };\n    const children = React.Children.toArray(this.props.children)\n      .filter(this.filterChildren)\n      .map((child, index) => {\n        const style = index === 0 ? undefined : subsequentItemStyle;\n        return (\n          <div style={style} key={index}>\n            {child}\n          </div>\n        );\n      });\n\n    return <div>{children}</div>;\n  }\n\n  private renderHorizontal() {\n    const { children, verticalAlign, wrap } = this.props;\n    const gap = this.getGapValue();\n    const itemStyle: React.CSSProperties = {\n      display: 'inline-block',\n      verticalAlign,\n      ...(wrap ? { marginLeft: gap, marginTop: gap } : {}),\n    };\n    const rootStyle: React.CSSProperties = wrap ? { paddingTop: 1 } : {};\n    const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };\n\n    return (\n      <div style={rootStyle}>\n        <div style={contStyle}>\n          {React.Children.toArray(children)\n            .filter(this.filterChildren)\n            .map((child, index) => {\n              const marginLeft = index === 0 ? undefined : gap;\n              return (\n                <span key={index} style={{ marginLeft, ...itemStyle }}>\n                  {child}\n                </span>\n              );\n            })}\n        </div>\n      </div>\n    );\n  }\n\n  private filterChildren(child: React.ReactNode): boolean {\n    return Boolean(child) || typeof child === 'number';\n  }\n}\n"]}

package/components/Gapped/Gapped/package.json

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

package/components/Gapped/Gapped.d.ts

@@ -1,15 +1,34 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-export interface GappedProps {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface GappedProps extends CommonProps {
+    /**
+     * Расстояние между элементами в пикселях
+     * @default 8
+     */
     gap?: number;
-    verticalAlign?: 'top' | 'middle' | 'baseline' | 'bottom';
-    vertical?: boolean;
+    /**
+     * Вертикальное выравнивание
+     * @default "baseline"
+     */
+    verticalAlign: 'top' | 'middle' | 'baseline' | 'bottom';
+    /**
+     * Расположение элементов по вертикали
+     * @default false
+     */
+    vertical: boolean;
+    /**
+     * Перенос элементов на новую строку при горизонтальном расположении
+     * @default false
+     */
+    wrap: boolean;
     children: React.ReactNode;
 }
 /**
  * Контейнер, расстояние между элементами в котором равно `gap`.
  */
-declare class Gapped extends React.Component<GappedProps> {
+export declare class Gapped extends React.Component<GappedProps> {
+    static __KONTUR_REACT_UI__: string;
     static propTypes: {
         /**
          * Расстояние между элементами.
@@ -25,11 +44,13 @@ declare class Gapped extends React.Component<GappedProps> {
         verticalAlign: PropTypes.Requireable<string>;
     };
     static defaultProps: {
-        gap: number;
+        wrap: boolean;
+        vertical: boolean;
         verticalAlign: string;
     };
     render(): JSX.Element;
-    private _renderVertical;
-    private _renderHorizontal;
+    private getGapValue;
+    private renderVertical;
+    private renderHorizontal;
+    private filterChildren;
 }
-export default Gapped;

package/components/Gapped/Gapped.md

@@ -0,0 +1,43 @@
+Вывод элементов с горизонтальным расположением
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Gapped gap={20}>
+  <Button use="primary">Сохранить</Button>
+  <Button>Отмена</Button>
+</Gapped>;
+```
+
+Вертикальное расположение
+
+```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
+<Gapped vertical gap={20}>
+  <Checkbox checked>Write todos</Checkbox>
+  <Checkbox initialIndeterminate>Work in progress</Checkbox>
+  <Checkbox>Make things done</Checkbox>
+</Gapped>;
+```
+
+По умолчанию `Gapped` выстраивает элементы в одну строчку, но с помощью свойства `wrap` можно включить перенос элементов на новую строку.
+При этом между строчками будет отступ равный значению свойста `gap`
+В таком случае из-за особенности верстки `Gapped` может перекрывать элементы расположенные сверху-слева.
+
+```jsx harmony
+import { Button, Checkbox, Toggle } from '@skbkontur/react-ui';
+
+<>
+  {"U Can't Touch This! => "}
+  <Toggle />
+
+  <div style={{ paddingTop: '10px', position: 'relative', width: '250px' }}>
+    <Gapped wrap gap={50}>
+      <Button use="primary">Сохранить</Button>
+      <Button>Отмена</Button>
+      <Checkbox>Я не робот</Checkbox>
+    </Gapped>
+  </div>
+</>;
+```

package/components/Gapped/index/index.js

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