@grafana/ui
Version:
Grafana Components Library
37 lines (34 loc) • 1.81 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { useState, memo } from 'react';
import { Menu } from '../Menu/Menu.mjs';
import { MenuItem } from '../Menu/MenuItem.mjs';
import { ScrollContainer } from '../ScrollContainer/ScrollContainer.mjs';
import { ToolbarButton } from '../ToolbarButton/ToolbarButton.mjs';
import { Dropdown } from './Dropdown.mjs';
;
const ButtonSelectComponent = (props) => {
const { className, options, value, onChange, narrow, variant, root, ...restProps } = props;
const [isOpen, setIsOpen] = useState(false);
const renderMenu = () => /* @__PURE__ */ jsx(Menu, { tabIndex: -1, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsx(ScrollContainer, { maxHeight: "100vh", children: options.map((item) => {
var _a;
return /* @__PURE__ */ jsx(
MenuItem,
{
label: (_a = item.label) != null ? _a : String(item.value),
onClick: () => onChange(item),
active: item.value === (value == null ? void 0 : value.value),
ariaChecked: item.value === (value == null ? void 0 : value.value),
ariaLabel: item.ariaLabel || item.label,
disabled: item.isDisabled,
component: item.component,
role: "menuitemradio"
},
`${item.value}`
);
}) }) });
return /* @__PURE__ */ jsx(Dropdown, { root, overlay: renderMenu, placement: "bottom-end", children: /* @__PURE__ */ jsx(ToolbarButton, { className, isOpen, narrow, variant, ...restProps, children: (value == null ? void 0 : value.label) || ((value == null ? void 0 : value.value) != null ? String(value == null ? void 0 : value.value) : null) }) });
};
ButtonSelectComponent.displayName = "ButtonSelect";
const ButtonSelect = memo(ButtonSelectComponent);
export { ButtonSelect };
//# sourceMappingURL=ButtonSelect.mjs.map