@base-ui-components/react
Version:
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
145 lines (144 loc) • 5.98 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.UseCheckboxRoot = void 0;
exports.useCheckboxRoot = useCheckboxRoot;
var React = _interopRequireWildcard(require("react"));
var _useControlled = require("../../utils/useControlled");
var _visuallyHidden = require("../../utils/visuallyHidden");
var _useForkRef = require("../../utils/useForkRef");
var _mergeReactProps = require("../../utils/mergeReactProps");
var _useBaseUiId = require("../../utils/useBaseUiId");
var _useEventCallback = require("../../utils/useEventCallback");
var _useEnhancedEffect = require("../../utils/useEnhancedEffect");
var _FieldRootContext = require("../../field/root/FieldRootContext");
var _useFieldControlValidation = require("../../field/control/useFieldControlValidation");
var _useField = require("../../field/useField");
var _CheckboxGroupContext = require("../../checkbox-group/CheckboxGroupContext");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function useCheckboxRoot(params) {
const {
id: idProp,
checked: externalChecked,
inputRef: externalInputRef,
onCheckedChange: onCheckedChangeProp = () => {},
name,
value,
defaultChecked = false,
readOnly = false,
required = false,
autoFocus = false,
indeterminate = false,
disabled = false
} = params;
const groupContext = (0, _CheckboxGroupContext.useCheckboxGroupContext)();
const groupValue = groupContext?.value;
const setGroupValue = groupContext?.setValue;
const defaultGroupValue = groupContext?.defaultValue;
const [checked, setCheckedState] = (0, _useControlled.useControlled)({
controlled: name && groupValue ? groupValue.includes(name) : externalChecked,
default: name && defaultGroupValue ? defaultGroupValue.includes(name) : defaultChecked,
name: 'Checkbox',
state: 'checked'
});
const {
labelId,
setControlId,
setTouched,
setDirty,
validityData
} = (0, _FieldRootContext.useFieldRootContext)();
const buttonRef = React.useRef(null);
const {
getValidationProps,
getInputValidationProps,
inputRef: inputValidationRef,
commitValidation
} = (0, _useFieldControlValidation.useFieldControlValidation)();
const onCheckedChange = (0, _useEventCallback.useEventCallback)(onCheckedChangeProp);
const id = (0, _useBaseUiId.useBaseUiId)(idProp);
(0, _useEnhancedEffect.useEnhancedEffect)(() => {
setControlId(id);
return () => {
setControlId(undefined);
};
}, [id, setControlId]);
(0, _useField.useField)({
id,
commitValidation,
value: checked,
controlRef: buttonRef
});
const inputRef = React.useRef(null);
const mergedInputRef = (0, _useForkRef.useForkRef)(externalInputRef, inputRef, inputValidationRef);
React.useEffect(() => {
if (inputRef.current) {
inputRef.current.indeterminate = indeterminate;
}
}, [indeterminate]);
const getButtonProps = React.useCallback((externalProps = {}) => (0, _mergeReactProps.mergeReactProps)(getValidationProps(externalProps), {
id,
ref: buttonRef,
type: 'button',
role: 'checkbox',
disabled,
'aria-checked': indeterminate ? 'mixed' : checked,
'aria-readonly': readOnly || undefined,
'aria-labelledby': labelId,
onBlur() {
const element = inputRef.current;
if (!element) {
return;
}
setTouched(true);
commitValidation(element.checked);
},
onClick(event) {
if (event.defaultPrevented || readOnly) {
return;
}
event.preventDefault();
inputRef.current?.click();
}
}), [id, getValidationProps, indeterminate, checked, disabled, readOnly, labelId, setTouched, commitValidation]);
const getInputProps = React.useCallback((externalProps = {}) => (0, _mergeReactProps.mergeReactProps)(getInputValidationProps(externalProps), {
checked,
disabled,
name,
// React <19 sets an empty value if `undefined` is passed explicitly
// To avoid this, we only set the value if it's defined
...(value !== undefined ? {
value
} : {}),
required,
autoFocus,
ref: mergedInputRef,
style: _visuallyHidden.visuallyHidden,
tabIndex: -1,
type: 'checkbox',
'aria-hidden': true,
onChange(event) {
// Workaround for https://github.com/facebook/react/issues/9023
if (event.nativeEvent.defaultPrevented) {
return;
}
const nextChecked = event.target.checked;
setDirty(nextChecked !== validityData.initialValue);
setCheckedState(nextChecked);
onCheckedChange?.(nextChecked, event.nativeEvent);
if (name && groupValue && setGroupValue) {
const nextGroupValue = nextChecked ? [...groupValue, name] : groupValue.filter(item => item !== name);
setGroupValue(nextGroupValue, event.nativeEvent);
}
}
}), [getInputValidationProps, checked, disabled, name, value, required, autoFocus, mergedInputRef, setDirty, validityData.initialValue, setCheckedState, onCheckedChange, groupValue, setGroupValue]);
return React.useMemo(() => ({
checked,
getButtonProps,
getInputProps
}), [checked, getButtonProps, getInputProps]);
}
let UseCheckboxRoot = exports.UseCheckboxRoot = void 0;