@veracity/vui/dist/textField/textFieldAutoComplete.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import styled from "../core/styled.js";
import { List } from "../list/list.js";
import Popover from "../popover/popover.js";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/textField/textFieldAutoComplete.tsx
const TextFieldAutoCompleteContainer = styled.divBox`
  width: 100%;
`;
/** Wrapper for the autocomplete popover. */
const TextFieldAutoComplete = memo(function TextFieldAutoComplete({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }) {
	if (!autoCompleteOptions?.length) return children;
	return /* @__PURE__ */ jsxs(Popover, {
		placement: "bottom-start",
		matchWidth: true,
		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
			as: TextFieldAutoCompleteContainer,
			className: cs("vui-autoComplete-trigger"),
			children
		}), /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(List, {
			maxH: autoCompleteMaxHeight,
			w: "100%",
			className: cs("vui-autoComplete-list"),
			children: autoCompleteOptions.filter(filterAutoCompleteOptions).map((i) => /* @__PURE__ */ jsx(List.Item, {
				cursor: "pointer",
				hoverBg: "skyBlue.hover",
				onClick: () => onAutoCompleteSelect(i),
				children: i
			}, i))
		}) })]
	});
});

//#endregion
export { TextFieldAutoComplete, TextFieldAutoComplete as default };
globalThis.__vuiVersion__ = "5.4.0-alpha"
//# sourceMappingURL=textFieldAutoComplete.js.map