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

Yandex UI components

import { __read } from "tslib";
import React, { useRef, useState } from 'react';
import { Popup } from '@yandex-lego/components/Popup/desktop/bundle';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
export var Theme = function () {
    var scopeRef = useRef(null);
    var anchorRef1 = useRef(null);
    var anchorRef2 = useRef(null);
    var _a = __read(useState(false), 2), visible1 = _a[0], setVisible1 = _a[1];
    var _b = __read(useState(false), 2), visible2 = _b[0], setVisible2 = _b[1];
    return (React.createElement("div", { ref: scopeRef, style: { display: 'flex' } },
        React.createElement(Button, { onClick: function () { return setVisible1(!visible1); }, innerRef: anchorRef1, view: "default", size: "m" }, "Open popup (theme clear)"),
        React.createElement(Popup, { hasTail: true, target: "anchor", anchor: anchorRef1, direction: "bottom", theme: "clear", visible: visible1, scope: scopeRef },
            React.createElement("div", { style: { padding: 8, fontFamily: 'var(--control-font-family)' } }, "Clear")),
        "\u00A0",
        React.createElement(Button, { onClick: function () { return setVisible2(!visible2); }, innerRef: anchorRef2, view: "default", size: "m" }, "Open popup (theme normal)"),
        React.createElement(Popup, { hasTail: true, target: "anchor", anchor: anchorRef2, direction: "bottom", theme: "normal", visible: visible2, scope: scopeRef },
            React.createElement("div", { style: { padding: 8, fontFamily: 'var(--control-font-family)' } }, "Normal"))));
};