@yandex/ui/esm/Popup/__examples__/boundary.js

Yandex UI components

import { __read } from "tslib";
import React, { useRef, useState } from 'react';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { Popup } from '@yandex-lego/components/Popup/desktop/bundle';
var styles = "\n    .scrollable {\n        overflow: auto;\n        height: 300px;\n        background-color: #f2f2f2;\n        text-align: center;\n    }\n\n    .scrollable::before,\n    .scrollable::after {\n        content: '';\n        display: block;\n        height: 600px;\n        width: 1px;\n    }\n\n    .hidden {\n        display: inline-block;\n        overflow: hidden;\n    }\n";
export var Boundary = function () {
    var scopeRef = useRef(null);
    var boundaryRef = useRef(null);
    var anchorRef = useRef(null);
    var _a = __read(useState(false), 2), visible = _a[0], setVisible = _a[1];
    return (React.createElement(React.Fragment, null,
        React.createElement("style", null, styles),
        React.createElement("div", { ref: scopeRef },
            React.createElement("div", { className: "scrollable", ref: boundaryRef },
                React.createElement("span", { className: "hidden" },
                    React.createElement(Button, { innerRef: anchorRef, view: "action", size: "m", onClick: function () { return setVisible(true); } }, "anchor")),
                React.createElement(Popup, { view: "default", target: "anchor", direction: ['bottom', 'top'], anchor: anchorRef, scope: scopeRef, visible: visible, onClose: function () { return setVisible(false); }, boundary: boundaryRef },
                    React.createElement("div", { style: { padding: 16, maxWidth: 300, fontFamily: 'var(--control-font-family)' } }, "\u041E\u0431\u0449\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430\u044F \u043C\u043D\u043E\u0433\u043E\u044F\u0437\u044B\u0447\u043D\u0430\u044F \u0443\u043D\u0438\u0432\u0435\u0440\u0441\u0430\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442-\u044D\u043D\u0446\u0438\u043A\u043B\u043E\u043F\u0435\u0434\u0438\u044F \u0441\u043E \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u044B\u043C \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C."))))));
};