@yamada-ui/react/dist/cjs/components/toggle/use-toggle.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_dom = require('../../utils/dom.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
const require_use_toggle_group = require('./use-toggle-group.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/toggle/use-toggle.ts
const useToggle = (props = {}) => {
	const { t } = require_i18n_provider.useI18n("toggle");
	const { disabled: groupDisabled, readOnly: groupReadOnly, value: groupValue, onChange: onChangeGroup, onChangeMapRef } = require_use_toggle_group.useToggleGroupContext() ?? {};
	const { props: { id, ref, form, name, active, checked: checkedProp, defaultChecked = false, disabled, readOnly, required, value, onChange: onChangeProp,...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps({
		disabled: groupDisabled,
		readOnly: groupReadOnly,
		...props
	});
	const inputRef = (0, react.useRef)(null);
	const [checked, setChecked] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue: defaultChecked,
		value: checkedProp,
		onChange: onChangeProp
	});
	const interactive = !(readOnly || disabled);
	const controlled = !(0, require_utils_index.utils_exports.isUndefined)(groupValue);
	const trulyChecked = (0, react.useMemo)(() => {
		if (!controlled) return checked;
		else return (0, require_utils_index.utils_exports.isArray)(groupValue) ? groupValue.includes(value ?? "") : value === groupValue;
	}, [
		controlled,
		groupValue,
		checked,
		value
	]);
	if (controlled && (0, require_utils_index.utils_exports.isUndefined)(value)) console.warn(`Toggle: value is required. Please set the value.`);
	if (value) onChangeMapRef?.current.set(value, setChecked);
	const onClick = (0, react.useCallback)(() => {
		if (!interactive) return;
		setChecked((prev) => !prev);
		onChangeGroup?.(value);
	}, [
		onChangeGroup,
		setChecked,
		value,
		interactive
	]);
	const onChange = (0, react.useCallback)((ev) => {
		setChecked(ev.target.checked);
		onChangeGroup?.(value);
	}, [
		onChangeGroup,
		setChecked,
		value
	]);
	const getInputProps = (0, react.useCallback)((props$1 = {}) => ({
		...require_dom.visuallyHiddenAttributes,
		...ariaProps,
		...dataProps,
		...eventProps,
		id,
		form,
		type: "checkbox",
		name,
		checked,
		disabled,
		readOnly,
		required,
		value,
		...props$1,
		ref: require_ref.mergeRefs(inputRef, ref, props$1.ref),
		onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange)
	}), [
		ariaProps,
		checked,
		dataProps,
		disabled,
		eventProps,
		form,
		id,
		name,
		onChange,
		readOnly,
		ref,
		required,
		value
	]);
	return {
		checked: trulyChecked,
		setChecked,
		getButtonProps: (0, react.useCallback)((props$1 = {}) => ({
			...dataProps,
			type: "button",
			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
			"aria-label": value?.toString() ?? t("Toggle button"),
			"aria-pressed": trulyChecked,
			"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(trulyChecked),
			disabled,
			tabIndex: interactive ? void 0 : -1,
			...rest,
			...props$1,
			onClick: (0, require_utils_index.utils_exports.handlerAll)(rest.onClick, props$1.onClick, onClick)
		}), [
			dataProps,
			value,
			trulyChecked,
			active,
			disabled,
			rest,
			onClick,
			interactive,
			t
		]),
		getInputProps
	};
};

//#endregion
exports.useToggle = useToggle;
//# sourceMappingURL=use-toggle.cjs.map