@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
203 lines (199 loc) • 7.29 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 { 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 { selectStyle } from "./select.style.js";
import { ComboboxContext, ComboboxDescendantsContext, ComboboxGroupContext, createComboboxChildren, createComboboxItem, useComboboxGroup, useComboboxGroupContext } from "../../hooks/use-combobox/index.js";
import { SelectContext, useSelect, useSelectOption } from "./use-select.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/select/select.tsx
const { ComponentContext, PropsContext: SelectPropsContext, useComponentContext, usePropsContext: useSelectPropsContext, withContext, withProvider } = createSlotComponent("select", 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__ */ jsx(XIcon, {}), duration, errorBorderColor, focusBorderColor, icon, items: itemsProp, contentProps, elementProps, groupProps, iconProps, optionProps, placeholderProps, rootProps,...rest }] = useGroupItemProps(props);
const { descendants, includePlaceholder, items: computedItems, max, placeholder, value, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, getSeparatorProps, popoverProps, onActiveDescendant, onChange, onClose, onSelect } = useSelect({
items: useMemo(() => {
if (itemsProp) return itemsProp;
return createComboboxItem(children, {
Group: SelectGroup,
Label: SelectLabel,
Option: SelectOption
});
}, [itemsProp, children]),
...rest
});
const mergedPopoverProps = useMemo(() => ({
animationScheme,
duration,
...popoverProps
}), [
animationScheme,
duration,
popoverProps
]);
const computedChildren = useMemo(() => {
if (children) return /* @__PURE__ */ jsxs(Fragment$1, { children: [placeholder ? /* @__PURE__ */ jsx(SelectOption, {
...placeholderProps,
hidden: !includePlaceholder,
value: "",
children: placeholder
}) : null, children] });
return createComboboxChildren(computedItems, {
Group: SelectGroup,
Option: SelectOption
});
}, [
children,
computedItems,
placeholder,
includePlaceholder,
placeholderProps
]);
const varProps = useInputBorder({
errorBorderColor,
focusBorderColor
});
const comboboxContext = useMemo(() => ({
max,
value,
onActiveDescendant,
onChange,
onClose,
onSelect
}), [
max,
onActiveDescendant,
onChange,
onClose,
onSelect,
value
]);
const selectContext = useMemo(() => ({
max,
value
}), [max, value]);
const componentContext = useMemo(() => ({
getSeparatorProps,
groupProps,
optionProps
}), [
getSeparatorProps,
groupProps,
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(SelectContext, {
value: selectContext,
children: /* @__PURE__ */ jsx(ComponentContext, {
value: componentContext,
children: /* @__PURE__ */ jsxs(PopoverRoot, {
...mergedPopoverProps,
children: [
/* @__PURE__ */ jsx(styled.input, { ...getInputProps() }),
/* @__PURE__ */ jsxs(InputGroupRoot, {
className,
css,
colorScheme,
...getRootProps({
...groupItemProps,
...rootProps
}),
children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(SelectField, { ...getFieldProps(varProps) }) }), /* @__PURE__ */ jsx(InputElement, {
clickable: clearable && hasValue,
...elementProps,
children: clearable && hasValue ? /* @__PURE__ */ jsx(SelectIcon, {
icon: clearIcon,
...getClearIconProps(iconProps)
}) : /* @__PURE__ */ jsx(SelectIcon, {
icon,
...getIconProps(iconProps)
})
})]
}),
/* @__PURE__ */ jsx(SelectContent, {
...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(contentProps))),
children: computedChildren
})
]
})
})
})
})
});
}, "root")((props) => {
return {
...useInputPropsContext(),
...props
};
});
const SelectField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children,...rest }) => ({
...rest,
children: /* @__PURE__ */ jsx(SelectValueText, { children })
}));
const SelectIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
children: icon || children || /* @__PURE__ */ jsx(ChevronDownIcon, {}),
...rest
}));
const SelectValueText = withContext("span", "valueText")();
const SelectContent = withContext(PopoverContent, "content")();
const SelectLabel = withContext("span", "label")(void 0, (props) => {
const { getLabelProps } = useComboboxGroupContext();
return getLabelProps(props);
});
const SelectGroup = 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(SelectLabel, {
...labelProps,
children: label
}) : null, children]
})
});
}, "group")();
const SelectOption = withContext(({ children, icon: iconProp,...rest }) => {
const { optionProps: { icon,...optionProps } = {} } = useComponentContext();
const { getIndicatorProps, getOptionProps } = useSelectOption({
...optionProps,
...rest
});
return /* @__PURE__ */ jsxs(styled.div, {
...getOptionProps(),
children: [/* @__PURE__ */ jsx(SelectIndicator, {
...getIndicatorProps(),
children: iconProp ?? icon ?? /* @__PURE__ */ jsx(CheckIcon, {})
}), children]
});
}, "option")();
const SelectIndicator = withContext("div", "indicator")();
const SelectSeparator = withContext("hr", "separator")(void 0, (props) => {
const { getSeparatorProps } = useComponentContext();
return getSeparatorProps(props);
});
//#endregion
export { SelectGroup, SelectLabel, SelectOption, SelectPropsContext, SelectRoot, SelectSeparator, useSelectPropsContext };
//# sourceMappingURL=select.js.map