@octopusdeploy/design-system-components
Version:
The design systems component library.
32 lines (31 loc) • 1.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectDropdown = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const react_1 = require("react");
const Popover_1 = require("../../Popover");
exports.SelectDropdown = (0, react_1.forwardRef)(({ dropdownButtonState, anchorElement, children }, ref) => {
const [buttonWidth, setButtonWidth] = (0, react_1.useState)(undefined);
const anchor = anchorElement ?? dropdownButtonState.buttonElement;
(0, react_1.useLayoutEffect)(() => {
if (!anchor)
return;
const updateWidth = () => {
setButtonWidth(anchor.offsetWidth);
};
const resizeObserver = new ResizeObserver(updateWidth);
resizeObserver.observe(anchor);
return () => {
resizeObserver.disconnect();
};
}, [anchor]);
return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { placement: "bottom-start", anchorEl: anchor, open: dropdownButtonState.isOpen, onClose: dropdownButtonState.closeDropdown, elementId: dropdownButtonState.dropdownAttributes.dropdownId, boundaryPadding: 16, children: (0, jsx_runtime_1.jsx)("div", { className: dropdownContainerStyles, style: { width: buttonWidth }, ref: ref, tabIndex: -1, children: children }) }));
});
exports.SelectDropdown.displayName = "SelectDropdown";
const dropdownContainerStyles = (0, css_1.css)({
boxSizing: "border-box",
maxHeight: "18.75rem",
display: "flex",
flexDirection: "column",
});