@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
207 lines (203 loc) • 9.3 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_check_icon = require('../icon/icons/check-icon.cjs');
const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
const require_minus_icon = require('../icon/icons/minus-icon.cjs');
const require_x_icon = require('../icon/icons/x-icon.cjs');
const require_popover = require('../popover/popover.cjs');
const require_use_input_border = require('../input/use-input-border.cjs');
const require_input = require('../input/input.cjs');
const require_input_element = require('../input/input-element.cjs');
const require_use_group = require('../group/use-group.cjs');
const require_input_group = require('../input/input-group.cjs');
const require_hooks_use_combobox_index = require('../../hooks/use-combobox/index.cjs');
const require_autocomplete_style = require('./autocomplete.style.cjs');
const require_use_autocomplete = require('./use-autocomplete.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/autocomplete/autocomplete.tsx
const { ComponentContext, PropsContext: AutocompletePropsContext, useComponentContext, usePropsContext: useAutocompletePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("autocomplete", require_autocomplete_style.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__ */ (0, react_jsx_runtime.jsx)(require_x_icon.XIcon, {}), duration, emptyIcon, errorBorderColor, focusBorderColor, icon, items: itemsProp, contentProps, elementProps, emptyProps, groupProps, iconProps, inputProps, optionProps, rootProps,...rest }] = require_use_group.useGroupItemProps(props);
const { children: fieldChildren, descendants, items: computedItems, max, value, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, getSeparatorProps, popoverProps, onActiveDescendant, onClose, onSelect } = require_use_autocomplete.useAutocomplete({
items: (0, react.useMemo)(() => {
if (itemsProp) return itemsProp;
return require_hooks_use_combobox_index.createComboboxItem(children, {
Group: AutocompleteGroup,
Label: AutocompleteLabel,
Option: AutocompleteOption
});
}, [itemsProp, children]),
...rest
});
const mergedPopoverProps = (0, react.useMemo)(() => ({
animationScheme,
duration,
...popoverProps
}), [
animationScheme,
duration,
popoverProps
]);
const computedChildren = (0, react.useMemo)(() => require_hooks_use_combobox_index.createComboboxChildren(computedItems, {
Empty: AutocompleteEmpty,
Group: AutocompleteGroup,
Option: AutocompleteOption
}), [computedItems]);
const varProps = require_use_input_border.useInputBorder({
errorBorderColor,
focusBorderColor
});
const comboboxContext = (0, react.useMemo)(() => ({
onActiveDescendant,
onClose,
onSelect
}), [
onActiveDescendant,
onClose,
onSelect
]);
const autocompleteContext = (0, react.useMemo)(() => ({
max,
value
}), [value, max]);
const componentContext = (0, react.useMemo)(() => ({
emptyIcon,
emptyProps,
getInputProps,
getSeparatorProps,
groupProps,
inputProps,
optionProps
}), [
emptyIcon,
emptyProps,
getInputProps,
getSeparatorProps,
groupProps,
inputProps,
optionProps
]);
const hasValue = (0, require_utils_index.utils_exports.isArray)(value) ? !!value.length : !!value;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks_use_combobox_index.ComboboxDescendantsContext, {
value: descendants,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks_use_combobox_index.ComboboxContext, {
value: comboboxContext,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_autocomplete.AutocompleteContext, {
value: autocompleteContext,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: componentContext,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverRoot, {
...mergedPopoverProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
className,
css,
colorScheme,
...getRootProps({
...groupItemProps,
...rootProps
}),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteField, {
...getFieldProps(varProps),
children: fieldChildren
}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
clickable: clearable && hasValue,
...elementProps,
children: clearable && hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIcon, {
icon: clearIcon,
...getClearIconProps(iconProps)
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIcon, {
icon,
...getIconProps(iconProps)
})
})]
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteContent, {
...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(contentProps))),
children: computedChildren
})]
})
})
})
})
});
}, "root")((props) => {
return {
...require_input.useInputPropsContext(),
...props
};
});
const AutocompleteField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children,...rest }) => {
const { getInputProps, inputProps } = useComponentContext();
return {
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteInput, { ...getInputProps(inputProps) })] })
};
});
const AutocompleteInput = withContext("input", "input")();
const AutocompleteIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
children: icon || children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_down_icon.ChevronDownIcon, {}),
...rest
}));
const AutocompleteContent = withContext(require_popover.PopoverContent, "content")();
const AutocompleteLabel = withContext("span", "label")(void 0, (props) => {
const { getLabelProps } = require_hooks_use_combobox_index.useComboboxGroupContext();
return getLabelProps(props);
});
const AutocompleteGroup = withContext(({ children, label, labelProps,...rest }) => {
const { groupProps } = useComponentContext();
const { getGroupProps, getLabelProps } = require_hooks_use_combobox_index.useComboboxGroup({
...groupProps,
...rest
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks_use_combobox_index.ComboboxGroupContext, {
value: (0, react.useMemo)(() => ({ getLabelProps }), [getLabelProps]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...getGroupProps(),
children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteLabel, {
...labelProps,
children: label
}) : null, children]
})
});
}, "group")();
const AutocompleteOption = withContext(({ children, icon: iconProp,...rest }) => {
const { optionProps: { icon,...optionProps } = {} } = useComponentContext();
const { getIndicatorProps, getOptionProps } = require_use_autocomplete.useAutocompleteOption({
...optionProps,
...rest
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...getOptionProps(),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIndicator, {
...getIndicatorProps(),
children: iconProp ?? icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_check_icon.CheckIcon, {})
}), children]
});
}, "option")();
const AutocompleteEmpty = withContext(({ children, icon,...rest }) => {
const { emptyIcon, emptyProps } = useComponentContext();
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...emptyProps,
...rest,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteIndicator, { children: icon ?? emptyIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_minus_icon.MinusIcon, {}) }), children]
});
}, "empty")();
const AutocompleteIndicator = withContext("div", "indicator")();
//#endregion
exports.AutocompleteGroup = AutocompleteGroup;
exports.AutocompleteLabel = AutocompleteLabel;
exports.AutocompleteOption = AutocompleteOption;
exports.AutocompletePropsContext = AutocompletePropsContext;
exports.AutocompleteRoot = AutocompleteRoot;
exports.useAutocompletePropsContext = useAutocompletePropsContext;
//# sourceMappingURL=autocomplete.cjs.map