@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
122 lines (118 loc) • 4.46 kB
JavaScript
"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_use_field_props = require('../field/use-field-props.cjs');
const require_use_checkbox_group = require('./use-checkbox-group.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/checkbox/use-checkbox.ts
const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp,...props } = {}) => {
const group = require_use_checkbox_group.useCheckboxGroupContext();
const { max, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
const uuid = (0, react.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 } = require_use_field_props.useFieldProps({
id: group ? uuid : void 0,
...props,
notSupportReadOnly: true
});
const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby;
const [checked, setChecked] = require_hooks_use_controllable_state_index.useControllableEventState({
defaultValue: defaultChecked,
value: !(0, require_utils_index.utils_exports.isUndefined)(groupValue) && !(0, require_utils_index.utils_exports.isUndefined)(value) ? groupValue.includes(value) : checkedProp,
onChange: onChangeProp
});
const trulyDisabled = !checked && (0, require_utils_index.utils_exports.isNumber)(max) && group && group.value.length >= max;
const interactive = !(readOnly || trulyDisabled);
const onChange = (0, react.useCallback)((ev) => {
if (!interactive) return ev.defaultPrevented = true;
if (indeterminate) ev.target.checked = true;
setChecked(ev);
}, [
interactive,
indeterminate,
setChecked
]);
const getRootProps = (0, react.useCallback)((props$1 = {}) => {
const sharedProps = {
...dataProps,
"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
...rest,
...props$1
};
return getLabelProps?.(sharedProps) ?? sharedProps;
}, [
dataProps,
checked,
indeterminate,
rest,
getLabelProps
]);
const getInputProps = (0, react.useCallback)(({ "aria-describedby": ariaDescribedby$1,...props$1 } = {}) => {
const sharedProps = {
...dataProps,
...ariaProps,
id,
type: "checkbox",
name,
style: require_dom.visuallyHiddenAttributes.style,
"aria-checked": indeterminate ? "mixed" : checked,
"aria-describedby": (0, require_utils_index.utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby$1),
"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
checked,
disabled,
readOnly,
required,
value,
...props$1,
ref: require_ref.mergeRefs(props$1.ref, ref),
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)
};
return getGroupInputProps?.(sharedProps) ?? sharedProps;
}, [
dataProps,
ariaProps,
id,
name,
indeterminate,
checked,
resolvedAriaDescribedby,
interactive,
disabled,
readOnly,
required,
value,
ref,
eventProps,
onChange,
getGroupInputProps
]);
return {
checked,
indeterminate,
getIndicatorProps: (0, react.useCallback)((props$1 = {}) => ({
...dataProps,
"aria-hidden": "true",
"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
...props$1
}), [
dataProps,
checked,
indeterminate
]),
getInputProps,
getRootProps,
onChange
};
};
//#endregion
exports.useCheckbox = useCheckbox;
//# sourceMappingURL=use-checkbox.cjs.map