@yamada-ui/autocomplete
Version:
Yamada UI autocomplete component
63 lines (61 loc) • 2 kB
JavaScript
"use client"
import {
useAutocompleteOption
} from "./chunk-NC62LKUX.mjs";
import {
AutocompleteItemIcon
} from "./chunk-GCATFLFE.mjs";
import {
useAutocompleteContext
} from "./chunk-X5V76SN2.mjs";
// src/autocomplete-option.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { cx } from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var AutocompleteOption = forwardRef(
({ className, icon, ...rest }, ref) => {
const { styles } = useAutocompleteContext();
const { children, customIcon, selected, getOptionProps } = useAutocompleteOption(rest);
icon != null ? icon : icon = customIcon;
const css = {
alignItems: "center",
color: "inherit",
display: "flex",
flex: "0 0 auto",
gap: "0.75rem",
outline: 0,
textAlign: "start",
textDecoration: "none",
userSelect: "none",
width: "100%",
...styles.item
};
return /* @__PURE__ */ jsxs(
ui.div,
{
className: cx("ui-autocomplete__item", className),
__css: css,
...getOptionProps({}, ref),
children: [
icon !== null ? /* @__PURE__ */ jsx(AutocompleteItemIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ jsx(AutocompleteCheckIcon, {}) }) : null,
/* @__PURE__ */ jsx(ui.span, { style: { flex: 1 }, "data-label": true, children })
]
}
);
}
);
AutocompleteOption.displayName = "AutocompleteOption";
AutocompleteOption.__ui__ = "AutocompleteOption";
var AutocompleteCheckIcon = () => /* @__PURE__ */ jsx("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ jsx(
"polygon",
{
fill: "currentColor",
points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
}
) });
AutocompleteCheckIcon.displayName = "AutocompleteCheckIcon";
AutocompleteCheckIcon.__ui__ = "AutocompleteCheckIcon";
export {
AutocompleteOption
};
//# sourceMappingURL=chunk-MNMEH7ZC.mjs.map