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

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

"use client";


import { visuallyHiddenAttributes } from "../../utils/dom.js";
import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useControllableEventState } from "../../hooks/use-controllable-state/index.js";
import { useFieldProps } from "../field/use-field-props.js";
import { useCheckboxGroupContext } from "./use-checkbox-group.js";
import { useCallback, useId } from "react";

//#region src/components/checkbox/use-checkbox.ts
const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp,...props } = {}) => {
	const group = useCheckboxGroupContext();
	const { max, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
	const uuid = useId();
	const { props: { id, ref, name, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, value, onChange: onChangeProp,...rest }, ariaProps: { "aria-describedby": ariaDescribedby,...ariaProps }, dataProps, eventProps } = useFieldProps({
		id: group ? uuid : void 0,
		...props,
		notSupportReadOnly: true
	});
	const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby;
	const [checked, setChecked] = useControllableEventState({
		defaultValue: defaultChecked,
		value: !(0, utils_exports.isUndefined)(groupValue) && !(0, utils_exports.isUndefined)(value) ? groupValue.includes(value) : checkedProp,
		onChange: onChangeProp
	});
	const trulyDisabled = !checked && (0, utils_exports.isNumber)(max) && group && group.value.length >= max;
	const interactive = !(readOnly || trulyDisabled);
	const onChange = useCallback((ev) => {
		if (!interactive) return ev.defaultPrevented = true;
		if (indeterminate) ev.target.checked = true;
		setChecked(ev);
	}, [
		interactive,
		indeterminate,
		setChecked
	]);
	const getRootProps = useCallback((props$1 = {}) => {
		const sharedProps = {
			...dataProps,
			"data-checked": (0, utils_exports.dataAttr)(checked),
			"data-indeterminate": (0, utils_exports.dataAttr)(indeterminate),
			...rest,
			...props$1
		};
		return getLabelProps?.(sharedProps) ?? sharedProps;
	}, [
		dataProps,
		checked,
		indeterminate,
		rest,
		getLabelProps
	]);
	const getInputProps = useCallback(({ "aria-describedby": ariaDescribedby$1,...props$1 } = {}) => {
		const sharedProps = {
			...dataProps,
			...ariaProps,
			id,
			type: "checkbox",
			name,
			style: visuallyHiddenAttributes.style,
			"aria-checked": indeterminate ? "mixed" : checked,
			"aria-describedby": (0, utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby$1),
			"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
			"data-checked": (0, utils_exports.dataAttr)(checked),
			"data-indeterminate": (0, utils_exports.dataAttr)(indeterminate),
			checked,
			disabled,
			readOnly,
			required,
			value,
			...props$1,
			ref: mergeRefs(props$1.ref, ref),
			onBlur: (0, utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
			onChange: (0, utils_exports.handlerAll)(props$1.onChange, onChange),
			onFocus: (0, utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
		};
		return getGroupInputProps?.(sharedProps) ?? sharedProps;
	}, [
		dataProps,
		ariaProps,
		id,
		name,
		indeterminate,
		checked,
		resolvedAriaDescribedby,
		interactive,
		disabled,
		readOnly,
		required,
		value,
		ref,
		eventProps,
		onChange,
		getGroupInputProps
	]);
	return {
		checked,
		indeterminate,
		getIndicatorProps: useCallback((props$1 = {}) => ({
			...dataProps,
			"aria-hidden": "true",
			"data-checked": (0, utils_exports.dataAttr)(checked),
			"data-indeterminate": (0, utils_exports.dataAttr)(indeterminate),
			...props$1
		}), [
			dataProps,
			checked,
			indeterminate
		]),
		getInputProps,
		getRootProps,
		onChange
	};
};

//#endregion
export { useCheckbox };
//# sourceMappingURL=use-checkbox.js.map