"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AutoCompletePopover = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const core_1 = require("../core");
const list_1 = require("../list");
const popover_1 = require("../popover");
const utils_1 = require("../utils");
const InputContainer = core_1.styled.divBox `
  width: 100%;
`;
const options = {
    aria: {
        expanded: false,
    },
};
/** Wrapper for the autocomplete popover. */
const AutoCompletePopover = ({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect, }) => {
    var _a;
    if (autoCompleteOptions === undefined)
        return children;
    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { options: options, placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover.Trigger, { as: InputContainer, className: (0, utils_1.cs)('vui-input-popoverTrigger'), children: children }), !!autoCompleteOptions && ((0, jsx_runtime_1.jsx)(popover_1.Popover.Content, { children: (0, jsx_runtime_1.jsx)(list_1.List, { maxH: autoCompleteMaxHeight, children: (_a = autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.filter) === null || _a === void 0 ? void 0 : _a.call(autoCompleteOptions, filterAutoCompleteOptions).map((i) => ((0, jsx_runtime_1.jsx)(list_1.List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", onClick: () => onAutoCompleteSelect(i), children: i }, i))) }) }))] }));
};
exports.AutoCompletePopover = AutoCompletePopover;
exports.default = react_1.default.memo(exports.AutoCompletePopover);
//# sourceMappingURL=autoCompletePopover.js.map