@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
95 lines (91 loc) • 3.38 kB
JavaScript
"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/radio/use-radio-group.ts
const [RadioGroupContext, useRadioGroupContext] = require_context.createContext({
name: "RadioGroupContext",
strict: false
});
const useRadioGroup = (props = {}) => {
const uuid = (0, react.useId)();
const { context: { labelId } = {}, props: { id = uuid, defaultValue, disabled, 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)) setValue(valueOrEv.target.value);
else setValue(valueOrEv);
}, [interactive, setValue]);
const getRootProps = (0, react.useCallback)(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby,...props$1 } = {}) => ({
...dataProps,
id,
"aria-describedby": (0, require_utils_index.utils_exports.cx)(ariaDescribedbyProp, ariaDescribedby),
"aria-labelledby": (0, require_utils_index.utils_exports.cx)(labelId, ariaLabelledby),
role: "radiogroup",
...rest,
...props$1,
ref: require_ref.mergeRefs(ref, rest.ref)
}), [
ariaDescribedbyProp,
dataProps,
id,
labelId,
rest
]);
return {
name: id,
value,
getInputProps: (0, react.useCallback)((props$1 = {}) => {
const checked = !(0, require_utils_index.utils_exports.isUndefined)(value) && value === props$1.value;
return {
...dataProps,
...ariaProps,
type: "radio",
name: id,
style: require_dom.visuallyHiddenAttributes.style,
"aria-checked": checked,
"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
checked,
disabled,
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,
disabled,
eventProps,
id,
onChange,
readOnly,
required,
value
]),
getLabelProps: (0, react.useCallback)((props$1) => ({
...dataProps,
...props$1
}), [dataProps]),
getRootProps,
onChange
};
};
//#endregion
exports.RadioGroupContext = RadioGroupContext;
exports.useRadioGroup = useRadioGroup;
exports.useRadioGroupContext = useRadioGroupContext;
//# sourceMappingURL=use-radio-group.cjs.map