@heroui/radio
Version:
Radios allow users to select a single option from a list of mutually exclusive options.
201 lines (199 loc) • 6.8 kB
JavaScript
"use client";
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/use-radio-group.ts
var use_radio_group_exports = {};
__export(use_radio_group_exports, {
useRadioGroup: () => useRadioGroup
});
module.exports = __toCommonJS(use_radio_group_exports);
var import_theme = require("@heroui/theme");
var import_react = require("react");
var import_radio = require("@react-stately/radio");
var import_radio2 = require("@react-aria/radio");
var import_system = require("@heroui/system");
var import_react_utils = require("@heroui/react-utils");
var import_shared_utils = require("@heroui/shared-utils");
var import_utils = require("@react-aria/utils");
var import_form = require("@heroui/form");
function useRadioGroup(props) {
var _a, _b;
const globalContext = (0, import_system.useProviderContext)();
const { validationBehavior: formValidationBehavior } = (0, import_form.useSlottedContext)(import_form.FormContext) || {};
const {
as,
ref,
classNames,
children,
label,
value,
name,
isInvalid: isInvalidProp,
validationState,
validationBehavior = (_a = formValidationBehavior != null ? formValidationBehavior : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _a : "native",
size = "md",
color = "primary",
isDisabled = false,
disableAnimation = (_b = globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false,
orientation = "vertical",
isRequired = false,
isReadOnly,
errorMessage,
description,
className,
onChange,
onValueChange,
...otherProps
} = props;
const Component = as || "div";
const shouldFilterDOMProps = typeof Component === "string";
const domRef = (0, import_react_utils.useDOMRef)(ref);
const otherPropsWithOrientation = (0, import_react.useMemo)(() => {
return {
...otherProps,
value,
name,
"aria-label": (0, import_shared_utils.safeAriaLabel)(otherProps["aria-label"], label),
isRequired,
isReadOnly,
isInvalid: validationState === "invalid" || isInvalidProp,
orientation,
validationBehavior,
onChange: onValueChange
};
}, [
otherProps,
value,
name,
label,
isRequired,
isReadOnly,
isInvalidProp,
validationState,
validationBehavior,
orientation,
onValueChange
]);
const groupState = (0, import_radio.useRadioGroupState)(otherPropsWithOrientation);
const {
labelProps,
radioGroupProps: groupProps,
errorMessageProps,
descriptionProps,
isInvalid: isAriaInvalid,
validationErrors,
validationDetails
} = (0, import_radio2.useRadioGroup)(otherPropsWithOrientation, groupState);
const isInvalid = otherPropsWithOrientation.isInvalid || isAriaInvalid || groupState.isInvalid;
const context = (0, import_react.useMemo)(
() => ({
size,
color,
groupState,
isRequired,
isInvalid,
isDisabled,
disableAnimation,
onChange
}),
[
size,
color,
isRequired,
isDisabled,
isInvalid,
onChange,
disableAnimation,
groupState.name,
groupState.isDisabled,
groupState.isReadOnly,
groupState.isRequired,
groupState.selectedValue,
groupState.lastFocusedValue
]
);
const slots = (0, import_react.useMemo)(
() => (0, import_theme.radioGroup)({ isRequired, isInvalid, disableAnimation }),
[isInvalid, isRequired, disableAnimation]
);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
const getGroupProps = (0, import_react.useCallback)(() => {
return {
ref: domRef,
className: slots.base({ class: baseStyles }),
...(0, import_utils.mergeProps)(
groupProps,
(0, import_react_utils.filterDOMProps)(otherProps, {
enabled: shouldFilterDOMProps
})
)
};
}, [domRef, slots, baseStyles, groupProps, otherProps]);
const getLabelProps = (0, import_react.useCallback)(() => {
return {
className: slots.label({ class: classNames == null ? void 0 : classNames.label }),
...labelProps
};
}, [slots, classNames == null ? void 0 : classNames.label, labelProps, classNames == null ? void 0 : classNames.label]);
const getWrapperProps = (0, import_react.useCallback)(() => {
return {
className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
role: "presentation",
"data-orientation": orientation
};
}, [slots, classNames == null ? void 0 : classNames.wrapper, orientation, slots.wrapper]);
const getDescriptionProps = (0, import_react.useCallback)(
(props2 = {}) => {
return {
...props2,
...descriptionProps,
className: slots.description({ class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.description, props2 == null ? void 0 : props2.className) })
};
},
[slots, classNames == null ? void 0 : classNames.description, descriptionProps, slots.description]
);
const getErrorMessageProps = (0, import_react.useCallback)(
(props2 = {}) => {
return {
...props2,
...errorMessageProps,
className: slots.errorMessage({ class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.errorMessage, props2 == null ? void 0 : props2.className) })
};
},
[slots, classNames == null ? void 0 : classNames.errorMessage, errorMessageProps]
);
return {
Component,
children,
label,
context,
description,
isInvalid,
errorMessage: typeof errorMessage === "function" ? errorMessage({ isInvalid, validationErrors, validationDetails }) : errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" ")),
getGroupProps,
getLabelProps,
getWrapperProps,
getDescriptionProps,
getErrorMessageProps
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useRadioGroup
});