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

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

"use client";


import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useFieldProps } from "../field/use-field-props.js";
import { cloneElement, useCallback, useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/native-select/use-native-select.tsx
const useNativeSelect = (props = {}) => {
	const { props: { children, disabled, includePlaceholder = true, items = [], placeholder, readOnly,...rest }, ariaProps, dataProps, eventProps } = useFieldProps(props);
	const interactive = !(readOnly || disabled);
	const computedChildren = useMemo(() => {
		let computedChildren$1 = null;
		if (children) computedChildren$1 = children;
		else if (items.length) computedChildren$1 = items.map((item, index) => {
			if ("items" in item) {
				const { items: items$1 = [], label,...rest$1 } = item;
				return cloneElement(/* @__PURE__ */ jsx("optgroup", {}), {
					key: index,
					children: items$1.map(({ label: label$1,...rest$2 }, index$1) => cloneElement(/* @__PURE__ */ jsx("option", {}), {
						key: index$1,
						children: label$1,
						...rest$2
					})),
					label,
					...rest$1
				});
			} else {
				const { label,...rest$1 } = item;
				return cloneElement(/* @__PURE__ */ jsx("option", {}), {
					key: index,
					children: label,
					...rest$1
				});
			}
		});
		return /* @__PURE__ */ jsxs(Fragment$1, { children: [placeholder ? /* @__PURE__ */ jsx("option", {
			hidden: !includePlaceholder,
			value: "",
			children: placeholder
		}) : null, computedChildren$1] });
	}, [
		children,
		items,
		placeholder,
		includePlaceholder
	]);
	const getRootProps = useCallback((props$1) => ({
		...dataProps,
		...props$1
	}), [dataProps]);
	return {
		getFieldProps: useCallback(({ ref,...props$1 } = {}) => ({
			disabled,
			readOnly,
			tabIndex: interactive ? void 0 : -1,
			...ariaProps,
			...dataProps,
			"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
			"aria-label": placeholder,
			...rest,
			...props$1,
			ref: mergeRefs(ref, rest.ref),
			children: props$1.children ?? computedChildren,
			onBlur: (0, utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
			onFocus: (0, utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus)
		}), [
			interactive,
			ariaProps,
			computedChildren,
			dataProps,
			eventProps,
			rest,
			placeholder,
			disabled,
			readOnly
		]),
		getIconProps: useCallback((props$1) => ({
			...dataProps,
			...props$1
		}), [dataProps]),
		getRootProps
	};
};

//#endregion
export { useNativeSelect };
//# sourceMappingURL=use-native-select.js.map