@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
199 lines (195 loc) • 7.65 kB
JavaScript
"use client";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { CheckIcon } from "../icon/icons/check-icon.js";
import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
import { MinusIcon } from "../icon/icons/minus-icon.js";
import { XIcon } from "../icon/icons/x-icon.js";
import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
import { useInputBorder } from "../input/use-input-border.js";
import { useInputPropsContext } from "../input/input.js";
import { InputElement } from "../input/input-element.js";
import { useGroupItemProps } from "../group/use-group.js";
import { InputGroupRoot } from "../input/input-group.js";
import { ComboboxContext, ComboboxDescendantsContext, ComboboxGroupContext, createComboboxChildren, createComboboxItem, useComboboxGroup, useComboboxGroupContext } from "../../hooks/use-combobox/index.js";
import { autocompleteStyle } from "./autocomplete.style.js";
import { AutocompleteContext, useAutocomplete, useAutocompleteOption } from "./use-autocomplete.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/autocomplete/autocomplete.tsx
const { ComponentContext, PropsContext: AutocompletePropsContext, useComponentContext, usePropsContext: useAutocompletePropsContext, withContext, withProvider } = createSlotComponent("autocomplete", autocompleteStyle);
/**
* `Autocomplete` is a component used to display suggestions in response to user text input.
*
* @see https://yamada-ui.com/docs/components/autocomplete
*/
const AutocompleteRoot = withProvider((props) => {
const [groupItemProps, { className, css, colorScheme, animationScheme = "block-start", children, clearable = true, clearIcon = /* @__PURE__ */ jsx(XIcon, {}), duration, emptyIcon, errorBorderColor, focusBorderColor, icon, items: itemsProp, contentProps, elementProps, emptyProps, groupProps, iconProps, inputProps, optionProps, rootProps,...rest }] = useGroupItemProps(props);
const { children: fieldChildren, descendants, items: computedItems, max, value, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, getSeparatorProps, popoverProps, onActiveDescendant, onClose, onSelect } = useAutocomplete({
items: useMemo(() => {
if (itemsProp) return itemsProp;
return createComboboxItem(children, {
Group: AutocompleteGroup,
Label: AutocompleteLabel,
Option: AutocompleteOption
});
}, [itemsProp, children]),
...rest
});
const mergedPopoverProps = useMemo(() => ({
animationScheme,
duration,
...popoverProps
}), [
animationScheme,
duration,
popoverProps
]);
const computedChildren = useMemo(() => createComboboxChildren(computedItems, {
Empty: AutocompleteEmpty,
Group: AutocompleteGroup,
Option: AutocompleteOption
}), [computedItems]);
const varProps = useInputBorder({
errorBorderColor,
focusBorderColor
});
const comboboxContext = useMemo(() => ({
onActiveDescendant,
onClose,
onSelect
}), [
onActiveDescendant,
onClose,
onSelect
]);
const autocompleteContext = useMemo(() => ({
max,
value
}), [value, max]);
const componentContext = useMemo(() => ({
emptyIcon,
emptyProps,
getInputProps,
getSeparatorProps,
groupProps,
inputProps,
optionProps
}), [
emptyIcon,
emptyProps,
getInputProps,
getSeparatorProps,
groupProps,
inputProps,
optionProps
]);
const hasValue = (0, utils_exports.isArray)(value) ? !!value.length : !!value;
return /* @__PURE__ */ jsx(ComboboxDescendantsContext, {
value: descendants,
children: /* @__PURE__ */ jsx(ComboboxContext, {
value: comboboxContext,
children: /* @__PURE__ */ jsx(AutocompleteContext, {
value: autocompleteContext,
children: /* @__PURE__ */ jsx(ComponentContext, {
value: componentContext,
children: /* @__PURE__ */ jsxs(PopoverRoot, {
...mergedPopoverProps,
children: [/* @__PURE__ */ jsxs(InputGroupRoot, {
className,
css,
colorScheme,
...getRootProps({
...groupItemProps,
...rootProps
}),
children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(AutocompleteField, {
...getFieldProps(varProps),
children: fieldChildren
}) }), /* @__PURE__ */ jsx(InputElement, {
clickable: clearable && hasValue,
...elementProps,
children: clearable && hasValue ? /* @__PURE__ */ jsx(AutocompleteIcon, {
icon: clearIcon,
...getClearIconProps(iconProps)
}) : /* @__PURE__ */ jsx(AutocompleteIcon, {
icon,
...getIconProps(iconProps)
})
})]
}), /* @__PURE__ */ jsx(AutocompleteContent, {
...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(contentProps))),
children: computedChildren
})]
})
})
})
})
});
}, "root")((props) => {
return {
...useInputPropsContext(),
...props
};
});
const AutocompleteField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children,...rest }) => {
const { getInputProps, inputProps } = useComponentContext();
return {
...rest,
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx(AutocompleteInput, { ...getInputProps(inputProps) })] })
};
});
const AutocompleteInput = withContext("input", "input")();
const AutocompleteIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
children: icon || children || /* @__PURE__ */ jsx(ChevronDownIcon, {}),
...rest
}));
const AutocompleteContent = withContext(PopoverContent, "content")();
const AutocompleteLabel = withContext("span", "label")(void 0, (props) => {
const { getLabelProps } = useComboboxGroupContext();
return getLabelProps(props);
});
const AutocompleteGroup = withContext(({ children, label, labelProps,...rest }) => {
const { groupProps } = useComponentContext();
const { getGroupProps, getLabelProps } = useComboboxGroup({
...groupProps,
...rest
});
return /* @__PURE__ */ jsx(ComboboxGroupContext, {
value: useMemo(() => ({ getLabelProps }), [getLabelProps]),
children: /* @__PURE__ */ jsxs(styled.div, {
...getGroupProps(),
children: [label ? /* @__PURE__ */ jsx(AutocompleteLabel, {
...labelProps,
children: label
}) : null, children]
})
});
}, "group")();
const AutocompleteOption = withContext(({ children, icon: iconProp,...rest }) => {
const { optionProps: { icon,...optionProps } = {} } = useComponentContext();
const { getIndicatorProps, getOptionProps } = useAutocompleteOption({
...optionProps,
...rest
});
return /* @__PURE__ */ jsxs(styled.div, {
...getOptionProps(),
children: [/* @__PURE__ */ jsx(AutocompleteIndicator, {
...getIndicatorProps(),
children: iconProp ?? icon ?? /* @__PURE__ */ jsx(CheckIcon, {})
}), children]
});
}, "option")();
const AutocompleteEmpty = withContext(({ children, icon,...rest }) => {
const { emptyIcon, emptyProps } = useComponentContext();
return /* @__PURE__ */ jsxs(styled.div, {
...emptyProps,
...rest,
children: [/* @__PURE__ */ jsx(AutocompleteIndicator, { children: icon ?? emptyIcon ?? /* @__PURE__ */ jsx(MinusIcon, {}) }), children]
});
}, "empty")();
const AutocompleteIndicator = withContext("div", "indicator")();
//#endregion
export { AutocompleteGroup, AutocompleteLabel, AutocompleteOption, AutocompletePropsContext, AutocompleteRoot, useAutocompletePropsContext };
//# sourceMappingURL=autocomplete.js.map