@intility/bifrost-react-select/dist/overrides/Menu.internal.js

React select component for Intility's design system, Bifrost.

import { jsx as _jsx } from "react/jsx-runtime";
import { Dropdown } from "@intility/bifrost-react";
import useResizeObserver from "@intility/bifrost-react/hooks/useResizeObserver";
import { createContext, useContext, useRef } from "react";
import { components } from "react-select";
export const SelectRefCtx = /*#__PURE__*/ createContext(null);
export default function Menu(props) {
    const { menuPlacement, menuPosition } = props;
    const controlElement = useContext(SelectRefCtx);
    // Keep width of dropdown in sync with select control
    const divRef = useRef(null);
    useResizeObserver(controlElement, (entry)=>{
        if (!divRef.current) return;
        divRef.current.style.width = entry.borderBoxSize[0].inlineSize + "px";
    });
    return /*#__PURE__*/ _jsx(Dropdown, {
        unstyled: true,
        noArrow: true,
        visible: true,
        reference: controlElement,
        placement: menuPlacement === "auto" ? "bottom" : menuPlacement,
        strategy: menuPosition,
        offset: [
            0,
            4
        ],
        content: /*#__PURE__*/ _jsx("div", {
            ref: divRef,
            style: {
                width: controlElement?.offsetWidth
            },
            children: /*#__PURE__*/ _jsx(components.Menu, {
                ...props
            })
        })
    });
}