import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { styled } from '../core';
import { List } from '../list';
import { Popover } from '../popover';
import { cs } from '../utils';
const InputContainer = styled.divBox `
  width: 100%;
`;
const options = {
    aria: {
        expanded: false,
    },
};
/** Wrapper for the autocomplete popover. */
export const AutoCompletePopover = ({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect, }) => {
    if (autoCompleteOptions === undefined)
        return children;
    return (_jsxs(Popover, { options: options, placement: "bottom-start", children: [_jsx(Popover.Trigger, { as: InputContainer, className: cs('vui-input-popoverTrigger'), children: children }), !!autoCompleteOptions && (_jsx(Popover.Content, { children: _jsx(List, { maxH: autoCompleteMaxHeight, children: autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i) => (_jsx(List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", onClick: () => onAutoCompleteSelect(i), children: i }, i))) }) }))] }));
};
export default memo(AutoCompletePopover);
//# sourceMappingURL=autoCompletePopover.js.map