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

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_use_field_props = require('../field/use-field-props.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/native-select/use-native-select.tsx
const useNativeSelect = (props = {}) => {
	const { props: { children, disabled, includePlaceholder = true, items = [], placeholder, readOnly,...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
	const interactive = !(readOnly || disabled);
	const computedChildren = (0, react.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 (0, react.cloneElement)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("optgroup", {}), {
					key: index,
					children: items$1.map(({ label: label$1,...rest$2 }, index$1) => (0, react.cloneElement)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {}), {
						key: index$1,
						children: label$1,
						...rest$2
					})),
					label,
					...rest$1
				});
			} else {
				const { label,...rest$1 } = item;
				return (0, react.cloneElement)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {}), {
					key: index,
					children: label,
					...rest$1
				});
			}
		});
		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [placeholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
			hidden: !includePlaceholder,
			value: "",
			children: placeholder
		}) : null, computedChildren$1] });
	}, [
		children,
		items,
		placeholder,
		includePlaceholder
	]);
	const getRootProps = (0, react.useCallback)((props$1) => ({
		...dataProps,
		...props$1
	}), [dataProps]);
	return {
		getFieldProps: (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
			disabled,
			readOnly,
			tabIndex: interactive ? void 0 : -1,
			...ariaProps,
			...dataProps,
			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
			"aria-label": placeholder,
			...rest,
			...props$1,
			ref: require_ref.mergeRefs(ref, rest.ref),
			children: props$1.children ?? computedChildren,
			onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
			onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus)
		}), [
			interactive,
			ariaProps,
			computedChildren,
			dataProps,
			eventProps,
			rest,
			placeholder,
			disabled,
			readOnly
		]),
		getIconProps: (0, react.useCallback)((props$1) => ({
			...dataProps,
			...props$1
		}), [dataProps]),
		getRootProps
	};
};

//#endregion
exports.useNativeSelect = useNativeSelect;
//# sourceMappingURL=use-native-select.cjs.map