@yamada-ui/react/dist/esm/components/native-select/native-select.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { createSlotComponent } from "../../core/components/create-component.js";
import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.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 { nativeSelectStyle } from "./native-select.style.js";
import { useNativeSelect } from "./use-native-select.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/native-select/native-select.tsx
const { component, PropsContext: NativeSelectPropsContext, usePropsContext: useNativeSelectPropsContext, withContext, withProvider } = createSlotComponent("native-select", nativeSelectStyle);
/**
* `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).
*
* @see https://yamada-ui.com/docs/components/native-select
*/
const NativeSelectRoot = withProvider((props) => {
	const [groupItemProps, { className, css, colorScheme, errorBorderColor, focusBorderColor, icon, elementProps, iconProps, rootProps,...rest }] = useGroupItemProps(props);
	const { getFieldProps, getIconProps, getRootProps } = useNativeSelect(rest);
	const varProps = useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	return /* @__PURE__ */ jsxs(InputGroupRoot, {
		className,
		css,
		colorScheme,
		...getRootProps({
			...groupItemProps,
			...rootProps
		}),
		children: [/* @__PURE__ */ jsx(NativeSelectField, { ...getFieldProps(varProps) }), /* @__PURE__ */ jsx(InputElement, {
			...elementProps,
			children: /* @__PURE__ */ jsx(NativeSelectIcon, {
				icon,
				...getIconProps(iconProps)
			})
		})]
	});
}, "root")((props) => {
	return {
		...useInputPropsContext(),
		...props
	};
});
const NativeSelectField = withContext("select", "field")({ "data-group-propagate": "" });
const NativeSelectIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
	children: icon || children || /* @__PURE__ */ jsx(ChevronDownIcon, {}),
	...rest
}));
const NativeSelectGroup = component("optgroup", "group")();
const NativeSelectOption = component("option", "option")();
const NativeSelectSeparator = component("hr", "separator")();

//#endregion
export { NativeSelectGroup, NativeSelectOption, NativeSelectPropsContext, NativeSelectRoot, NativeSelectSeparator, useNativeSelectPropsContext };
//# sourceMappingURL=native-select.js.map