@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
91 lines (90 loc) • 3.12 kB
JavaScript
"use client";
import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
import Icon from "../../Icon/Icon.mjs";
import { rootVariants, styles } from "../Input/style.mjs";
import { styles as styles$1 } from "./style.mjs";
import { memo, useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx, useThemeMode } from "antd-style";
import { XIcon } from "lucide-react";
import { Autocomplete } from "@base-ui/react/autocomplete";
//#region src/base-ui/AutoComplete/AutoComplete.tsx
const AutoComplete = memo(({ className, classNames, styles: customStyles, style, variant, shadow, size = "middle", options = [], onChange, onSearch, allowClear, disabled, placeholder, prefix, suffix, emptyText, ...rest }) => {
const { isDarkMode } = useThemeMode();
const appElement = useAppElement();
const anchorRef = useRef(null);
const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
const items = useMemo(() => options.map((option) => typeof option === "string" ? { value: option } : option), [options]);
return /* @__PURE__ */ jsxs(Autocomplete.Root, {
openOnInputClick: true,
disabled,
itemToStringValue: (item) => item.value,
items,
onValueChange: (value) => {
onChange?.(value);
onSearch?.(value);
},
...rest,
children: [/* @__PURE__ */ jsxs("div", {
className: cx(rootVariants({
shadow,
size,
variant: mergedVariant
}), className),
"data-disabled": disabled ? "" : void 0,
ref: anchorRef,
style,
children: [
prefix && /* @__PURE__ */ jsx("span", {
className: styles.slot,
children: prefix
}),
/* @__PURE__ */ jsx(Autocomplete.Input, {
className: cx(styles.input, classNames?.input),
placeholder,
style: customStyles?.input
}),
allowClear && /* @__PURE__ */ jsx(Autocomplete.Clear, {
"aria-label": "Clear",
className: styles$1.clear,
children: /* @__PURE__ */ jsx(Icon, {
icon: XIcon,
size: 14
})
}),
suffix && /* @__PURE__ */ jsx("span", {
className: styles.slot,
children: suffix
})
]
}), /* @__PURE__ */ jsx(Autocomplete.Portal, {
container: appElement ?? void 0,
children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
anchor: anchorRef,
className: styles$1.positioner,
sideOffset: 4,
children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
className: cx(styles$1.popup, classNames?.popup),
style: customStyles?.popup,
children: [emptyText && /* @__PURE__ */ jsx(Autocomplete.Empty, {
className: styles$1.empty,
children: emptyText
}), /* @__PURE__ */ jsx(Autocomplete.List, {
className: styles$1.list,
children: (item) => /* @__PURE__ */ jsx(Autocomplete.Item, {
className: cx(styles$1.item, classNames?.item),
disabled: item.disabled,
style: customStyles?.item,
value: item,
children: item.label ?? item.value
}, item.value)
})]
})
})
})]
});
});
AutoComplete.displayName = "AutoComplete";
//#endregion
export { AutoComplete as default };
//# sourceMappingURL=AutoComplete.mjs.map