@yamada-ui/autocomplete
Version:
Yamada UI autocomplete component
259 lines (257 loc) • 7.77 kB
JavaScript
"use client"
import {
useAutocomplete,
useAutocompleteInput
} from "./chunk-NUGZZ2IV.mjs";
import {
AutocompleteCreate
} from "./chunk-ELWBPJHC.mjs";
import {
AutocompleteEmpty
} from "./chunk-UHODLDEV.mjs";
import {
AutocompleteList
} from "./chunk-OWWPKTOS.mjs";
import {
AutocompleteClearIcon,
AutocompleteIcon
} from "./chunk-GCATFLFE.mjs";
import {
AutocompleteDescendantsContextProvider,
AutocompleteProvider,
useAutocompleteContext
} from "./chunk-X5V76SN2.mjs";
// src/multi-autocomplete.tsx
import {
forwardRef,
omitThemeProps,
ui,
useComponentMultiStyle
} from "@yamada-ui/core";
import { Popover, PopoverTrigger } from "@yamada-ui/popover";
import { Portal } from "@yamada-ui/portal";
import { cx, handlerAll, runIfFunc } from "@yamada-ui/utils";
import { cloneElement, useMemo } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var MultiAutocomplete = forwardRef(
(props, ref) => {
const [styles, mergedProps] = useComponentMultiStyle(
"MultiAutocomplete",
props
);
const {
className,
isClearable = true,
clearable = isClearable,
closeOnSelect = false,
color,
component,
defaultValue = [],
footer,
height,
h = height,
header,
keepPlaceholder = false,
minHeight,
minH = minHeight,
separator,
clearIconProps,
containerProps,
contentProps,
createProps,
emptyProps,
fieldProps,
iconProps,
inputProps,
listProps,
portalProps = { disabled: true },
...computedProps
} = omitThemeProps(mergedProps);
const {
allowCreate,
children,
descendants,
empty,
inputValue,
value,
formControlProps,
getContainerProps,
getFieldProps,
getPopoverProps,
onClear,
onClose,
...rest
} = useAutocomplete({
...computedProps,
closeOnSelect,
defaultValue
});
const css = {
color,
h: "fit-content",
w: "100%",
...styles.container
};
return /* @__PURE__ */ jsx(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
AutocompleteProvider,
{
value: {
...rest,
allowCreate,
empty,
inputValue,
styles,
value,
formControlProps,
onClose
},
children: /* @__PURE__ */ jsx(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
ui.div,
{
className: cx("ui-multi-autocomplete", className),
__css: css,
...getContainerProps(containerProps),
children: [
/* @__PURE__ */ jsxs(
ui.div,
{
className: "ui-multi-autocomplete__inner",
__css: { position: "relative", ...styles.inner },
children: [
/* @__PURE__ */ jsx(
MultiAutocompleteField,
{
component,
h,
keepPlaceholder,
minH,
separator,
inputProps,
...getFieldProps(fieldProps, ref)
}
),
clearable && value.length ? /* @__PURE__ */ jsx(
AutocompleteClearIcon,
{
...clearIconProps,
onClick: handlerAll(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
...formControlProps
}
) : /* @__PURE__ */ jsx(AutocompleteIcon, { ...iconProps, ...formControlProps })
]
}
),
/* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
AutocompleteList,
{
footer: runIfFunc(footer, { value, onClose }),
header: runIfFunc(header, { value, onClose }),
contentProps,
...listProps,
children: !empty ? /* @__PURE__ */ jsxs(Fragment, { children: [
allowCreate ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps }),
children
] }) : allowCreate && inputValue ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps })
}
) })
]
}
) })
}
) });
}
);
MultiAutocomplete.displayName = "MultiAutocomplete";
MultiAutocomplete.__ui__ = "MultiAutocomplete";
var MultiAutocompleteField = forwardRef(
({
className,
component,
h,
keepPlaceholder,
minH,
placeholder,
separator = ",",
inputProps,
...rest
}, ref) => {
const { inputRef, inputValue, label, open, styles, value, onChange } = useAutocompleteContext();
const { getInputProps } = useAutocompleteInput();
const cloneChildren = useMemo(() => {
if (!(label == null ? void 0 : label.length)) return null;
if (component) {
return label.map((label2, index) => {
if (!value[index]) return null;
const onRemove = (ev) => {
if (!value[index]) return;
ev.stopPropagation();
onChange(value[index]);
if (inputRef.current) inputRef.current.focus();
};
const el = component({
index,
label: label2,
value: value[index],
onRemove
});
const style = {
marginBlockEnd: "0.125rem",
marginBlockStart: "0.125rem",
marginInlineEnd: "0.25rem"
};
return el ? cloneElement(el, { key: index, style }) : null;
});
} else {
return label.map((value2, index) => {
const isLast = label.length === index + 1;
return /* @__PURE__ */ jsxs(ui.span, { display: "inline-block", me: "0.25rem", children: [
value2,
!isLast || open ? separator : null
] }, index);
});
}
}, [label, component, value, onChange, open, inputRef, separator]);
const css = {
alignItems: "center",
display: "flex",
flexWrap: "wrap",
h,
minH,
pe: "2rem",
...styles.field,
cursor: "text"
};
if ((label == null ? void 0 : label.length) && component) css.py = "0.125rem";
return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs(
ui.div,
{
className: cx("ui-multi-autocomplete__field", className),
__css: css,
...rest,
children: [
cloneChildren,
/* @__PURE__ */ jsx(
ui.input,
{
className: "ui-multi-autocomplete__field__input",
display: "inline-block",
flex: "1",
marginBlockEnd: "0.125rem",
marginBlockStart: "0.125rem",
minW: "0px",
overflow: "hidden",
placeholder: !(label == null ? void 0 : label.length) || keepPlaceholder && open ? placeholder : void 0,
...getInputProps({ ...inputProps, value: inputValue }, ref)
}
)
]
}
) });
}
);
MultiAutocompleteField.displayName = "MultiAutocompleteField";
MultiAutocompleteField.__ui__ = "MultiAutocompleteField";
export {
MultiAutocomplete
};
//# sourceMappingURL=chunk-L6QBPMNN.mjs.map