import React, { memo, useMemo, useRef, useEffect } from "react";
import { components } from "react-select";
import { FixedSizeList as List } from "react-window";
export const VirtualRow = memo(({ style, children }) => (React.createElement("div", { style: style }, children)));
export function VirtualMenuList(props) {
    const { children, options, maxHeight, getValue, getStyles, selectProps } = props;
    const { noOptionsMessage, rowHeight = 0 } = selectProps;
    const listRef = useRef();
    const [value] = getValue();
    const initialOffset = options.indexOf(value) * rowHeight;
    const childrenLength = Array.isArray(children) ? children.length : 0;
    const minHeight = Math.min(maxHeight, rowHeight * childrenLength);
    const menuStyle = getStyles("menuList", props);
    const focusedIndex = useMemo(() => Array.isArray(children)
        ? Math.max(children.findIndex((child) => React.isValidElement(child) && child.props.isFocused), 0)
        : 0, [children]);
    useEffect(() => {
        var _a;
        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(focusedIndex);
    }, [focusedIndex]);
    if (!children || !Array.isArray(children))
        return React.createElement(React.Fragment, null);
    if (childrenLength === 0 && noOptionsMessage) {
        return React.createElement(components.NoOptionsMessage, Object.assign({}, props, { innerProps: {} }));
    }
    children.length &&
        children.forEach((node) => {
            if (!node || !React.isValidElement(node))
                return;
            delete node.props.innerProps.onMouseMove; // NB: Removes lag on hover, see https://github.com/JedWatson/react-select/issues/3128#issuecomment-433834170
            delete node.props.innerProps.onMouseOver;
        });
    return (React.createElement("div", { style: Object.assign(Object.assign({}, menuStyle), { maxHeight: "auto" }), onWheelCapture: e => 
        /*
          This event causes issues with react-window.
          react-select logic is based on whether the bottom/top of the list has been reached
          but with virtual lists it just does not work and prevents scrolling…
        */
        e.stopPropagation() },
        React.createElement(List, { ref: listRef, width: "100%", height: minHeight, overscanCount: 50, itemCount: childrenLength, itemSize: rowHeight, initialScrollOffset: initialOffset }, ({ index, style }) => React.createElement(VirtualRow, { style: style }, children[index]))));
}
//# sourceMappingURL=VirtualMenuList.js.map