@alfalab/core-components 29.3.0 → 30.0.1

package/plate/Component.d.ts

@@ -23,6 +23,26 @@ type PlateProps = {
      * Слот слева
      */
     leftAddons?: ReactNode;
+    /**
+     * Слот для субаддонов (слева от крестика)
+     */
+    subAddons?: ReactNode | Array<ReactElement<ButtonProps>>;
+    /**
+     * Включить/выключить скругление
+     */
+    rounded?: boolean;
+    /**
+     * Включить/Выключить обводку
+     */
+    border?: boolean;
+    /**
+     * Включить/выключить тени
+     */
+    shadow?: boolean;
+    /**
+     * Включить/выключить ограничение максимальной ширины контента в 560px
+     */
+    limitContentWidth?: boolean;
     /**
      * Дочерние элементы
      */
@@ -31,10 +51,14 @@ type PlateProps = {
      * Заголовок компонента
      */
     title?: ReactNode;
+    /**
+     * Вид заголовка
+     */
+    titleView?: 'bold' | 'light';
     /**
      * Вид компонента
      */
-    view?: 'common' | 'negative' | 'positive' | 'attention';
+    view?: 'common' | 'negative' | 'positive' | 'attention' | 'custom';
     /**
      * Набор действий
      */
@@ -51,6 +75,10 @@ type PlateProps = {
      * Дополнительный класс для контента
      */
     contentClassName?: string;
+    /**
+     * Дополнительный класс для субаддонов
+     */
+    subAddonsClassName?: string;
     /**
      * Обработчик клика по плашке
      */

package/plate/Component.js

@@ -5,6 +5,7 @@ var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
 var hooks = require('@alfalab/hooks');
 var coreComponentsButton = require('../button');
+var components_buttonList_component = require('./components/button-list/component.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,30 +13,35 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-var styles = {"component":"plate__component_8e6iw","foldable":"plate__foldable_8e6iw","focused":"plate__focused_8e6iw","inner":"plate__inner_8e6iw","common":"plate__common_8e6iw","negative":"plate__negative_8e6iw","positive":"plate__positive_8e6iw","attention":"plate__attention_8e6iw","isHidden":"plate__isHidden_8e6iw","leftAddons":"plate__leftAddons_8e6iw","title":"plate__title_8e6iw","content":"plate__content_8e6iw","isFolded":"plate__isFolded_8e6iw","contentContainer":"plate__contentContainer_8e6iw","withoutTitle":"plate__withoutTitle_8e6iw","contentInner":"plate__contentInner_8e6iw","closer":"plate__closer_8e6iw","folder":"plate__folder_8e6iw","buttons":"plate__buttons_8e6iw","button":"plate__button_8e6iw"};
+var styles = {"component":"plate__component_c6ckn","foldable":"plate__foldable_c6ckn","focused":"plate__focused_c6ckn","inner":"plate__inner_c6ckn","rounded":"plate__rounded_c6ckn","noBorder":"plate__noBorder_c6ckn","shadow":"plate__shadow_c6ckn","common":"plate__common_c6ckn","negative":"plate__negative_c6ckn","positive":"plate__positive_c6ckn","attention":"plate__attention_c6ckn","custom":"plate__custom_c6ckn","rect":"plate__rect_c6ckn","isHidden":"plate__isHidden_c6ckn","leftAddons":"plate__leftAddons_c6ckn","rightAddons":"plate__rightAddons_c6ckn","subAddons":"plate__subAddons_c6ckn","bold":"plate__bold_c6ckn","light":"plate__light_c6ckn","content":"plate__content_c6ckn","isFolded":"plate__isFolded_c6ckn","contentContainer":"plate__contentContainer_c6ckn","withoutTitle":"plate__withoutTitle_c6ckn","limitWidth":"plate__limitWidth_c6ckn","description":"plate__description_c6ckn","footer":"plate__footer_c6ckn","closer":"plate__closer_c6ckn","folder":"plate__folder_c6ckn","button":"plate__button_c6ckn"};
 require('./index.css');
 
+/* eslint-disable complexity */
 var Plate = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var hasCloser = _a.hasCloser, _f = _a.foldable, foldableProp = _f === void 0 ? false : _f, foldedProp = _a.folded, _g = _a.defaultFolded, defaultFolded = _g === void 0 ? true : _g, leftAddons = _a.leftAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _h = _a.view, view = _h === void 0 ? 'common' : _h, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle;
+    var _b, _c, _d, _e, _f;
+    var hasCloser = _a.hasCloser, _g = _a.foldable, foldableProp = _g === void 0 ? false : _g, foldedProp = _a.folded, _h = _a.defaultFolded, defaultFolded = _h === void 0 ? true : _h, _j = _a.rounded, rounded = _j === void 0 ? true : _j, _k = _a.limitContentWidth, limitContentWidth = _k === void 0 ? true : _k, leftAddons = _a.leftAddons, subAddons = _a.subAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _l = _a.titleView, titleView = _l === void 0 ? 'bold' : _l, _m = _a.view, view = _m === void 0 ? 'common' : _m, _o = _a.border, border = _o === void 0 ? view !== 'custom' : _o, _p = _a.shadow, shadow = _p === void 0 ? view === 'custom' : _p, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, subAddonsClassName = _a.subAddonsClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle;
     var plateRef = React.useRef(null);
     var contentRef = React.useRef(null);
+    var subAddonsRef = React.useRef(null);
     var focused = hooks.useFocus(plateRef, 'keyboard')[0];
-    var _j = React.useState(false), isHidden = _j[0], setIsHidden = _j[1];
-    var _k = React.useState(defaultFolded), foldedState = _k[0], setFoldedState = _k[1];
+    var _q = React.useState(false), isHidden = _q[0], setIsHidden = _q[1];
+    var _r = React.useState(defaultFolded), foldedState = _r[0], setFoldedState = _r[1];
     var uncontrolled = foldedProp === undefined;
     var foldable = !!title && !!children && foldableProp;
     var folded = uncontrolled ? foldedState : foldedProp;
     var hasButtons = !!buttons && typeof buttons !== 'boolean';
     var hasContent = children || hasButtons;
-    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    var hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
+    var hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
     var handleClick = React.useCallback(function (event) {
         var target = event.target;
         var eventInsideComponent = plateRef.current && plateRef.current.contains(target);
         var eventInsideContent = contentRef.current && contentRef.current.contains(target);
+        var eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
         var clickSimilarKeys = ['Enter', ' '].includes(event.key);
         var shouldChangeIsFolded = eventInsideComponent &&
             !eventInsideContent &&
+            !eventInsideSubAddons &&
             (event.type === 'click' || clickSimilarKeys);
         if (foldable && shouldChangeIsFolded) {
             if (uncontrolled) {
@@ -55,49 +61,44 @@ var Plate = React.forwardRef(function (_a, ref) {
             onClose(event);
         }
     }, [onClose]);
-    var renderButtons = function () {
-        if (buttonsIsArray) {
-            return (React__default['default'].createElement("div", { className: cn__default['default'](styles.buttons, buttonsClassName) }, buttons.map(function (button, index) {
-                return button
-                    ? React__default['default'].cloneElement(button, {
-                        // eslint-disable-next-line react/no-array-index-key
-                        key: index,
-                        size: 'xs',
-                        view: index === 0 ? 'outlined' : 'link',
-                        className: cn__default['default'](button.props.className, styles.button),
-                    })
-                    : null;
-            })));
-        }
-        return React__default['default'].createElement("div", { className: cn__default['default'](styles.buttons, buttonsClassName) }, buttons);
-    };
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[view], (_b = {},
-            _b[styles.foldable] = foldable,
-            _b[styles.focused] = focused,
-            _b[styles.isHidden] = hasCloser && isHidden,
-            _b[styles.isFolded] = foldable && folded,
-            _b), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default['default']([plateRef, ref]), 
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React__default['default'].createElement("div", { className: styles.inner },
-            leftAddons && React__default['default'].createElement("div", { className: styles.leftAddons }, leftAddons),
-            React__default['default'].createElement("div", { className: cn__default['default'](styles.contentContainer, contentClassName, (_c = {},
-                    _c[styles.withoutTitle] = !title,
-                    _c)) },
-                title && React__default['default'].createElement("div", { className: styles.title }, title),
-                hasContent && (React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles.content, (_d = {},
-                        _d[styles.isFolded] = foldable && folded,
+    return (React__default['default'].createElement("div", { className: cn__default['default']((_b = {},
+            _b[styles.shadow] = shadow,
+            _b[styles.rounded] = rounded,
+            _b)) },
+        React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[view], (_c = {},
+                _c[styles.foldable] = foldable,
+                _c[styles.focused] = focused,
+                _c[styles.isHidden] = hasCloser && isHidden,
+                _c[styles.isFolded] = foldable && folded,
+                _c[styles.rounded] = rounded,
+                _c[styles.rect] = !rounded,
+                _c[styles.noBorder] = !border,
+                _c), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default['default']([plateRef, ref]), 
+            /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+            tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
+            React__default['default'].createElement("div", { className: styles.inner },
+                leftAddons && React__default['default'].createElement("div", { className: styles.leftAddons }, leftAddons),
+                React__default['default'].createElement("div", { className: cn__default['default'](styles.contentContainer, contentClassName, (_d = {},
+                        _d[styles.withoutTitle] = !title && hasAnyAddons,
+                        _d[styles.limitWidth] = limitContentWidth,
                         _d)) },
-                    React__default['default'].createElement("div", { className: styles.contentInner },
-                        children,
-                        hasButtons ? renderButtons() : null)))),
-            foldable && (React__default['default'].createElement("div", { className: cn__default['default'](styles.folder, (_e = {},
-                    _e[styles.isFolded] = folded,
-                    _e)) })),
-            hasCloser && !foldable && (React__default['default'].createElement(coreComponentsButton.Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))));
+                    title && React__default['default'].createElement("div", { className: styles[titleView] }, title),
+                    hasContent && (React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles.content, (_e = {},
+                            _e[styles.isFolded] = foldable && folded,
+                            _e)) },
+                        children && (React__default['default'].createElement("div", { className: styles.description }, children)),
+                        hasButtons && (React__default['default'].createElement("div", { className: styles.footer },
+                            React__default['default'].createElement(components_buttonList_component.ButtonList, { buttons: buttons, containerClassName: buttonsClassName, buttonClassName: cn__default['default'](styles.button, buttonsClassName) })))))),
+                hasSubAddons && (React__default['default'].createElement("div", { ref: subAddonsRef, className: styles.subAddons },
+                    React__default['default'].createElement(components_buttonList_component.ButtonList, { buttons: subAddons, containerClassName: subAddonsClassName, buttonClassName: styles.button }))),
+                foldable && (React__default['default'].createElement("div", { className: styles.rightAddons },
+                    React__default['default'].createElement("div", { className: cn__default['default'](styles.folder, (_f = {},
+                            _f[styles.isFolded] = folded,
+                            _f)) }))),
+                hasCloser && !foldable && (React__default['default'].createElement("div", { className: styles.rightAddons },
+                    React__default['default'].createElement(coreComponentsButton.Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))))));
 });
+/* eslint-enable complexity */
 /**
  * Для отображения в сторибуке
  */

package/plate/components/button-list/component.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+type ButtonListProps = {
+    /**
+     * Кнопки для рендера
+     */
+    buttons: ReactNode;
+    /**
+     * Дополнительный класс для контейнера
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для кнопок
+     */
+    buttonClassName?: string;
+};
+declare const ButtonList: FC<ButtonListProps>;
+export { ButtonListProps, ButtonList };

package/plate/components/button-list/component.js

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var ButtonList = function (_a) {
+    var buttons = _a.buttons, buttonClassName = _a.buttonClassName, containerClassName = _a.containerClassName;
+    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    if (buttonsIsArray) {
+        return (React__default['default'].createElement("div", { className: containerClassName }, buttons.map(function (button, index) {
+            return button
+                ? React__default['default'].cloneElement(button, {
+                    // eslint-disable-next-line react/no-array-index-key
+                    key: index,
+                    size: 'xxs',
+                    view: index === 0 ? 'secondary' : 'link',
+                    className: cn__default['default'](button.props.className, buttonClassName),
+                })
+                : null;
+        })));
+    }
+    return React__default['default'].createElement("div", { className: containerClassName }, buttons);
+};
+
+exports.ButtonList = ButtonList;

package/plate/cssm/Component.d.ts

@@ -23,6 +23,26 @@ type PlateProps = {
      * Слот слева
      */
     leftAddons?: ReactNode;
+    /**
+     * Слот для субаддонов (слева от крестика)
+     */
+    subAddons?: ReactNode | Array<ReactElement<ButtonProps>>;
+    /**
+     * Включить/выключить скругление
+     */
+    rounded?: boolean;
+    /**
+     * Включить/Выключить обводку
+     */
+    border?: boolean;
+    /**
+     * Включить/выключить тени
+     */
+    shadow?: boolean;
+    /**
+     * Включить/выключить ограничение максимальной ширины контента в 560px
+     */
+    limitContentWidth?: boolean;
     /**
      * Дочерние элементы
      */
@@ -31,10 +51,14 @@ type PlateProps = {
      * Заголовок компонента
      */
     title?: ReactNode;
+    /**
+     * Вид заголовка
+     */
+    titleView?: 'bold' | 'light';
     /**
      * Вид компонента
      */
-    view?: 'common' | 'negative' | 'positive' | 'attention';
+    view?: 'common' | 'negative' | 'positive' | 'attention' | 'custom';
     /**
      * Набор действий
      */
@@ -51,6 +75,10 @@ type PlateProps = {
      * Дополнительный класс для контента
      */
     contentClassName?: string;
+    /**
+     * Дополнительный класс для субаддонов
+     */
+    subAddonsClassName?: string;
     /**
      * Обработчик клика по плашке
      */

package/plate/cssm/Component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var hooks = require('@alfalab/hooks');
 var coreComponentsButton = require('../../button/cssm');
 var styles = require('./index.module.css');
+var components_buttonList_component = require('./components/button-list/component.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,27 +15,32 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
+/* eslint-disable complexity */
 var Plate = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var hasCloser = _a.hasCloser, _f = _a.foldable, foldableProp = _f === void 0 ? false : _f, foldedProp = _a.folded, _g = _a.defaultFolded, defaultFolded = _g === void 0 ? true : _g, leftAddons = _a.leftAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _h = _a.view, view = _h === void 0 ? 'common' : _h, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle;
+    var _b, _c, _d, _e, _f;
+    var hasCloser = _a.hasCloser, _g = _a.foldable, foldableProp = _g === void 0 ? false : _g, foldedProp = _a.folded, _h = _a.defaultFolded, defaultFolded = _h === void 0 ? true : _h, _j = _a.rounded, rounded = _j === void 0 ? true : _j, _k = _a.limitContentWidth, limitContentWidth = _k === void 0 ? true : _k, leftAddons = _a.leftAddons, subAddons = _a.subAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _l = _a.titleView, titleView = _l === void 0 ? 'bold' : _l, _m = _a.view, view = _m === void 0 ? 'common' : _m, _o = _a.border, border = _o === void 0 ? view !== 'custom' : _o, _p = _a.shadow, shadow = _p === void 0 ? view === 'custom' : _p, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, subAddonsClassName = _a.subAddonsClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle;
     var plateRef = React.useRef(null);
     var contentRef = React.useRef(null);
+    var subAddonsRef = React.useRef(null);
     var focused = hooks.useFocus(plateRef, 'keyboard')[0];
-    var _j = React.useState(false), isHidden = _j[0], setIsHidden = _j[1];
-    var _k = React.useState(defaultFolded), foldedState = _k[0], setFoldedState = _k[1];
+    var _q = React.useState(false), isHidden = _q[0], setIsHidden = _q[1];
+    var _r = React.useState(defaultFolded), foldedState = _r[0], setFoldedState = _r[1];
     var uncontrolled = foldedProp === undefined;
     var foldable = !!title && !!children && foldableProp;
     var folded = uncontrolled ? foldedState : foldedProp;
     var hasButtons = !!buttons && typeof buttons !== 'boolean';
     var hasContent = children || hasButtons;
-    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    var hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
+    var hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
     var handleClick = React.useCallback(function (event) {
         var target = event.target;
         var eventInsideComponent = plateRef.current && plateRef.current.contains(target);
         var eventInsideContent = contentRef.current && contentRef.current.contains(target);
+        var eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
         var clickSimilarKeys = ['Enter', ' '].includes(event.key);
         var shouldChangeIsFolded = eventInsideComponent &&
             !eventInsideContent &&
+            !eventInsideSubAddons &&
             (event.type === 'click' || clickSimilarKeys);
         if (foldable && shouldChangeIsFolded) {
             if (uncontrolled) {
@@ -54,49 +60,44 @@ var Plate = React.forwardRef(function (_a, ref) {
             onClose(event);
         }
     }, [onClose]);
-    var renderButtons = function () {
-        if (buttonsIsArray) {
-            return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].buttons, buttonsClassName) }, buttons.map(function (button, index) {
-                return button
-                    ? React__default['default'].cloneElement(button, {
-                        // eslint-disable-next-line react/no-array-index-key
-                        key: index,
-                        size: 'xs',
-                        view: index === 0 ? 'outlined' : 'link',
-                        className: cn__default['default'](button.props.className, styles__default['default'].button),
-                    })
-                    : null;
-            })));
-        }
-        return React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].buttons, buttonsClassName) }, buttons);
-    };
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][view], (_b = {},
-            _b[styles__default['default'].foldable] = foldable,
-            _b[styles__default['default'].focused] = focused,
-            _b[styles__default['default'].isHidden] = hasCloser && isHidden,
-            _b[styles__default['default'].isFolded] = foldable && folded,
-            _b), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default['default']([plateRef, ref]), 
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React__default['default'].createElement("div", { className: styles__default['default'].inner },
-            leftAddons && React__default['default'].createElement("div", { className: styles__default['default'].leftAddons }, leftAddons),
-            React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].contentContainer, contentClassName, (_c = {},
-                    _c[styles__default['default'].withoutTitle] = !title,
-                    _c)) },
-                title && React__default['default'].createElement("div", { className: styles__default['default'].title }, title),
-                hasContent && (React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles__default['default'].content, (_d = {},
-                        _d[styles__default['default'].isFolded] = foldable && folded,
+    return (React__default['default'].createElement("div", { className: cn__default['default']((_b = {},
+            _b[styles__default['default'].shadow] = shadow,
+            _b[styles__default['default'].rounded] = rounded,
+            _b)) },
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][view], (_c = {},
+                _c[styles__default['default'].foldable] = foldable,
+                _c[styles__default['default'].focused] = focused,
+                _c[styles__default['default'].isHidden] = hasCloser && isHidden,
+                _c[styles__default['default'].isFolded] = foldable && folded,
+                _c[styles__default['default'].rounded] = rounded,
+                _c[styles__default['default'].rect] = !rounded,
+                _c[styles__default['default'].noBorder] = !border,
+                _c), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default['default']([plateRef, ref]), 
+            /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+            tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
+            React__default['default'].createElement("div", { className: styles__default['default'].inner },
+                leftAddons && React__default['default'].createElement("div", { className: styles__default['default'].leftAddons }, leftAddons),
+                React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].contentContainer, contentClassName, (_d = {},
+                        _d[styles__default['default'].withoutTitle] = !title && hasAnyAddons,
+                        _d[styles__default['default'].limitWidth] = limitContentWidth,
                         _d)) },
-                    React__default['default'].createElement("div", { className: styles__default['default'].contentInner },
-                        children,
-                        hasButtons ? renderButtons() : null)))),
-            foldable && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].folder, (_e = {},
-                    _e[styles__default['default'].isFolded] = folded,
-                    _e)) })),
-            hasCloser && !foldable && (React__default['default'].createElement(coreComponentsButton.Button, { className: styles__default['default'].closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))));
+                    title && React__default['default'].createElement("div", { className: styles__default['default'][titleView] }, title),
+                    hasContent && (React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles__default['default'].content, (_e = {},
+                            _e[styles__default['default'].isFolded] = foldable && folded,
+                            _e)) },
+                        children && (React__default['default'].createElement("div", { className: styles__default['default'].description }, children)),
+                        hasButtons && (React__default['default'].createElement("div", { className: styles__default['default'].footer },
+                            React__default['default'].createElement(components_buttonList_component.ButtonList, { buttons: buttons, containerClassName: buttonsClassName, buttonClassName: cn__default['default'](styles__default['default'].button, buttonsClassName) })))))),
+                hasSubAddons && (React__default['default'].createElement("div", { ref: subAddonsRef, className: styles__default['default'].subAddons },
+                    React__default['default'].createElement(components_buttonList_component.ButtonList, { buttons: subAddons, containerClassName: subAddonsClassName, buttonClassName: styles__default['default'].button }))),
+                foldable && (React__default['default'].createElement("div", { className: styles__default['default'].rightAddons },
+                    React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].folder, (_f = {},
+                            _f[styles__default['default'].isFolded] = folded,
+                            _f)) }))),
+                hasCloser && !foldable && (React__default['default'].createElement("div", { className: styles__default['default'].rightAddons },
+                    React__default['default'].createElement(coreComponentsButton.Button, { className: styles__default['default'].closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))))));
 });
+/* eslint-enable complexity */
 /**
  * Для отображения в сторибуке
  */

package/plate/cssm/components/button-list/component.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+type ButtonListProps = {
+    /**
+     * Кнопки для рендера
+     */
+    buttons: ReactNode;
+    /**
+     * Дополнительный класс для контейнера
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для кнопок
+     */
+    buttonClassName?: string;
+};
+declare const ButtonList: FC<ButtonListProps>;
+export { ButtonListProps, ButtonList };

package/plate/cssm/components/button-list/component.js

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var ButtonList = function (_a) {
+    var buttons = _a.buttons, buttonClassName = _a.buttonClassName, containerClassName = _a.containerClassName;
+    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    if (buttonsIsArray) {
+        return (React__default['default'].createElement("div", { className: containerClassName }, buttons.map(function (button, index) {
+            return button
+                ? React__default['default'].cloneElement(button, {
+                    // eslint-disable-next-line react/no-array-index-key
+                    key: index,
+                    size: 'xxs',
+                    view: index === 0 ? 'secondary' : 'link',
+                    className: cn__default['default'](button.props.className, buttonClassName),
+                })
+                : null;
+        })));
+    }
+    return React__default['default'].createElement("div", { className: containerClassName }, buttons);
+};
+
+exports.ButtonList = ButtonList;

package/plate/cssm/index.js

@@ -6,6 +6,7 @@ require('react-merge-refs');
 require('@alfalab/hooks');
 require('../../button/cssm');
 require('./index.module.css');
+require('./components/button-list/component.js');
 var Component = require('./Component.js');