@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/Modal/__stories__/Modal.stories.js

@@ -0,0 +1,428 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React, { useState } from 'react';
+import { MediaUiAStopIcon16Regular } from '@skbkontur/icons/icons/MediaUiAStopIcon/MediaUiAStopIcon16Regular.js';
+import { Modal } from '../Modal.js';
+import { Button } from '../../Button/index.js';
+import { Input } from '../../Input/index.js';
+import { Toggle } from '../../Toggle/index.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+var basicFontStyle = {
+    fontSize: '14px',
+    lineHeight: '20px',
+    margin: '0',
+};
+var ModalWithScrollableContent = /** @class */ (function (_super) {
+    __extends(ModalWithScrollableContent, _super);
+    function ModalWithScrollableContent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            opened: false,
+            panel: false,
+        };
+        _this.open = function () {
+            _this.setState({ opened: true });
+        };
+        _this.close = function () {
+            _this.setState({ opened: false });
+        };
+        return _this;
+    }
+    ModalWithScrollableContent.prototype.render = function () {
+        return (React.createElement("div", { style: { width: '300px' } },
+            this.state.opened && this.renderModal(),
+            React.createElement(Button, { onClick: this.open }, "Open modal"),
+            React.createElement("p", { style: { marginBottom: '100px' } }, "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."),
+            React.createElement("p", null, "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.")));
+    };
+    ModalWithScrollableContent.prototype.renderModal = function () {
+        var _this = this;
+        return (React.createElement(Modal, { onClose: this.close },
+            React.createElement(Modal.Header, null, "Title"),
+            React.createElement(Modal.Body, null,
+                React.createElement("p", null, "Use rxjs operators with react hooks"),
+                React.createElement("div", null,
+                    React.createElement(Toggle, { checked: this.state.panel, onValueChange: function () { return _this.setState(function (_a) {
+                            var panel = _a.panel;
+                            return ({ panel: !panel });
+                        }); } }),
+                    ' ',
+                    "Panel ",
+                    this.state.panel ? 'enabled' : 'disabled')),
+            React.createElement(Modal.Footer, { panel: this.state.panel },
+                React.createElement(Button, { onClick: this.close }, "Close"))));
+    };
+    return ModalWithScrollableContent;
+}(React.Component));
+var ModalWithIconInput = /** @class */ (function (_super) {
+    __extends(ModalWithIconInput, _super);
+    function ModalWithIconInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            opened: false,
+        };
+        _this.open = function () {
+            _this.setState({ opened: true });
+        };
+        _this.close = function () {
+            _this.setState({ opened: false });
+        };
+        return _this;
+    }
+    ModalWithIconInput.prototype.renderModal = function () {
+        return (React.createElement(Modal, { onClose: this.close },
+            React.createElement(Modal.Header, null,
+                React.createElement(Input, { size: "large", placeholder: "Modal.Header", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) }),
+                React.createElement(Input, { size: "medium", placeholder: "Modal.Header", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) }),
+                React.createElement(Input, { size: "small", placeholder: "Modal.Header", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) })),
+            React.createElement(Modal.Body, null,
+                React.createElement(Input, { size: "large", placeholder: "Modal.Body", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) }),
+                React.createElement(Input, { size: "medium", placeholder: "Modal.Body", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) }),
+                React.createElement(Input, { size: "small", placeholder: "Modal.Body", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) })),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Input, { size: "large", placeholder: "Modal.Footer", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) }),
+                React.createElement(Input, { size: "medium", placeholder: "Modal.Footer", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) }),
+                React.createElement(Input, { size: "small", placeholder: "Modal.Footer", leftIcon: React.createElement(MediaUiAStopIcon16Regular, null), rightIcon: React.createElement(MediaUiAStopIcon16Regular, null) }))));
+    };
+    ModalWithIconInput.prototype.render = function () {
+        return (React.createElement("div", { style: { width: '300px' } },
+            this.state.opened && this.renderModal(),
+            React.createElement(Button, { onClick: this.open, "data-tid": "open-modal" }, "Open modal")));
+    };
+    return ModalWithIconInput;
+}(React.Component));
+var ModalOverAnotherModal = /** @class */ (function (_super) {
+    __extends(ModalOverAnotherModal, _super);
+    function ModalOverAnotherModal() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            firstModalOpened: false,
+            secondModalOpened: false,
+        };
+        return _this;
+    }
+    ModalOverAnotherModal.prototype.renderModal = function (name, width) {
+        var _this = this;
+        return (React.createElement(Modal, { width: width, onClose: this.close.bind(this, name) },
+            React.createElement(Modal.Header, null,
+                "\u041C\u043E\u0434\u0430\u043B\u043A\u0430 #",
+                name === 'firstModalOpened' ? '1' : '2'),
+            React.createElement(Modal.Body, null, name === 'firstModalOpened' && (React.createElement(Button, { onClick: function () { return _this.setState({ secondModalOpened: true }); }, "data-tid": "open-second-modal" }, "Open second modal")))));
+    };
+    ModalOverAnotherModal.prototype.render = function () {
+        var _this = this;
+        var _a = this.state, firstModalOpened = _a.firstModalOpened, secondModalOpened = _a.secondModalOpened;
+        return (React.createElement("div", null,
+            firstModalOpened && this.renderModal('firstModalOpened', 500),
+            secondModalOpened && this.renderModal('secondModalOpened', 300),
+            React.createElement(Button, { onClick: function () { return _this.setState({ firstModalOpened: true }); }, "data-tid": "open-first-modal" }, "Open first modal")));
+    };
+    ModalOverAnotherModal.prototype.close = function (name) {
+        var _a;
+        this.setState((_a = {}, _a[name] = false, _a));
+    };
+    return ModalOverAnotherModal;
+}(React.Component));
+var ModalWithFooterPanel = function () {
+    var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
+    return (React.createElement("div", { style: { width: '300px' } },
+        isOpen && (React.createElement(Modal, { onClose: function () { return setIsOpen(false); } },
+            React.createElement(Modal.Header, null, "\u0410\u0434\u0440\u0435\u0441 \u043C\u0435\u0441\u0442\u0430 \u043E\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043B\u0435\u043D\u0438\u044F \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0442\u0435\u043B\u044C\u0441\u043A\u043E\u0439 \u0434\u0435\u044F\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u0438"),
+            React.createElement(Modal.Body, null,
+                React.createElement(Input, { placeholder: "\u0421\u0442\u0440\u0430\u043D\u0430" })),
+            React.createElement(Modal.Footer, { gap: 8, panel: true },
+                React.createElement(Button, { onClick: function () { return setIsOpen(false); } }, "Close"),
+                React.createElement(Button, null, "Do nothing")))),
+        React.createElement(Button, { onClick: function () { return setIsOpen(true); } }, "Open modal")));
+};
+export var ModalWithFooterPanelStory = function () { return React.createElement(ModalWithFooterPanel, null); };
+ModalWithFooterPanelStory.storyName = 'Modal with footer panel';
+var ModalWithoutFooterPanel = /** @class */ (function (_super) {
+    __extends(ModalWithoutFooterPanel, _super);
+    function ModalWithoutFooterPanel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            opened: false,
+        };
+        _this.open = function () {
+            _this.setState({ opened: true });
+        };
+        _this.close = function () {
+            _this.setState({ opened: false });
+        };
+        return _this;
+    }
+    ModalWithoutFooterPanel.prototype.renderModal = function () {
+        return (React.createElement(Modal, { onClose: this.close },
+            React.createElement(Modal.Header, null, "\u0418\u0441\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043E\u0448\u0438\u0431\u043E\u043A"),
+            React.createElement(Modal.Body, null,
+                React.createElement("p", { style: basicFontStyle }, "\u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043E\u0448\u0438\u0431\u043A\u0438 \u043C\u043E\u0436\u043D\u043E \u0443 \u043D\u0430\u0441 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435. \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B \u0434\u043B\u044F \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F. \u0422\u0430\u043A\u0436\u0435 \u043C\u043E\u0436\u043D\u043E \u043F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C \u043E\u0448\u0438\u0431\u043A\u0438, \u0438\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0438\u0445 \u0432 \u0443\u0447\u0435\u0442\u043D\u043E\u0439 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0435 \u0438 \u0438\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0437\u0430\u043D\u043E\u0432\u043E.")),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Button, { onClick: this.close }, "\u041D\u0435 \u0441\u043E\u0437\u0434\u0430\u0432\u0430\u0442\u044C"),
+                React.createElement(Button, null, "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u0434\u0435\u043B\u0430\u0442\u044C"))));
+    };
+    ModalWithoutFooterPanel.prototype.render = function () {
+        return (React.createElement("div", { style: { width: '300px' } },
+            this.state.opened && this.renderModal(),
+            React.createElement(Button, { onClick: this.open, "data-tid": "open-modal" }, "Open modal")));
+    };
+    return ModalWithoutFooterPanel;
+}(React.Component));
+var ModalWithoutFooter = /** @class */ (function (_super) {
+    __extends(ModalWithoutFooter, _super);
+    function ModalWithoutFooter() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            opened: false,
+        };
+        _this.open = function () {
+            _this.setState({ opened: true });
+        };
+        _this.close = function () {
+            _this.setState({ opened: false });
+        };
+        return _this;
+    }
+    ModalWithoutFooter.prototype.renderModal = function () {
+        return (React.createElement(Modal, { onClose: this.close },
+            React.createElement(Modal.Header, null, "\u0412\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u0434\u0440\u0443\u0433\u0438\u043C \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043E\u043C"),
+            React.createElement(Modal.Body, null,
+                React.createElement("p", { style: basicFontStyle }, "\u041D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u043D\u0435 \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0432 \u0432\u0430\u0448\u0435\u043C \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0427\u0442\u043E\u0431\u044B \u0432\u0441\u0435 \u0440\u0430\u0431\u043E\u0442\u0430\u043B\u043E, \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u044D\u0442\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043E\u0432: Firefox, Opera, Chrome."))));
+    };
+    ModalWithoutFooter.prototype.render = function () {
+        return (React.createElement("div", { style: { width: '300px' } },
+            this.state.opened && this.renderModal(),
+            React.createElement(Button, { onClick: this.open, "data-tid": "open-modal" }, "Open modal")));
+    };
+    return ModalWithoutFooter;
+}(React.Component));
+var ModalInner = /** @class */ (function (_super) {
+    __extends(ModalInner, _super);
+    function ModalInner() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            bigHeight: false,
+        };
+        return _this;
+    }
+    ModalInner.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { id: "modal-inner", style: { width: 300 } },
+            React.createElement(Toggle, { checked: this.state.bigHeight, onValueChange: function (bigHeight) { return _this.setState({ bigHeight: bigHeight }); } }),
+            " \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u043E \u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C \u0432\u044B\u0441\u043E\u0442\u0443",
+            React.createElement("p", { style: {
+                    height: this.state.bigHeight ? 1000 : 250,
+                    transition: 'all 0.5s',
+                    overflow: 'hidden',
+                } }, "Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks.")));
+    };
+    return ModalInner;
+}(React.Component));
+var ModalWithVariableHeight = /** @class */ (function (_super) {
+    __extends(ModalWithVariableHeight, _super);
+    function ModalWithVariableHeight() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            opened: false,
+            panel: false,
+        };
+        _this.open = function () {
+            _this.setState({ opened: true });
+        };
+        _this.close = function () {
+            _this.setState({ opened: false });
+        };
+        return _this;
+    }
+    ModalWithVariableHeight.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { style: { width: '300px' } },
+            this.state.opened && (React.createElement(Modal, { onClose: this.close },
+                React.createElement(Modal.Header, null, "Title"),
+                React.createElement(Modal.Body, null,
+                    React.createElement("p", null, "Use rxjs operators with react hooks"),
+                    this.props.children,
+                    React.createElement("div", null,
+                        React.createElement(Toggle, { checked: this.state.panel, onValueChange: function () { return _this.setState(function (_a) {
+                                var panel = _a.panel;
+                                return ({ panel: !panel });
+                            }); } }),
+                        ' ',
+                        "Panel ",
+                        this.state.panel ? 'enabled' : 'disabled')),
+                React.createElement(Modal.Footer, { panel: this.state.panel },
+                    React.createElement(Button, { onClick: this.close }, "Close")))),
+            React.createElement(Button, { onClick: this.open, "data-tid": "open-modal" }, "Open modal")));
+    };
+    return ModalWithVariableHeight;
+}(React.Component));
+var SmallModalOnTop = /** @class */ (function (_super) {
+    __extends(SmallModalOnTop, _super);
+    function SmallModalOnTop() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            opened: false,
+        };
+        _this.open = function () {
+            _this.setState({ opened: true });
+        };
+        _this.close = function () {
+            _this.setState({ opened: false });
+        };
+        return _this;
+    }
+    SmallModalOnTop.prototype.renderModal = function () {
+        return (React.createElement(Modal, { onClose: this.close, alignTop: true },
+            React.createElement(Modal.Header, null, "Modal"),
+            React.createElement(Modal.Body, null,
+                React.createElement(Button, { "data-tid": "modal-content-button" }, "Content Button"))));
+    };
+    SmallModalOnTop.prototype.render = function () {
+        return (React.createElement("div", null,
+            this.state.opened && this.renderModal(),
+            React.createElement(Button, { onClick: this.open, "data-tid": "open-modal" }, "Open modal")));
+    };
+    return SmallModalOnTop;
+}(React.Component));
+export default {
+    title: 'Modal',
+    component: Modal,
+};
+export var WithScrollableParentContent = function () { return React.createElement(ModalWithScrollableContent, null); };
+WithScrollableParentContent.storyName = 'With scrollable parent content';
+WithScrollableParentContent.parameters = { creevey: { skip: true } };
+export var WithIconInput = function () { return React.createElement(ModalWithIconInput, null); };
+export var ModalOverAnotherModalStory = function () { return React.createElement(ModalOverAnotherModal, null); };
+ModalOverAnotherModalStory.storyName = 'Modal over another modal';
+export var DisabledModal = function () { return (React.createElement(Modal, { disableClose: true },
+    React.createElement(Modal.Header, null, "Disabled"),
+    React.createElement(Modal.Body, null, "Content of disabled body"))); };
+DisabledModal.storyName = 'Disabled modal';
+DisabledModal.parameters = { creevey: { skip: true } };
+export var ModalWithoutFooterPanelStory = function () { return React.createElement(ModalWithoutFooterPanel, null); };
+ModalWithoutFooterPanelStory.storyName = 'Modal without footer panel';
+export var ModalWithoutFooterStory = function () { return React.createElement(ModalWithoutFooter, null); };
+ModalWithoutFooterStory.storyName = 'Modal without footer';
+export var ModalWithoutHeader = function () { return (React.createElement(Modal, null,
+    React.createElement(Modal.Body, null,
+        React.createElement("div", null, "\u041D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u043D\u0435 \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0432 \u0432\u0430\u0448\u0435\u043C \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0427\u0442\u043E\u0431\u044B \u0432\u0441\u0435 \u0440\u0430\u0431\u043E\u0442\u0430\u043B\u043E, \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u044D\u0442\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043E\u0432: Firefox, divpera, Chrome.")))); };
+ModalWithoutHeader.storyName = 'Modal without header';
+ModalWithoutHeader.parameters = { creevey: { captureElement: null } };
+export var ModalWithVariableHeightOfContent = function () { return (React.createElement(ModalWithVariableHeight, null,
+    React.createElement(ModalInner, null))); };
+ModalWithVariableHeightOfContent.storyName = 'Modal with variable height of content';
+export var ModalWithoutStickyElements = function () { return (React.createElement(Modal, null,
+    React.createElement(Modal.Header, { sticky: false }, "Header"),
+    React.createElement(Modal.Body, null, new Array(200).fill('Use rxjs operators with react hooks.').map(function (item, index) { return (React.createElement("p", { key: index }, item)); })),
+    React.createElement(Modal.Footer, { sticky: false }, "Footer"))); };
+ModalWithoutStickyElements.storyName = 'Modal without sticky elements';
+export var WithAlignTop = function () { return (React.createElement(Modal, { alignTop: true },
+    React.createElement(Modal.Body, null,
+        React.createElement("p", null, "Use rxjs operators with react hooks.")))); };
+WithAlignTop.storyName = 'With alignTop';
+WithAlignTop.parameters = { creevey: { captureElement: null } };
+export var SmallModalOnTheTop = function () { return React.createElement(SmallModalOnTop, null); };
+SmallModalOnTheTop.storyName = 'Small modal on the Top';
+export var ModalWithVeryLongHeaderWithoutSpaces = function () { return (React.createElement(Modal, { width: 350 },
+    React.createElement(Modal.Header, null, "VeryLongAndStrangeHeaderWithoutMeaningAndSpaces"))); };
+ModalWithVeryLongHeaderWithoutSpaces.storyName = 'Modal with veryLongHeaderWithoutSpaces';
+ModalWithVeryLongHeaderWithoutSpaces.parameters = { creevey: { captureElement: null } };
+export var ModalWithHeaderFromOtherComponent = function () {
+    var Header = function () { return React.createElement(Modal.Header, null, "Header "); };
+    return (React.createElement(Modal, { width: 350 },
+        React.createElement(Header, null),
+        React.createElement(Modal.Body, null, "asdjhaklsdkajs")));
+};
+ModalWithHeaderFromOtherComponent.storyName = 'Modal with Header from other Component';
+ModalWithHeaderFromOtherComponent.parameters = { creevey: { skip: true } };
+export var ModalBodyWithoutPadding = function () { return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return (React.createElement(Modal, { width: 250 },
+        React.createElement(Modal.Body, { noPadding: true },
+            React.createElement("div", { style: { background: theme.prototype.constructor.name.includes('Dark') ? '1f1f1f' : 'white' } },
+                React.createElement("p", null, "Loooooooong content content content"),
+                React.createElement("p", null, "Loooooooong content content content"),
+                React.createElement("p", null, "Loooooooong content content content"),
+                React.createElement("p", null, "Loooooooong content content content")))));
+})); };
+ModalBodyWithoutPadding.storyName = 'Modal with no-padding';
+ModalBodyWithoutPadding.parameters = { creevey: { captureElement: null } };
+export var AlignCenterAndNoClose = function () { return (React.createElement(Modal, { width: 250, noClose: true },
+    React.createElement(Modal.Header, null,
+        React.createElement("div", { style: { textAlign: 'center' } }, "Header")),
+    React.createElement(Modal.Body, null,
+        React.createElement("div", { style: { textAlign: 'center' } },
+            React.createElement("p", null, "Loooooooong content content content"))))); };
+AlignCenterAndNoClose.parameters = { creevey: { captureElement: null } };
+var Header = function () { return React.createElement(Modal.Header, { sticky: true }, "Header"); };
+var Body = function () { return (React.createElement(Modal.Body, null, new Array(200).fill('Use rxjs operators with react hooks.').map(function (item, index) { return (React.createElement("p", { key: index }, item)); }))); };
+var Footer = function () { return (React.createElement(Modal.Footer, { sticky: true, panel: true }, "Footer")); };
+export var ModalWithChildrenFromOtherComponent = function () { return (React.createElement(Modal, null,
+    React.createElement(Header, null),
+    React.createElement(Body, null),
+    React.createElement(Footer, null))); };
+export var ChangeAllModalContent = function () {
+    var FirstContent = function (_a) {
+        var onClick = _a.onClick, onClose = _a.onClose;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Modal.Header, null, "1"),
+            React.createElement(Modal.Body, null, "\u041F\u0435\u0440\u0432\u044B\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442"),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Button, { onClick: onClose }, "\u041F\u043E\u043D\u044F\u0442\u043D\u043E"),
+                React.createElement(Button, { onClick: onClick, "data-tid": "open-second-modal" }, "\u041F\u043E\u043C\u0435\u043D\u044F\u0442\u044C \u043A\u043E\u043D\u0442\u0435\u043D\u0442"))));
+    };
+    var SecondContent = function (_a) {
+        var onClick = _a.onClick, onClose = _a.onClose;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Modal.Header, null, "2"),
+            React.createElement(Modal.Body, null, "\u0412\u0442\u043E\u0440\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442"),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Button, { onClick: onClose }, "\u041F\u043E\u043D\u044F\u0442\u043D\u043E"),
+                React.createElement(Button, { onClick: onClick }, "\u041F\u043E\u043C\u0435\u043D\u044F\u0442\u044C \u043A\u043E\u043D\u0442\u0435\u043D\u0442"))));
+    };
+    var PayNotifice = function () {
+        var _a = React.useState('first'), content = _a[0], setContent = _a[1];
+        var _b = React.useState(false), isOpened = _b[0], setIsOpened = _b[1];
+        var changeContent = function () { return setContent(function (prev) { return (prev === 'first' ? 'second' : 'first'); }); };
+        var modalContent;
+        switch (content) {
+            case 'first':
+                modalContent = React.createElement(FirstContent, { onClick: changeContent, onClose: function () { return setIsOpened(false); } });
+                break;
+            case 'second':
+                modalContent = React.createElement(SecondContent, { onClick: changeContent, onClose: function () { return setIsOpened(false); } });
+                break;
+        }
+        return (React.createElement(React.Fragment, null,
+            isOpened && React.createElement(Modal, null, modalContent),
+            React.createElement(Button, { use: "pay", onClick: function () { return setIsOpened(true); }, "data-tid": "open-first-modal" }, "\u041E\u043F\u043B\u0430\u0442\u0430")));
+    };
+    return React.createElement(PayNotifice, null);
+};
+ChangeAllModalContent.storyName = 'Change all modal content';
+export var CrossFocusedByTab = function () {
+    return (React.createElement(Modal, { disableFocusLock: true },
+        React.createElement(Modal.Header, null, "\u041A\u0440\u0435\u0441\u0442\u0438\u043A \u0432 \u043C\u043E\u0434\u0430\u043B\u043A\u0435"),
+        React.createElement(Modal.Body, null,
+            React.createElement("span", null, "\u0422\u0435\u043B\u043E \u043C\u043E\u0434\u0430\u043B\u043A\u0438"))));
+};
+export var WithCutTitleOnStuck = function () {
+    return (React.createElement(Modal, { width: 500 },
+        React.createElement(Modal.Header, { cutTitleOnStuck: true }, "\u041E\u0447\u0435\u043D\u044C \u043E\u0447\u0435\u043D\u044C \u043E\u0447\u0435\u043D\u044C \u043E\u0447\u0435\u043D\u044C \u043E\u0447\u0435\u043D\u044C \u0434\u043B\u0438\u043D\u043D\u044B\u0439 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A"),
+        React.createElement(Modal.Body, null,
+            React.createElement("div", { style: { height: '1000px' } }, "\u0422\u0435\u043B\u043E \u043C\u043E\u0434\u0430\u043B\u043A\u0438"))));
+};
+WithCutTitleOnStuck.storyName = 'With cut title on stuck';
+//# sourceMappingURL=Modal.stories.js.map

package/components/Modal/__stories__/Modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../components/Modal/__stories__/Modal.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAGA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,sEAAsE,CAAC;AAGjH,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,IAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,GAAG;CACZ,CAAC;AAMF;IAAyC,8CAAe;IAAxD;;QACS,WAAK,GAAoC;YAC9C,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;SACb,CAAC;QAyDK,UAAI,GAAG;YACZ,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC;QAEK,WAAK,GAAG;YACb,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;;IACJ,CAAC;IA9DQ,2CAAM,GAAb;QACE,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,IAAI,iBAAqB;YAC/C,2BAAG,KAAK,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,2+BAW/B;YACJ,sgCAWI,CACA,CACP,CAAC;IACJ,CAAC;IAEM,gDAAW,GAAlB;QAAA,iBAoBC;QAnBC,OAAO,CACL,oBAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK;YACxB,oBAAC,KAAK,CAAC,MAAM,gBAAqB;YAClC,oBAAC,KAAK,CAAC,IAAI;gBACT,qEAA0C;gBAE1C;oBACE,oBAAC,MAAM,IACL,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACzB,aAAa,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,UAAC,EAA0C;gCAAxC,KAAK,WAAA;4BAAwC,OAAA,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;wBAAnB,CAAmB,CAAC,EAAlF,CAAkF,GACvG;oBAAC,GAAG;;oBACC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAC5C,CACK;YACb,oBAAC,KAAK,CAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;gBACnC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,YAAgB,CAC9B,CACT,CACT,CAAC;IACJ,CAAC;IASH,iCAAC;AAAD,CAAC,AApED,CAAyC,KAAK,CAAC,SAAS,GAoEvD;AAKD;IAAiC,sCAAe;IAAhD;;QACS,WAAK,GAA4B;YACtC,MAAM,EAAE,KAAK;SACd,CAAC;QAgFK,UAAI,GAAG;YACZ,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC;QAEK,WAAK,GAAG;YACb,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;;IACJ,CAAC;IArFQ,wCAAW,GAAlB;QACE,OAAO,CACL,oBAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK;YACxB,oBAAC,KAAK,CAAC,MAAM;gBACX,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC;gBACF,oBAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC;gBACF,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC,CACW;YACf,oBAAC,KAAK,CAAC,IAAI;gBACT,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC;gBACF,oBAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC;gBACF,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC,CACS;YACb,oBAAC,KAAK,CAAC,MAAM;gBACX,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC;gBACF,oBAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC;gBACF,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,oBAAC,yBAAyB,OAAG,EACvC,SAAS,EAAE,oBAAC,yBAAyB,OAAG,GACxC,CACW,CACT,CACT,CAAC;IACJ,CAAC;IAEM,mCAAM,GAAb;QACE,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,IAAI,cAAW,YAAY,iBAExC,CACL,CACP,CAAC;IACJ,CAAC;IASH,yBAAC;AAAD,CAAC,AA1FD,CAAiC,KAAK,CAAC,SAAS,GA0F/C;AAED;IAAoC,yCAAe;IAAnD;;QACS,WAAK,GAAG;YACb,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,KAAK;SACzB,CAAC;;IAkCJ,CAAC;IAhCQ,2CAAW,GAAlB,UAAmB,IAAY,EAAE,KAAa;QAA9C,iBAaC;QAZC,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;YACvD,oBAAC,KAAK,CAAC,MAAM;;gBAAW,IAAI,KAAK,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAgB;YAC/E,oBAAC,KAAK,CAAC,IAAI,QACR,IAAI,KAAK,kBAAkB,IAAI,CAC9B,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,EAA1C,CAA0C,cAAW,mBAAmB,wBAEtF,CACV,CACU,CACP,CACT,CAAC;IACJ,CAAC;IAEM,sCAAM,GAAb;QAAA,iBAYC;QAXO,IAAA,KAA0C,IAAI,CAAC,KAAK,EAAlD,gBAAgB,sBAAA,EAAE,iBAAiB,uBAAe,CAAC;QAE3D,OAAO,CACL;YACG,gBAAgB,IAAI,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,GAAG,CAAC;YAC7D,iBAAiB,IAAI,IAAI,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,CAAC;YAChE,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,EAAzC,CAAyC,cAAW,kBAAkB,uBAEpF,CACL,CACP,CAAC;IACJ,CAAC;IAEM,qCAAK,GAAZ,UAAa,IAAY;;QACvB,IAAI,CAAC,QAAQ,WAAG,GAAC,IAAI,IAAG,KAAK,MAAG,CAAC;IACnC,CAAC;IACH,4BAAC;AAAD,CAAC,AAtCD,CAAoC,KAAK,CAAC,SAAS,GAsClD;AAED,IAAM,oBAAoB,GAAG;IACrB,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;QAC3B,MAAM,IAAI,CACT,oBAAC,KAAK,IAAC,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,KAAK,CAAC,EAAhB,CAAgB;YACpC,oBAAC,KAAK,CAAC,MAAM,mVAA0E;YACvF,oBAAC,KAAK,CAAC,IAAI;gBACT,oBAAC,KAAK,IAAC,WAAW,EAAC,sCAAQ,GAAG,CACnB;YACb,oBAAC,KAAK,CAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK;gBACzB,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,KAAK,CAAC,EAAhB,CAAgB,YAAgB;gBACvD,oBAAC,MAAM,qBAAoB,CACd,CACT,CACT;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,IAAI,CAAC,EAAf,CAAe,iBAAqB,CACvD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,yBAAyB,GAAU,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB,CAAC;AAC/E,yBAAyB,CAAC,SAAS,GAAG,yBAAyB,CAAC;AAKhE;IAAsC,2CAAe;IAArD;;QACS,WAAK,GAAiC;YAC3C,MAAM,EAAE,KAAK;SACd,CAAC;QA+BK,UAAI,GAAG;YACZ,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC;QAEK,WAAK,GAAG;YACb,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;;IACJ,CAAC;IApCQ,6CAAW,GAAlB;QACE,OAAO,CACL,oBAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK;YACxB,oBAAC,KAAK,CAAC,MAAM,kHAAkC;YAC/C,oBAAC,KAAK,CAAC,IAAI;gBACT,2BAAG,KAAK,EAAE,cAAc,i6BAGpB,CACO;YACb,oBAAC,KAAK,CAAC,MAAM;gBACX,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,0EAAuB;gBAClD,oBAAC,MAAM,iGAA0B,CACpB,CACT,CACT,CAAC;IACJ,CAAC;IAEM,wCAAM,GAAb;QACE,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,IAAI,cAAW,YAAY,iBAExC,CACL,CACP,CAAC;IACJ,CAAC;IASH,8BAAC;AAAD,CAAC,AAzCD,CAAsC,KAAK,CAAC,SAAS,GAyCpD;AAKD;IAAiC,sCAAe;IAAhD;;QACS,WAAK,GAA4B;YACtC,MAAM,EAAE,KAAK;SACd,CAAC;QA2BK,UAAI,GAAG;YACZ,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC;QAEK,WAAK,GAAG;YACb,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;;IACJ,CAAC;IAhCQ,wCAAW,GAAlB;QACE,OAAO,CACL,oBAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK;YACxB,oBAAC,KAAK,CAAC,MAAM,2LAA+C;YAC5D,oBAAC,KAAK,CAAC,IAAI;gBACT,2BAAG,KAAK,EAAE,cAAc,8iBAGpB,CACO,CACP,CACT,CAAC;IACJ,CAAC;IAEM,mCAAM,GAAb;QACE,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,IAAI,cAAW,YAAY,iBAExC,CACL,CACP,CAAC;IACJ,CAAC;IASH,yBAAC;AAAD,CAAC,AArCD,CAAiC,KAAK,CAAC,SAAS,GAqC/C;AAKD;IAAyB,8BAAe;IAAxC;;QACS,WAAK,GAAoB;YAC9B,SAAS,EAAE,KAAK;SACjB,CAAC;;IAsBJ,CAAC;IApBQ,2BAAM,GAAb;QAAA,iBAmBC;QAlBC,OAAO,CACL,6BAAK,EAAE,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YACzC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,EAAE,UAAC,SAAS,IAAK,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,WAAA,EAAE,CAAC,EAA5B,CAA4B,GAAI;;YAErG,2BACE,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;oBACzC,UAAU,EAAE,UAAU;oBACtB,QAAQ,EAAE,QAAQ;iBACnB,6ZAMC,CACA,CACP,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,AAzBD,CAAyB,KAAK,CAAC,SAAS,GAyBvC;AAMD;IAAsC,2CAAwC;IAA9E;;QACS,WAAK,GAAiC;YAC3C,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;SACb,CAAC;QAiCK,UAAI,GAAG;YACZ,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC;QAEK,WAAK,GAAG;YACb,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;;IACJ,CAAC;IAtCQ,wCAAM,GAAb;QAAA,iBA6BC;QA5BC,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CACpB,oBAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK;gBACxB,oBAAC,KAAK,CAAC,MAAM,gBAAqB;gBAClC,oBAAC,KAAK,CAAC,IAAI;oBACT,qEAA0C;oBAEzC,IAAI,CAAC,KAAK,CAAC,QAAQ;oBAEpB;wBACE,oBAAC,MAAM,IACL,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACzB,aAAa,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,UAAC,EAAuC;oCAArC,KAAK,WAAA;gCAAqC,OAAA,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;4BAAnB,CAAmB,CAAC,EAA/E,CAA+E,GACpG;wBAAC,GAAG;;wBACC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAC5C,CACK;gBACb,oBAAC,KAAK,CAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;oBACnC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,YAAgB,CAC9B,CACT,CACT;YACD,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,IAAI,cAAW,YAAY,iBAExC,CACL,CACP,CAAC;IACJ,CAAC;IASH,8BAAC;AAAD,CAAC,AA5CD,CAAsC,KAAK,CAAC,SAAS,GA4CpD;AAED;IAA8B,mCAAe;IAA7C;;QACS,WAAK,GAAG;YACb,MAAM,EAAE,KAAK;SACd,CAAC;QAwBK,UAAI,GAAG;YACZ,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC;QAEK,WAAK,GAAG;YACb,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;;IACJ,CAAC;IA7BQ,qCAAW,GAAlB;QACE,OAAO,CACL,oBAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ;YAClC,oBAAC,KAAK,CAAC,MAAM,gBAAqB;YAClC,oBAAC,KAAK,CAAC,IAAI;gBACT,oBAAC,MAAM,gBAAU,sBAAsB,qBAAwB,CACpD,CACP,CACT,CAAC;IACJ,CAAC;IAEM,gCAAM,GAAb;QACE,OAAO,CACL;YACG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,oBAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,IAAI,cAAW,YAAY,iBAExC,CACL,CACP,CAAC;IACJ,CAAC;IASH,sBAAC;AAAD,CAAC,AAlCD,CAA8B,KAAK,CAAC,SAAS,GAkC5C;AAED,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,IAAM,2BAA2B,GAAG,cAAM,OAAA,oBAAC,0BAA0B,OAAG,EAA9B,CAA8B,CAAC;AAChF,2BAA2B,CAAC,SAAS,GAAG,gCAAgC,CAAC;AACzE,2BAA2B,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;AAErE,MAAM,CAAC,IAAM,aAAa,GAAU,cAAM,OAAA,oBAAC,kBAAkB,OAAG,EAAtB,CAAsB,CAAC;AAEjE,MAAM,CAAC,IAAM,0BAA0B,GAAU,cAAM,OAAA,oBAAC,qBAAqB,OAAG,EAAzB,CAAyB,CAAC;AACjF,0BAA0B,CAAC,SAAS,GAAG,0BAA0B,CAAC;AAElE,MAAM,CAAC,IAAM,aAAa,GAAG,cAAM,OAAA,CACjC,oBAAC,KAAK,IAAC,YAAY;IACjB,oBAAC,KAAK,CAAC,MAAM,mBAAwB;IACrC,oBAAC,KAAK,CAAC,IAAI,mCAAsC,CAC3C,CACT,EALkC,CAKlC,CAAC;AACF,aAAa,CAAC,SAAS,GAAG,gBAAgB,CAAC;AAC3C,aAAa,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;AAEvD,MAAM,CAAC,IAAM,4BAA4B,GAAU,cAAM,OAAA,oBAAC,uBAAuB,OAAG,EAA3B,CAA2B,CAAC;AACrF,4BAA4B,CAAC,SAAS,GAAG,4BAA4B,CAAC;AAEtE,MAAM,CAAC,IAAM,uBAAuB,GAAU,cAAM,OAAA,oBAAC,kBAAkB,OAAG,EAAtB,CAAsB,CAAC;AAC3E,uBAAuB,CAAC,SAAS,GAAG,sBAAsB,CAAC;AAE3D,MAAM,CAAC,IAAM,kBAAkB,GAAG,cAAM,OAAA,CACtC,oBAAC,KAAK;IACJ,oBAAC,KAAK,CAAC,IAAI;QACT,6kBAGM,CACK,CACP,CACT,EATuC,CASvC,CAAC;AACF,kBAAkB,CAAC,SAAS,GAAG,sBAAsB,CAAC;AACtD,kBAAkB,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,CAAC;AAEtE,MAAM,CAAC,IAAM,gCAAgC,GAAU,cAAM,OAAA,CAC3D,oBAAC,uBAAuB;IACtB,oBAAC,UAAU,OAAG,CACU,CAC3B,EAJ4D,CAI5D,CAAC;AACF,gCAAgC,CAAC,SAAS,GAAG,uCAAuC,CAAC;AAErF,MAAM,CAAC,IAAM,0BAA0B,GAAU,cAAM,OAAA,CACrD,oBAAC,KAAK;IACJ,oBAAC,KAAK,CAAC,MAAM,IAAC,MAAM,EAAE,KAAK,aAAuB;IAClD,oBAAC,KAAK,CAAC,IAAI,QACR,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CAChF,2BAAG,GAAG,EAAE,KAAK,IAAG,IAAI,CAAK,CAC1B,EAFiF,CAEjF,CAAC,CACS;IACb,oBAAC,KAAK,CAAC,MAAM,IAAC,MAAM,EAAE,KAAK,aAAuB,CAC5C,CACT,EAVsD,CAUtD,CAAC;AACF,0BAA0B,CAAC,SAAS,GAAG,+BAA+B,CAAC;AAEvE,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,CAChC,oBAAC,KAAK,IAAC,QAAQ;IACb,oBAAC,KAAK,CAAC,IAAI;QACT,sEAA2C,CAChC,CACP,CACT,EANiC,CAMjC,CAAC;AACF,YAAY,CAAC,SAAS,GAAG,eAAe,CAAC;AACzC,YAAY,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,CAAC;AAEhE,MAAM,CAAC,IAAM,kBAAkB,GAAU,cAAM,OAAA,oBAAC,eAAe,OAAG,EAAnB,CAAmB,CAAC;AACnE,kBAAkB,CAAC,SAAS,GAAG,wBAAwB,CAAC;AAExD,MAAM,CAAC,IAAM,oCAAoC,GAAG,cAAM,OAAA,CACxD,oBAAC,KAAK,IAAC,KAAK,EAAE,GAAG;IACf,oBAAC,KAAK,CAAC,MAAM,0DAA+D,CACtE,CACT,EAJyD,CAIzD,CAAC;AACF,oCAAoC,CAAC,SAAS,GAAG,wCAAwC,CAAC;AAC1F,oCAAoC,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,CAAC;AAExF,MAAM,CAAC,IAAM,iCAAiC,GAAG;IAC/C,IAAM,MAAM,GAAG,cAAM,OAAA,oBAAC,KAAK,CAAC,MAAM,kBAAuB,EAApC,CAAoC,CAAC;IAC1D,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,GAAG;QACf,oBAAC,MAAM,OAAU;QACjB,oBAAC,KAAK,CAAC,IAAI,yBAA4B,CACjC,CACT,CAAC;AACJ,CAAC,CAAC;AACF,iCAAiC,CAAC,SAAS,GAAG,wCAAwC,CAAC;AACvF,iCAAiC,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;AAE3E,MAAM,CAAC,IAAM,uBAAuB,GAAG,cAAM,OAAA,CAC3C,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;IACL,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,GAAG;QACf,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS;YACnB,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE;gBAChG,qEAA0C;gBAC1C,qEAA0C;gBAC1C,qEAA0C;gBAC1C,qEAA0C,CACtC,CACK,CACP,CACT,CAAC;AACJ,CAAC,CACqB,CACzB,EAjB4C,CAiB5C,CAAC;AACF,uBAAuB,CAAC,SAAS,GAAG,uBAAuB,CAAC;AAC5D,uBAAuB,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,CAAC;AAE3E,MAAM,CAAC,IAAM,qBAAqB,GAAG,cAAM,OAAA,CACzC,oBAAC,KAAK,IAAC,KAAK,EAAE,GAAG,EAAE,OAAO;IACxB,oBAAC,KAAK,CAAC,MAAM;QACX,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAc,CACpC;IACf,oBAAC,KAAK,CAAC,IAAI;QACT,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;YACjC,qEAA0C,CACtC,CACK,CACP,CACT,EAX0C,CAW1C,CAAC;AACF,qBAAqB,CAAC,UAAU,GAAG,EAAE,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,CAAC;AAEzE,IAAM,MAAM,GAAG,cAAM,OAAA,oBAAC,KAAK,CAAC,MAAM,IAAC,MAAM,mBAAsB,EAA1C,CAA0C,CAAC;AAChE,IAAM,IAAI,GAAG,cAAM,OAAA,CACjB,oBAAC,KAAK,CAAC,IAAI,QACR,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CAChF,2BAAG,GAAG,EAAE,KAAK,IAAG,IAAI,CAAK,CAC1B,EAFiF,CAEjF,CAAC,CACS,CACd,EANkB,CAMlB,CAAC;AACF,IAAM,MAAM,GAAG,cAAM,OAAA,CACnB,oBAAC,KAAK,CAAC,MAAM,IAAC,MAAM,QAAC,KAAK,mBAEX,CAChB,EAJoB,CAIpB,CAAC;AAEF,MAAM,CAAC,IAAM,mCAAmC,GAAG,cAAM,OAAA,CACvD,oBAAC,KAAK;IACJ,oBAAC,MAAM,OAAG;IACV,oBAAC,IAAI,OAAG;IACR,oBAAC,MAAM,OAAG,CACJ,CACT,EANwD,CAMxD,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAU;IAM1C,IAAM,YAAY,GAAgC,UAAC,EAAoB;YAAlB,OAAO,aAAA,EAAE,OAAO,aAAA;QAAO,OAAA,CAC1E;YACE,oBAAC,KAAK,CAAC,MAAM,YAAiB;YAC9B,oBAAC,KAAK,CAAC,IAAI,0FAA4B;YACvC,oBAAC,KAAK,CAAC,MAAM;gBACX,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,iDAAkB;gBAC1C,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,cAAW,mBAAmB,kGAE7C,CACI,CACd,CACJ;IAX2E,CAW3E,CAAC;IAEF,IAAM,aAAa,GAAgC,UAAC,EAAoB;YAAlB,OAAO,aAAA,EAAE,OAAO,aAAA;QAAO,OAAA,CAC3E;YACE,oBAAC,KAAK,CAAC,MAAM,YAAiB;YAC9B,oBAAC,KAAK,CAAC,IAAI,0FAA4B;YACvC,oBAAC,KAAK,CAAC,MAAM;gBACX,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,iDAAkB;gBAC1C,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,kGAA2B,CACtC,CACd,CACJ;IAT4E,CAS5E,CAAC;IAEF,IAAM,WAAW,GAAG;QACZ,IAAA,KAAwB,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAA9C,OAAO,QAAA,EAAE,UAAU,QAA2B,CAAC;QAChD,IAAA,KAA0B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA9C,QAAQ,QAAA,EAAE,WAAW,QAAyB,CAAC;QACtD,IAAM,aAAa,GAAG,cAAM,OAAA,UAAU,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,EAAvC,CAAuC,CAAC,EAA7D,CAA6D,CAAC;QAE1F,IAAI,YAAuB,CAAC;QAC5B,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,OAAO;gBACV,YAAY,GAAG,oBAAC,YAAY,IAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB,GAAI,CAAC;gBAC3F,MAAM;YACR,KAAK,QAAQ;gBACX,YAAY,GAAG,oBAAC,aAAa,IAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB,GAAI,CAAC;gBAC5F,MAAM;QACV,CAAC;QAED,OAAO,CACL;YACG,QAAQ,IAAI,oBAAC,KAAK,QAAE,YAAY,CAAS;YAC1C,oBAAC,MAAM,IAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAjB,CAAiB,cAAW,kBAAkB,2CAEtE,CACR,CACJ,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,oBAAC,WAAW,OAAG,CAAC;AACzB,CAAC,CAAC;AACF,qBAAqB,CAAC,SAAS,GAAG,0BAA0B,CAAC;AAE7D,MAAM,CAAC,IAAM,iBAAiB,GAAU;IACtC,OAAO,CACL,oBAAC,KAAK,IAAC,gBAAgB;QACrB,oBAAC,KAAK,CAAC,MAAM,uGAAiC;QAC9C,oBAAC,KAAK,CAAC,IAAI;YACT,wGAAyB,CACd,CACP,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAU;IACxC,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,GAAG;QACf,oBAAC,KAAK,CAAC,MAAM,IAAC,eAAe,yQAA+D;QAC5F,oBAAC,KAAK,CAAC,IAAI;YACT,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,0EAAoB,CACzC,CACP,CACT,CAAC;AACJ,CAAC,CAAC;AACF,mBAAmB,CAAC,SAAS,GAAG,yBAAyB,CAAC","sourcesContent":["// TODO: Rewrite stories and enable rule (in process of functional refactoring).\n/* eslint-disable react/no-unstable-nested-components */\nimport type { ReactNode } from 'react';\nimport React, { useState } from 'react';\nimport { MediaUiAStopIcon16Regular } from '@skbkontur/icons/icons/MediaUiAStopIcon/MediaUiAStopIcon16Regular.js';\n\nimport type { Story } from '../../../typings/stories.js';\nimport { Modal } from '../Modal.js';\nimport { Button } from '../../Button/index.js';\nimport { Input } from '../../Input/index.js';\nimport { Toggle } from '../../Toggle/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\n\nconst basicFontStyle = {\n  fontSize: '14px',\n  lineHeight: '20px',\n  margin: '0',\n};\n\ninterface ModalWithScrollableContentState {\n  opened: boolean;\n  panel: boolean;\n}\nclass ModalWithScrollableContent extends React.Component {\n  public state: ModalWithScrollableContentState = {\n    opened: false,\n    panel: false,\n  };\n\n  public render() {\n    return (\n      <div style={{ width: '300px' }}>\n        {this.state.opened && this.renderModal()}\n        <Button onClick={this.open}>Open modal</Button>\n        <p style={{ marginBottom: '100px' }}>\n          On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized\n          by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble\n          that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will,\n          which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to\n          distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able\n          to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances\n          and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to\n          be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle\n          of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse\n          pains.\n        </p>\n        <p>\n          On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized\n          by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble\n          that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will,\n          which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to\n          distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able\n          to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances\n          and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to\n          be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle\n          of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse\n          pains.\n        </p>\n      </div>\n    );\n  }\n\n  public renderModal() {\n    return (\n      <Modal onClose={this.close}>\n        <Modal.Header>Title</Modal.Header>\n        <Modal.Body>\n          <p>Use rxjs operators with react hooks</p>\n\n          <div>\n            <Toggle\n              checked={this.state.panel}\n              onValueChange={() => this.setState(({ panel }: ModalWithScrollableContentState) => ({ panel: !panel }))}\n            />{' '}\n            Panel {this.state.panel ? 'enabled' : 'disabled'}\n          </div>\n        </Modal.Body>\n        <Modal.Footer panel={this.state.panel}>\n          <Button onClick={this.close}>Close</Button>\n        </Modal.Footer>\n      </Modal>\n    );\n  }\n\n  public open = () => {\n    this.setState({ opened: true });\n  };\n\n  public close = () => {\n    this.setState({ opened: false });\n  };\n}\n\ninterface ModalWithIconInputState {\n  opened: boolean;\n}\nclass ModalWithIconInput extends React.Component {\n  public state: ModalWithIconInputState = {\n    opened: false,\n  };\n\n  public renderModal() {\n    return (\n      <Modal onClose={this.close}>\n        <Modal.Header>\n          <Input\n            size=\"large\"\n            placeholder=\"Modal.Header\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n          <Input\n            size=\"medium\"\n            placeholder=\"Modal.Header\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n          <Input\n            size=\"small\"\n            placeholder=\"Modal.Header\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n        </Modal.Header>\n        <Modal.Body>\n          <Input\n            size=\"large\"\n            placeholder=\"Modal.Body\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n          <Input\n            size=\"medium\"\n            placeholder=\"Modal.Body\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n          <Input\n            size=\"small\"\n            placeholder=\"Modal.Body\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n        </Modal.Body>\n        <Modal.Footer>\n          <Input\n            size=\"large\"\n            placeholder=\"Modal.Footer\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n          <Input\n            size=\"medium\"\n            placeholder=\"Modal.Footer\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n          <Input\n            size=\"small\"\n            placeholder=\"Modal.Footer\"\n            leftIcon={<MediaUiAStopIcon16Regular />}\n            rightIcon={<MediaUiAStopIcon16Regular />}\n          />\n        </Modal.Footer>\n      </Modal>\n    );\n  }\n\n  public render() {\n    return (\n      <div style={{ width: '300px' }}>\n        {this.state.opened && this.renderModal()}\n        <Button onClick={this.open} data-tid=\"open-modal\">\n          Open modal\n        </Button>\n      </div>\n    );\n  }\n\n  public open = () => {\n    this.setState({ opened: true });\n  };\n\n  public close = () => {\n    this.setState({ opened: false });\n  };\n}\n\nclass ModalOverAnotherModal extends React.Component {\n  public state = {\n    firstModalOpened: false,\n    secondModalOpened: false,\n  };\n\n  public renderModal(name: string, width: number) {\n    return (\n      <Modal width={width} onClose={this.close.bind(this, name)}>\n        <Modal.Header>Модалка #{name === 'firstModalOpened' ? '1' : '2'}</Modal.Header>\n        <Modal.Body>\n          {name === 'firstModalOpened' && (\n            <Button onClick={() => this.setState({ secondModalOpened: true })} data-tid=\"open-second-modal\">\n              Open second modal\n            </Button>\n          )}\n        </Modal.Body>\n      </Modal>\n    );\n  }\n\n  public render() {\n    const { firstModalOpened, secondModalOpened } = this.state;\n\n    return (\n      <div>\n        {firstModalOpened && this.renderModal('firstModalOpened', 500)}\n        {secondModalOpened && this.renderModal('secondModalOpened', 300)}\n        <Button onClick={() => this.setState({ firstModalOpened: true })} data-tid=\"open-first-modal\">\n          Open first modal\n        </Button>\n      </div>\n    );\n  }\n\n  public close(name: string) {\n    this.setState({ [name]: false });\n  }\n}\n\nconst ModalWithFooterPanel = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div style={{ width: '300px' }}>\n      {isOpen && (\n        <Modal onClose={() => setIsOpen(false)}>\n          <Modal.Header>Адрес места осуществления предпринимательской деятельности</Modal.Header>\n          <Modal.Body>\n            <Input placeholder=\"Страна\" />\n          </Modal.Body>\n          <Modal.Footer gap={8} panel>\n            <Button onClick={() => setIsOpen(false)}>Close</Button>\n            <Button>Do nothing</Button>\n          </Modal.Footer>\n        </Modal>\n      )}\n      <Button onClick={() => setIsOpen(true)}>Open modal</Button>\n    </div>\n  );\n};\n\nexport const ModalWithFooterPanelStory: Story = () => <ModalWithFooterPanel />;\nModalWithFooterPanelStory.storyName = 'Modal with footer panel';\n\ninterface ModalWithoutFooterPanelState {\n  opened: boolean;\n}\nclass ModalWithoutFooterPanel extends React.Component {\n  public state: ModalWithoutFooterPanelState = {\n    opened: false,\n  };\n\n  public renderModal() {\n    return (\n      <Modal onClose={this.close}>\n        <Modal.Header>Исправление ошибок</Modal.Header>\n        <Modal.Body>\n          <p style={basicFontStyle}>\n            Исправить ошибки можно у нас в сервисе. Для этого загрузите документы для редактирования. Также можно\n            посмотреть ошибки, исправить их в учетной программе и импортировать заново.\n          </p>\n        </Modal.Body>\n        <Modal.Footer>\n          <Button onClick={this.close}>Не создавать</Button>\n          <Button>Ничего не делать</Button>\n        </Modal.Footer>\n      </Modal>\n    );\n  }\n\n  public render() {\n    return (\n      <div style={{ width: '300px' }}>\n        {this.state.opened && this.renderModal()}\n        <Button onClick={this.open} data-tid=\"open-modal\">\n          Open modal\n        </Button>\n      </div>\n    );\n  }\n\n  public open = () => {\n    this.setState({ opened: true });\n  };\n\n  public close = () => {\n    this.setState({ opened: false });\n  };\n}\n\ninterface ModalWithoutFooterState {\n  opened: boolean;\n}\nclass ModalWithoutFooter extends React.Component {\n  public state: ModalWithoutFooterState = {\n    opened: false,\n  };\n\n  public renderModal() {\n    return (\n      <Modal onClose={this.close}>\n        <Modal.Header>Воспользуйтесь другим браузером</Modal.Header>\n        <Modal.Body>\n          <p style={basicFontStyle}>\n            Некоторые функции не работают в вашем браузере. Чтобы все работало, установите один из этих браузеров:\n            Firefox, Opera, Chrome.\n          </p>\n        </Modal.Body>\n      </Modal>\n    );\n  }\n\n  public render() {\n    return (\n      <div style={{ width: '300px' }}>\n        {this.state.opened && this.renderModal()}\n        <Button onClick={this.open} data-tid=\"open-modal\">\n          Open modal\n        </Button>\n      </div>\n    );\n  }\n\n  public open = () => {\n    this.setState({ opened: true });\n  };\n\n  public close = () => {\n    this.setState({ opened: false });\n  };\n}\n\ninterface ModalInnerState {\n  bigHeight: boolean;\n}\nclass ModalInner extends React.Component {\n  public state: ModalInnerState = {\n    bigHeight: false,\n  };\n\n  public render() {\n    return (\n      <div id=\"modal-inner\" style={{ width: 300 }}>\n        <Toggle checked={this.state.bigHeight} onValueChange={(bigHeight) => this.setState({ bigHeight })} /> конкретно\n        увеличить высоту\n        <p\n          style={{\n            height: this.state.bigHeight ? 1000 : 250,\n            transition: 'all 0.5s',\n            overflow: 'hidden',\n          }}\n        >\n          Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks.\n          Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks.\n          Use rxjs operators with react hooks. Use rxjs operators with react hooks. Use rxjs operators with react hooks.\n          Use rxjs operators with react hooks. Use rxjs operators with react hooks.\n        </p>\n      </div>\n    );\n  }\n}\n\ninterface ModalWithVariableHeightState {\n  opened: boolean;\n  panel: boolean;\n}\nclass ModalWithVariableHeight extends React.Component<React.PropsWithChildren> {\n  public state: ModalWithVariableHeightState = {\n    opened: false,\n    panel: false,\n  };\n\n  public render() {\n    return (\n      <div style={{ width: '300px' }}>\n        {this.state.opened && (\n          <Modal onClose={this.close}>\n            <Modal.Header>Title</Modal.Header>\n            <Modal.Body>\n              <p>Use rxjs operators with react hooks</p>\n\n              {this.props.children}\n\n              <div>\n                <Toggle\n                  checked={this.state.panel}\n                  onValueChange={() => this.setState(({ panel }: ModalWithVariableHeightState) => ({ panel: !panel }))}\n                />{' '}\n                Panel {this.state.panel ? 'enabled' : 'disabled'}\n              </div>\n            </Modal.Body>\n            <Modal.Footer panel={this.state.panel}>\n              <Button onClick={this.close}>Close</Button>\n            </Modal.Footer>\n          </Modal>\n        )}\n        <Button onClick={this.open} data-tid=\"open-modal\">\n          Open modal\n        </Button>\n      </div>\n    );\n  }\n\n  public open = () => {\n    this.setState({ opened: true });\n  };\n\n  public close = () => {\n    this.setState({ opened: false });\n  };\n}\n\nclass SmallModalOnTop extends React.Component {\n  public state = {\n    opened: false,\n  };\n\n  public renderModal() {\n    return (\n      <Modal onClose={this.close} alignTop>\n        <Modal.Header>Modal</Modal.Header>\n        <Modal.Body>\n          <Button data-tid=\"modal-content-button\">Content Button</Button>\n        </Modal.Body>\n      </Modal>\n    );\n  }\n\n  public render() {\n    return (\n      <div>\n        {this.state.opened && this.renderModal()}\n        <Button onClick={this.open} data-tid=\"open-modal\">\n          Open modal\n        </Button>\n      </div>\n    );\n  }\n\n  public open = () => {\n    this.setState({ opened: true });\n  };\n\n  public close = () => {\n    this.setState({ opened: false });\n  };\n}\n\nexport default {\n  title: 'Modal',\n  component: Modal,\n};\n\nexport const WithScrollableParentContent = () => <ModalWithScrollableContent />;\nWithScrollableParentContent.storyName = 'With scrollable parent content';\nWithScrollableParentContent.parameters = { creevey: { skip: true } };\n\nexport const WithIconInput: Story = () => <ModalWithIconInput />;\n\nexport const ModalOverAnotherModalStory: Story = () => <ModalOverAnotherModal />;\nModalOverAnotherModalStory.storyName = 'Modal over another modal';\n\nexport const DisabledModal = () => (\n  <Modal disableClose>\n    <Modal.Header>Disabled</Modal.Header>\n    <Modal.Body>Content of disabled body</Modal.Body>\n  </Modal>\n);\nDisabledModal.storyName = 'Disabled modal';\nDisabledModal.parameters = { creevey: { skip: true } };\n\nexport const ModalWithoutFooterPanelStory: Story = () => <ModalWithoutFooterPanel />;\nModalWithoutFooterPanelStory.storyName = 'Modal without footer panel';\n\nexport const ModalWithoutFooterStory: Story = () => <ModalWithoutFooter />;\nModalWithoutFooterStory.storyName = 'Modal without footer';\n\nexport const ModalWithoutHeader = () => (\n  <Modal>\n    <Modal.Body>\n      <div>\n        Некоторые функции не работают в вашем браузере. Чтобы все работало, установите один из этих браузеров: Firefox,\n        divpera, Chrome.\n      </div>\n    </Modal.Body>\n  </Modal>\n);\nModalWithoutHeader.storyName = 'Modal without header';\nModalWithoutHeader.parameters = { creevey: { captureElement: null } };\n\nexport const ModalWithVariableHeightOfContent: Story = () => (\n  <ModalWithVariableHeight>\n    <ModalInner />\n  </ModalWithVariableHeight>\n);\nModalWithVariableHeightOfContent.storyName = 'Modal with variable height of content';\n\nexport const ModalWithoutStickyElements: Story = () => (\n  <Modal>\n    <Modal.Header sticky={false}>Header</Modal.Header>\n    <Modal.Body>\n      {new Array(200).fill('Use rxjs operators with react hooks.').map((item, index) => (\n        <p key={index}>{item}</p>\n      ))}\n    </Modal.Body>\n    <Modal.Footer sticky={false}>Footer</Modal.Footer>\n  </Modal>\n);\nModalWithoutStickyElements.storyName = 'Modal without sticky elements';\n\nexport const WithAlignTop = () => (\n  <Modal alignTop>\n    <Modal.Body>\n      <p>Use rxjs operators with react hooks.</p>\n    </Modal.Body>\n  </Modal>\n);\nWithAlignTop.storyName = 'With alignTop';\nWithAlignTop.parameters = { creevey: { captureElement: null } };\n\nexport const SmallModalOnTheTop: Story = () => <SmallModalOnTop />;\nSmallModalOnTheTop.storyName = 'Small modal on the Top';\n\nexport const ModalWithVeryLongHeaderWithoutSpaces = () => (\n  <Modal width={350}>\n    <Modal.Header>VeryLongAndStrangeHeaderWithoutMeaningAndSpaces</Modal.Header>\n  </Modal>\n);\nModalWithVeryLongHeaderWithoutSpaces.storyName = 'Modal with veryLongHeaderWithoutSpaces';\nModalWithVeryLongHeaderWithoutSpaces.parameters = { creevey: { captureElement: null } };\n\nexport const ModalWithHeaderFromOtherComponent = () => {\n  const Header = () => <Modal.Header>Header </Modal.Header>;\n  return (\n    <Modal width={350}>\n      <Header></Header>\n      <Modal.Body>asdjhaklsdkajs</Modal.Body>\n    </Modal>\n  );\n};\nModalWithHeaderFromOtherComponent.storyName = 'Modal with Header from other Component';\nModalWithHeaderFromOtherComponent.parameters = { creevey: { skip: true } };\n\nexport const ModalBodyWithoutPadding = () => (\n  <ThemeContext.Consumer>\n    {(theme) => {\n      return (\n        <Modal width={250}>\n          <Modal.Body noPadding>\n            <div style={{ background: theme.prototype.constructor.name.includes('Dark') ? '1f1f1f' : 'white' }}>\n              <p>Loooooooong content content content</p>\n              <p>Loooooooong content content content</p>\n              <p>Loooooooong content content content</p>\n              <p>Loooooooong content content content</p>\n            </div>\n          </Modal.Body>\n        </Modal>\n      );\n    }}\n  </ThemeContext.Consumer>\n);\nModalBodyWithoutPadding.storyName = 'Modal with no-padding';\nModalBodyWithoutPadding.parameters = { creevey: { captureElement: null } };\n\nexport const AlignCenterAndNoClose = () => (\n  <Modal width={250} noClose>\n    <Modal.Header>\n      <div style={{ textAlign: 'center' }}>Header</div>\n    </Modal.Header>\n    <Modal.Body>\n      <div style={{ textAlign: 'center' }}>\n        <p>Loooooooong content content content</p>\n      </div>\n    </Modal.Body>\n  </Modal>\n);\nAlignCenterAndNoClose.parameters = { creevey: { captureElement: null } };\n\nconst Header = () => <Modal.Header sticky>Header</Modal.Header>;\nconst Body = () => (\n  <Modal.Body>\n    {new Array(200).fill('Use rxjs operators with react hooks.').map((item, index) => (\n      <p key={index}>{item}</p>\n    ))}\n  </Modal.Body>\n);\nconst Footer = () => (\n  <Modal.Footer sticky panel>\n    Footer\n  </Modal.Footer>\n);\n\nexport const ModalWithChildrenFromOtherComponent = () => (\n  <Modal>\n    <Header />\n    <Body />\n    <Footer />\n  </Modal>\n);\n\nexport const ChangeAllModalContent: Story = () => {\n  interface FirstContentProps {\n    onClick: () => void;\n    onClose: () => void;\n  }\n\n  const FirstContent: React.FC<FirstContentProps> = ({ onClick, onClose }) => (\n    <>\n      <Modal.Header>1</Modal.Header>\n      <Modal.Body>Первый контент</Modal.Body>\n      <Modal.Footer>\n        <Button onClick={onClose}>Понятно</Button>\n        <Button onClick={onClick} data-tid=\"open-second-modal\">\n          Поменять контент\n        </Button>\n      </Modal.Footer>\n    </>\n  );\n\n  const SecondContent: React.FC<FirstContentProps> = ({ onClick, onClose }) => (\n    <>\n      <Modal.Header>2</Modal.Header>\n      <Modal.Body>Второй контент</Modal.Body>\n      <Modal.Footer>\n        <Button onClick={onClose}>Понятно</Button>\n        <Button onClick={onClick}>Поменять контент</Button>\n      </Modal.Footer>\n    </>\n  );\n\n  const PayNotifice = () => {\n    const [content, setContent] = React.useState('first');\n    const [isOpened, setIsOpened] = React.useState(false);\n    const changeContent = () => setContent((prev) => (prev === 'first' ? 'second' : 'first'));\n\n    let modalContent: ReactNode;\n    switch (content) {\n      case 'first':\n        modalContent = <FirstContent onClick={changeContent} onClose={() => setIsOpened(false)} />;\n        break;\n      case 'second':\n        modalContent = <SecondContent onClick={changeContent} onClose={() => setIsOpened(false)} />;\n        break;\n    }\n\n    return (\n      <>\n        {isOpened && <Modal>{modalContent}</Modal>}\n        <Button use=\"pay\" onClick={() => setIsOpened(true)} data-tid=\"open-first-modal\">\n          Оплата\n        </Button>\n      </>\n    );\n  };\n  return <PayNotifice />;\n};\nChangeAllModalContent.storyName = 'Change all modal content';\n\nexport const CrossFocusedByTab: Story = () => {\n  return (\n    <Modal disableFocusLock>\n      <Modal.Header>Крестик в модалке</Modal.Header>\n      <Modal.Body>\n        <span>Тело модалки</span>\n      </Modal.Body>\n    </Modal>\n  );\n};\n\nexport const WithCutTitleOnStuck: Story = () => {\n  return (\n    <Modal width={500}>\n      <Modal.Header cutTitleOnStuck>Очень очень очень очень очень длинный заголовок</Modal.Header>\n      <Modal.Body>\n        <div style={{ height: '1000px' }}>Тело модалки</div>\n      </Modal.Body>\n    </Modal>\n  );\n};\nWithCutTitleOnStuck.storyName = 'With cut title on stuck';\n"]}

package/components/Modal/__tests__/Modal-test.d.ts

@@ -0,0 +1 @@
+export {};