@alfalab/core-components 42.0.0-beta.1 → 42.0.0-beta.2

package/list/esm/Component-ce97382c.js

@@ -1,57 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React, { useContext, Children } from 'react';
-import cn from 'classnames';
-import { Typography } from '../../typography/esm';
-import { isItem } from './utils.js';
-
-var styles$1 = {"item":"list__item_1dra7","reversed":"list__reversed_1dra7","unorderedItem":"list__unorderedItem_1dra7","slot":"list__slot_1dra7","defaultColor":"list__defaultColor_1dra7","disc":"list__disc_1dra7","caption":"list__caption_1dra7"};
-require('./components/item/index.css');
-
-var Item = function (_a) {
-    var _b, _c;
-    var caption = _a.caption, children = _a.children;
-    var _d = useContext(ListContext), orderedList = _d.orderedList, markerType = _d.markerType, colorMarker = _d.colorMarker, reversed = _d.reversed, _e = _d.index, index = _e === void 0 ? 0 : _e, _f = _d.start, start = _f === void 0 ? 0 : _f;
-    var markerLowerAlpha = markerType === 'lower-alpha';
-    var itemClassNames = cn(styles$1.item, (_b = {},
-        _b[styles$1.unorderedItem] = markerLowerAlpha,
-        _b[styles$1.reversed] = reversed,
-        _b));
-    var isDisc = markerType === '•';
-    var count = start === 0 ? index + 1 : start + index;
-    var marker = orderedList || markerType === 'decimal' ? "".concat(count, ".") : markerType;
-    return (React.createElement("li", { className: cn(itemClassNames) },
-        !markerLowerAlpha && (React.createElement(Typography.Text, { tag: 'div', color: colorMarker, monospaceNumbers: true, view: 'primary-medium', className: cn(styles$1.slot, (_c = {},
-                _c[styles$1.disc] = isDisc && !orderedList,
-                _c[styles$1.defaultColor] = !colorMarker,
-                _c)) }, marker)),
-        React.createElement("div", null,
-            React.createElement(Typography.Text, { tag: 'div', view: 'primary-medium' }, children),
-            caption && (React.createElement(Typography.Text, { tag: 'div', view: 'primary-small', color: 'secondary', className: styles$1.caption }, caption)))));
-};
-Item.displayName = 'ListItem';
-
-var styles = {"list":"list__list_macnt","lowerAlpha":"list__lowerAlpha_macnt","decimal":"list__decimal_macnt","reversed":"list__reversed_macnt"};
-require('./index.css');
-
-var ListContext = React.createContext({});
-var ListComponent = function (_a) {
-    var _b;
-    var _c = _a.tag, tag = _c === void 0 ? 'ul' : _c, marker = _a.marker, className = _a.className, dataTestId = _a.dataTestId, colorMarker = _a.colorMarker, children = _a.children, reversed = _a.reversed, start = _a.start, restProps = __rest(_a, ["tag", "marker", "className", "dataTestId", "colorMarker", "children", "reversed", "start"]);
-    var markerType = marker || (tag === 'ul' ? '—' : 'decimal');
-    var alphaMarker = markerType === 'lower-alpha';
-    var decimalMarker = markerType === 'decimal';
-    var Component = tag === 'ul' || alphaMarker ? 'ul' : 'ol';
-    var orderedList = Component === 'ol';
-    var listClassNames = cn(styles.list, (_b = {},
-        _b[styles.lowerAlpha] = alphaMarker,
-        _b[styles.decimal] = decimalMarker,
-        _b[styles.reversed] = reversed,
-        _b), className);
-    /* eslint-disable react/jsx-no-constructed-context-values */
-    return (React.createElement(Component, __assign({ className: listClassNames, "data-test-id": dataTestId }, restProps), Children.map(children, function (child, index) { return (React.createElement(ListContext.Provider, { value: { orderedList: orderedList, markerType: markerType, colorMarker: colorMarker, reversed: reversed, index: index, start: start } }, isItem(child) ? child : React.createElement(Item, null, child))); })));
-};
-var List = Object.assign(ListComponent, {
-    Item: Item,
-});
-
-export { Item as I, ListContext as L, List as a };

package/list/modern/Component-3000577e.js

@@ -1,52 +0,0 @@
-import React, { useContext, Children } from 'react';
-import cn from 'classnames';
-import { Typography } from '../../typography/modern';
-import { isItem } from './utils.js';
-
-const styles$1 = {"item":"list__item_1dra7","reversed":"list__reversed_1dra7","unorderedItem":"list__unorderedItem_1dra7","slot":"list__slot_1dra7","defaultColor":"list__defaultColor_1dra7","disc":"list__disc_1dra7","caption":"list__caption_1dra7"};
-require('./components/item/index.css');
-
-const Item = ({ caption, children }) => {
-    const { orderedList, markerType, colorMarker, reversed, index = 0, start = 0, } = useContext(ListContext);
-    const markerLowerAlpha = markerType === 'lower-alpha';
-    const itemClassNames = cn(styles$1.item, {
-        [styles$1.unorderedItem]: markerLowerAlpha,
-        [styles$1.reversed]: reversed,
-    });
-    const isDisc = markerType === '•';
-    const count = start === 0 ? index + 1 : start + index;
-    const marker = orderedList || markerType === 'decimal' ? `${count}.` : markerType;
-    return (React.createElement("li", { className: cn(itemClassNames) },
-        !markerLowerAlpha && (React.createElement(Typography.Text, { tag: 'div', color: colorMarker, monospaceNumbers: true, view: 'primary-medium', className: cn(styles$1.slot, {
-                [styles$1.disc]: isDisc && !orderedList,
-                [styles$1.defaultColor]: !colorMarker,
-            }) }, marker)),
-        React.createElement("div", null,
-            React.createElement(Typography.Text, { tag: 'div', view: 'primary-medium' }, children),
-            caption && (React.createElement(Typography.Text, { tag: 'div', view: 'primary-small', color: 'secondary', className: styles$1.caption }, caption)))));
-};
-Item.displayName = 'ListItem';
-
-const styles = {"list":"list__list_macnt","lowerAlpha":"list__lowerAlpha_macnt","decimal":"list__decimal_macnt","reversed":"list__reversed_macnt"};
-require('./index.css');
-
-const ListContext = React.createContext({});
-const ListComponent = ({ tag = 'ul', marker, className, dataTestId, colorMarker, children, reversed, start, ...restProps }) => {
-    const markerType = marker || (tag === 'ul' ? '—' : 'decimal');
-    const alphaMarker = markerType === 'lower-alpha';
-    const decimalMarker = markerType === 'decimal';
-    const Component = tag === 'ul' || alphaMarker ? 'ul' : 'ol';
-    const orderedList = Component === 'ol';
-    const listClassNames = cn(styles.list, {
-        [styles.lowerAlpha]: alphaMarker,
-        [styles.decimal]: decimalMarker,
-        [styles.reversed]: reversed,
-    }, className);
-    /* eslint-disable react/jsx-no-constructed-context-values */
-    return (React.createElement(Component, { className: listClassNames, "data-test-id": dataTestId, ...restProps }, Children.map(children, (child, index) => (React.createElement(ListContext.Provider, { value: { orderedList, markerType, colorMarker, reversed, index, start } }, isItem(child) ? child : React.createElement(Item, null, child))))));
-};
-const List = Object.assign(ListComponent, {
-    Item,
-});
-
-export { Item as I, ListContext as L, List as a };

package/plate/Component.d.ts

@@ -1,106 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
-import { ComponentProps as ButtonProps } from "../button";
-type PlateProps = {
-    /**
-     * Управление наличием закрывающего крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Управление наличием стрелки скрытия контента
-     */
-    foldable?: boolean;
-    /**
-     * Управление видимостью контента (controlled)
-     */
-    folded?: boolean;
-    /**
-     * Начальное состояние контента при foldable={ true }
-     */
-    defaultFolded?: boolean;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот для субаддонов (слева от крестика)
-     */
-    subAddons?: ReactNode | Array<ReactElement<ButtonProps>>;
-    /**
-     * Включить/выключить скругление
-     */
-    rounded?: boolean;
-    /**
-     * Включить/Выключить обводку
-     */
-    border?: boolean;
-    /**
-     * Включить/выключить тени
-     */
-    shadow?: boolean;
-    /**
-     * Включить/выключить ограничение максимальной ширины контента в 560px
-     */
-    limitContentWidth?: boolean;
-    /**
-     * Дочерние элементы
-     */
-    children?: ReactNode;
-    /**
-     * Заголовок компонента
-     */
-    title?: ReactNode;
-    /**
-     * Вид заголовка
-     */
-    titleView?: 'bold' | 'light';
-    /**
-     * Вид компонента
-     */
-    view?: 'common' | 'negative' | 'positive' | 'attention' | 'custom';
-    /**
-     * Набор действий
-     */
-    buttons?: ReactNode | Array<ReactElement<ButtonProps>>;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для кнопок
-     */
-    buttonsClassName?: string;
-    /**
-     * Дополнительный класс для контента
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительный класс для субаддонов
-     */
-    subAddonsClassName?: string;
-    /**
-     * Обработчик клика по плашке
-     */
-    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик клика по крестику
-     */
-    onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик сворачивания
-     */
-    onToggle?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, payload: {
-        folded: boolean;
-    }) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Количество строк (не поддерживает IE)
-     */
-    rowLimit?: 1 | 2 | 3;
-};
-declare const Plate: React.ForwardRefExoticComponent<PlateProps & React.RefAttributes<HTMLDivElement>>;
-export { PlateProps, Plate };

package/plate/Component.js

@@ -1,114 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var coreComponentsIconButton = require('../icon-button');
-var hooks = require('@alfalab/hooks');
-var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
-var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
-var components_buttonList_component = require('./components/button-list/component.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-
-var styles = {"component":"plate__component_4995y","foldable":"plate__foldable_4995y","focused":"plate__focused_4995y","inner":"plate__inner_4995y","rounded":"plate__rounded_4995y","noBorder":"plate__noBorder_4995y","shadow":"plate__shadow_4995y","common":"plate__common_4995y","negative":"plate__negative_4995y","positive":"plate__positive_4995y","attention":"plate__attention_4995y","custom":"plate__custom_4995y","rect":"plate__rect_4995y","isHidden":"plate__isHidden_4995y","leftAddons":"plate__leftAddons_4995y","rightAddons":"plate__rightAddons_4995y","subAddons":"plate__subAddons_4995y","bold":"plate__bold_4995y","light":"plate__light_4995y","content":"plate__content_4995y","isFolded":"plate__isFolded_4995y","contentContainer":"plate__contentContainer_4995y","withoutTitle":"plate__withoutTitle_4995y","limitWidth":"plate__limitWidth_4995y","description":"plate__description_4995y","footer":"plate__footer_4995y","closer":"plate__closer_4995y","folder":"plate__folder_4995y","button":"plate__button_4995y","rowLimit1":"plate__rowLimit1_4995y","rowLimit2":"plate__rowLimit2_4995y","rowLimit3":"plate__rowLimit3_4995y"};
-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, _h = _a.rounded, rounded = _h === void 0 ? true : _h, _j = _a.limitContentWidth, limitContentWidth = _j === void 0 ? true : _j, leftAddons = _a.leftAddons, subAddons = _a.subAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _k = _a.titleView, titleView = _k === void 0 ? 'bold' : _k, _l = _a.view, view = _l === void 0 ? 'common' : _l, _m = _a.border, border = _m === void 0 ? view !== 'custom' : _m, _o = _a.shadow, shadow = _o === void 0 ? view === 'custom' : _o, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, subAddonsClassName = _a.subAddonsClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle, rowLimit = _a.rowLimit;
-    var plateRef = React.useRef(null);
-    var contentRef = React.useRef(null);
-    var subAddonsRef = React.useRef(null);
-    var focused = hooks.useFocus(plateRef, 'keyboard')[0];
-    var _p = React.useState(false), isHidden = _p[0], setIsHidden = _p[1];
-    var _q = React.useState(defaultFolded), foldedState = _q[0], setFoldedState = _q[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 hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
-    var hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
-    var rowLimitStyles = rowLimit && styles["rowLimit".concat(rowLimit)];
-    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) {
-                setFoldedState(!foldedState);
-            }
-            if (onToggle) {
-                onToggle(event, { folded: !(uncontrolled ? foldedState : foldedProp) });
-            }
-        }
-        if (onClick) {
-            onClick(event);
-        }
-    }, [foldable, onClick, uncontrolled, onToggle, foldedState, foldedProp]);
-    var handleClose = React.useCallback(function (event) {
-        setIsHidden(true);
-        if (onClose) {
-            onClose(event);
-        }
-    }, [onClose]);
-    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[styles.rounded] = rounded,
-            _b[styles.rect] = !rounded,
-            _b[styles.noBorder] = !border,
-            _b[styles.shadow] = shadow,
-            _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 && hasAnyAddons,
-                    _c[styles.limitWidth] = limitContentWidth,
-                    _c)) },
-                title && React__default.default.createElement("div", { className: styles[titleView] }, title),
-                hasContent && (React__default.default.createElement("div", { ref: contentRef, className: cn__default.default(styles.content, (_d = {},
-                        _d[styles.isFolded] = foldable && folded,
-                        _d)) },
-                    children && (React__default.default.createElement("div", { className: cn__default.default(styles.description, rowLimitStyles) }, 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, (_e = {},
-                        _e[styles.isFolded] = folded,
-                        _e)) },
-                    React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
-            hasCloser && !foldable && (React__default.default.createElement("div", { className: styles.rightAddons },
-                React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon.CrossMIcon, size: 'xxs', onClick: handleClose }))))));
-});
-/* eslint-enable complexity */
-/**
- * Для отображения в сторибуке
- */
-Plate.defaultProps = {
-    foldable: false,
-    defaultFolded: true,
-    view: 'common',
-};
-
-exports.Plate = Plate;

package/plate/cssm/Component.d.ts

@@ -1,106 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
-import { ComponentProps as ButtonProps } from "../../button";
-type PlateProps = {
-    /**
-     * Управление наличием закрывающего крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Управление наличием стрелки скрытия контента
-     */
-    foldable?: boolean;
-    /**
-     * Управление видимостью контента (controlled)
-     */
-    folded?: boolean;
-    /**
-     * Начальное состояние контента при foldable={ true }
-     */
-    defaultFolded?: boolean;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот для субаддонов (слева от крестика)
-     */
-    subAddons?: ReactNode | Array<ReactElement<ButtonProps>>;
-    /**
-     * Включить/выключить скругление
-     */
-    rounded?: boolean;
-    /**
-     * Включить/Выключить обводку
-     */
-    border?: boolean;
-    /**
-     * Включить/выключить тени
-     */
-    shadow?: boolean;
-    /**
-     * Включить/выключить ограничение максимальной ширины контента в 560px
-     */
-    limitContentWidth?: boolean;
-    /**
-     * Дочерние элементы
-     */
-    children?: ReactNode;
-    /**
-     * Заголовок компонента
-     */
-    title?: ReactNode;
-    /**
-     * Вид заголовка
-     */
-    titleView?: 'bold' | 'light';
-    /**
-     * Вид компонента
-     */
-    view?: 'common' | 'negative' | 'positive' | 'attention' | 'custom';
-    /**
-     * Набор действий
-     */
-    buttons?: ReactNode | Array<ReactElement<ButtonProps>>;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для кнопок
-     */
-    buttonsClassName?: string;
-    /**
-     * Дополнительный класс для контента
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительный класс для субаддонов
-     */
-    subAddonsClassName?: string;
-    /**
-     * Обработчик клика по плашке
-     */
-    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик клика по крестику
-     */
-    onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик сворачивания
-     */
-    onToggle?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, payload: {
-        folded: boolean;
-    }) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Количество строк (не поддерживает IE)
-     */
-    rowLimit?: 1 | 2 | 3;
-};
-declare const Plate: React.ForwardRefExoticComponent<PlateProps & React.RefAttributes<HTMLDivElement>>;
-export { PlateProps, Plate };

package/plate/cssm/Component.js

@@ -1,113 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var coreComponentsIconButton = require('../../icon-button/cssm');
-var hooks = require('@alfalab/hooks');
-var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
-var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
-var components_buttonList_component = require('./components/button-list/component.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(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, _h = _a.rounded, rounded = _h === void 0 ? true : _h, _j = _a.limitContentWidth, limitContentWidth = _j === void 0 ? true : _j, leftAddons = _a.leftAddons, subAddons = _a.subAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _k = _a.titleView, titleView = _k === void 0 ? 'bold' : _k, _l = _a.view, view = _l === void 0 ? 'common' : _l, _m = _a.border, border = _m === void 0 ? view !== 'custom' : _m, _o = _a.shadow, shadow = _o === void 0 ? view === 'custom' : _o, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, subAddonsClassName = _a.subAddonsClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle, rowLimit = _a.rowLimit;
-    var plateRef = React.useRef(null);
-    var contentRef = React.useRef(null);
-    var subAddonsRef = React.useRef(null);
-    var focused = hooks.useFocus(plateRef, 'keyboard')[0];
-    var _p = React.useState(false), isHidden = _p[0], setIsHidden = _p[1];
-    var _q = React.useState(defaultFolded), foldedState = _q[0], setFoldedState = _q[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 hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
-    var hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
-    var rowLimitStyles = rowLimit && styles__default.default["rowLimit".concat(rowLimit)];
-    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) {
-                setFoldedState(!foldedState);
-            }
-            if (onToggle) {
-                onToggle(event, { folded: !(uncontrolled ? foldedState : foldedProp) });
-            }
-        }
-        if (onClick) {
-            onClick(event);
-        }
-    }, [foldable, onClick, uncontrolled, onToggle, foldedState, foldedProp]);
-    var handleClose = React.useCallback(function (event) {
-        setIsHidden(true);
-        if (onClose) {
-            onClose(event);
-        }
-    }, [onClose]);
-    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[styles__default.default.rounded] = rounded,
-            _b[styles__default.default.rect] = !rounded,
-            _b[styles__default.default.noBorder] = !border,
-            _b[styles__default.default.shadow] = shadow,
-            _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 && hasAnyAddons,
-                    _c[styles__default.default.limitWidth] = limitContentWidth,
-                    _c)) },
-                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, (_d = {},
-                        _d[styles__default.default.isFolded] = foldable && folded,
-                        _d)) },
-                    children && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.description, rowLimitStyles) }, 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, (_e = {},
-                        _e[styles__default.default.isFolded] = folded,
-                        _e)) },
-                    React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
-            hasCloser && !foldable && (React__default.default.createElement("div", { className: styles__default.default.rightAddons },
-                React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon.CrossMIcon, size: 'xxs', onClick: handleClose }))))));
-});
-/* eslint-enable complexity */
-/**
- * Для отображения в сторибуке
- */
-Plate.defaultProps = {
-    foldable: false,
-    defaultFolded: true,
-    view: 'common',
-};
-
-exports.Plate = Plate;