@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
212 lines (208 loc) • 8.87 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_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_select_style = require('./select.style.cjs');
const require_hooks_use_combobox_index = require('../../hooks/use-combobox/index.cjs');
const require_use_select = require('./use-select.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/select/select.tsx
const { ComponentContext, PropsContext: SelectPropsContext, useComponentContext, usePropsContext: useSelectPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("select", require_select_style.selectStyle);
/**
* `Select` is a component used for allowing a user to choose one option from a list.
*
* @see https://yamada-ui.com/docs/components/select
*/
const SelectRoot = withProvider((props) => {
const [groupItemProps, { className, css, colorScheme, animationScheme = "block-start", children, clearable, clearIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_x_icon.XIcon, {}), duration, errorBorderColor, focusBorderColor, icon, items: itemsProp, contentProps, elementProps, groupProps, iconProps, optionProps, placeholderProps, rootProps,...rest }] = require_use_group.useGroupItemProps(props);
const { descendants, includePlaceholder, items: computedItems, max, placeholder, value, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, getSeparatorProps, popoverProps, onActiveDescendant, onChange, onClose, onSelect } = require_use_select.useSelect({
items: (0, react.useMemo)(() => {
if (itemsProp) return itemsProp;
return require_hooks_use_combobox_index.createComboboxItem(children, {
Group: SelectGroup,
Label: SelectLabel,
Option: SelectOption
});
}, [itemsProp, children]),
...rest
});
const mergedPopoverProps = (0, react.useMemo)(() => ({
animationScheme,
duration,
...popoverProps
}), [
animationScheme,
duration,
popoverProps
]);
const computedChildren = (0, react.useMemo)(() => {
if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [placeholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectOption, {
...placeholderProps,
hidden: !includePlaceholder,
value: "",
children: placeholder
}) : null, children] });
return require_hooks_use_combobox_index.createComboboxChildren(computedItems, {
Group: SelectGroup,
Option: SelectOption
});
}, [
children,
computedItems,
placeholder,
includePlaceholder,
placeholderProps
]);
const varProps = require_use_input_border.useInputBorder({
errorBorderColor,
focusBorderColor
});
const comboboxContext = (0, react.useMemo)(() => ({
max,
value,
onActiveDescendant,
onChange,
onClose,
onSelect
}), [
max,
onActiveDescendant,
onChange,
onClose,
onSelect,
value
]);
const selectContext = (0, react.useMemo)(() => ({
max,
value
}), [max, value]);
const componentContext = (0, react.useMemo)(() => ({
getSeparatorProps,
groupProps,
optionProps
}), [
getSeparatorProps,
groupProps,
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_select.SelectContext, {
value: selectContext,
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.jsx)(require_factory.styled.input, { ...getInputProps() }),
/* @__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)(SelectField, { ...getFieldProps(varProps) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
clickable: clearable && hasValue,
...elementProps,
children: clearable && hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectIcon, {
icon: clearIcon,
...getClearIconProps(iconProps)
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectIcon, {
icon,
...getIconProps(iconProps)
})
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectContent, {
...(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 SelectField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children,...rest }) => ({
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectValueText, { children })
}));
const SelectIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
children: icon || children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_down_icon.ChevronDownIcon, {}),
...rest
}));
const SelectValueText = withContext("span", "valueText")();
const SelectContent = withContext(require_popover.PopoverContent, "content")();
const SelectLabel = withContext("span", "label")(void 0, (props) => {
const { getLabelProps } = require_hooks_use_combobox_index.useComboboxGroupContext();
return getLabelProps(props);
});
const SelectGroup = 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)(SelectLabel, {
...labelProps,
children: label
}) : null, children]
})
});
}, "group")();
const SelectOption = withContext(({ children, icon: iconProp,...rest }) => {
const { optionProps: { icon,...optionProps } = {} } = useComponentContext();
const { getIndicatorProps, getOptionProps } = require_use_select.useSelectOption({
...optionProps,
...rest
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...getOptionProps(),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectIndicator, {
...getIndicatorProps(),
children: iconProp ?? icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_check_icon.CheckIcon, {})
}), children]
});
}, "option")();
const SelectIndicator = withContext("div", "indicator")();
const SelectSeparator = withContext("hr", "separator")(void 0, (props) => {
const { getSeparatorProps } = useComponentContext();
return getSeparatorProps(props);
});
//#endregion
exports.SelectGroup = SelectGroup;
exports.SelectLabel = SelectLabel;
exports.SelectOption = SelectOption;
exports.SelectPropsContext = SelectPropsContext;
exports.SelectRoot = SelectRoot;
exports.SelectSeparator = SelectSeparator;
exports.useSelectPropsContext = useSelectPropsContext;
//# sourceMappingURL=select.cjs.map