@yamada-ui/react/dist/cjs/components/checkbox/use-checkbox-group.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_context = require('../../utils/context.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_use_field_props = require('../field/use-field-props.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/checkbox/use-checkbox-group.ts
const [CheckboxGroupContext, useCheckboxGroupContext] = require_context.createContext({
	name: "CheckboxGroupContext",
	strict: false
});
const useCheckboxGroup = (props = {}) => {
	const { context: { labelId } = {}, props: { defaultValue = [], disabled, max, readOnly, required, value: valueProp, onChange: onChangeProp,...rest }, ariaProps: { "aria-describedby": ariaDescribedbyProp,...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
	const interactive = !(readOnly || disabled);
	const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue,
		value: valueProp,
		onChange: onChangeProp
	});
	const onChange = (0, react.useCallback)((valueOrEv) => {
		if (!interactive) return;
		if ((0, require_utils_index.utils_exports.isObject)(valueOrEv)) valueOrEv = valueOrEv.target.value;
		setValue((prev) => {
			if (prev.includes(valueOrEv)) return prev.filter((prevValue) => prevValue !== valueOrEv);
			else if (!(0, require_utils_index.utils_exports.isNumber)(max) || prev.length < max) return [...prev, valueOrEv];
			else return prev;
		});
	}, [
		interactive,
		max,
		setValue
	]);
	const getRootProps = (0, react.useCallback)(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby,...props$1 } = {}) => ({
		...dataProps,
		"aria-describedby": (0, require_utils_index.utils_exports.cx)(ariaDescribedbyProp, ariaDescribedby),
		"aria-labelledby": (0, require_utils_index.utils_exports.cx)(labelId, ariaLabelledby),
		role: "group",
		...rest,
		...props$1,
		ref: require_ref.mergeRefs(ref, rest.ref)
	}), [
		ariaDescribedbyProp,
		dataProps,
		labelId,
		rest
	]);
	return {
		max,
		value,
		getInputProps: (0, react.useCallback)((props$1 = {}) => {
			const checked = !(0, require_utils_index.utils_exports.isUndefined)(value) && ((0, require_utils_index.utils_exports.isString)(props$1.value) || (0, require_utils_index.utils_exports.isNumber)(props$1.value)) && value.includes(props$1.value);
			const trulyDisabled = !checked && (0, require_utils_index.utils_exports.isNumber)(max) && value.length >= max;
			return {
				...dataProps,
				...ariaProps,
				type: "checkbox",
				style: require_dom.visuallyHiddenAttributes.style,
				"aria-checked": checked,
				"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
				"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
				"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
				checked,
				disabled: trulyDisabled,
				readOnly,
				required,
				...props$1,
				onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
				onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange),
				onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
			};
		}, [
			ariaProps,
			dataProps,
			eventProps,
			max,
			onChange,
			readOnly,
			required,
			value
		]),
		getLabelProps: (0, react.useCallback)((props$1) => ({
			...dataProps,
			...props$1
		}), [dataProps]),
		getRootProps,
		onChange
	};
};

//#endregion
exports.CheckboxGroupContext = CheckboxGroupContext;
exports.useCheckboxGroup = useCheckboxGroup;
exports.useCheckboxGroupContext = useCheckboxGroupContext;
//# sourceMappingURL=use-checkbox-group.cjs.map