@octopusdeploy/design-system-components/dist/src/components/Form/Select/SelectDropdown.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectDropdown = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Popover_1 = require("../../Popover");
const SharedFormStyling_styles_1 = require("../Primitives/SharedFormStyling.styles");
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: SharedFormStyling_styles_1.dropdownContainerStyles, style: { width: buttonWidth }, ref: ref, tabIndex: -1, children: children }) }));
});
exports.SelectDropdown.displayName = "SelectDropdown";