archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(radio): omit non-react props on radio-group (#2761)

Browse Source
This commit is contained in:
Junior Garcia 2024-04-17 09:47:56 -03:00 committed by GitHub
parent 74eda31288
commit f728c0542c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/twelve-gorillas-stare.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/radio": patch
---
Fix #2759 non-react props omitted from radio group component

20
packages/components/radio/src/use-radio-group.ts
View File

@ -8,7 +8,7 @@ import {useCallback, useMemo} from "react";
import {RadioGroupState, useRadioGroupState} from "@react-stately/radio";
import {useRadioGroup as useReactAriaRadioGroup} from "@react-aria/radio";
import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/react-utils";
import {filterDOMProps, useDOMRef} from "@nextui-org/react-utils";
import {clsx, safeAriaLabel} from "@nextui-org/shared-utils";
import {mergeProps} from "@react-aria/utils";
@ -70,6 +70,8 @@ export function useRadioGroup(props: UseRadioGroupProps) {
label,
value,
name,
isInvalid: isInvalidProp,
validationState,
size = "md",
color = "primary",
isDisabled = false,
@ -86,6 +88,7 @@ export function useRadioGroup(props: UseRadioGroupProps) {
} = props;
const Component = as || "div";
const shouldFilterDOMProps = typeof Component === "string";
const domRef = useDOMRef(ref);
@ -97,7 +100,7 @@ export function useRadioGroup(props: UseRadioGroupProps) {
"aria-label": safeAriaLabel(otherProps["aria-label"], label),
isRequired,
isReadOnly,
isInvalid: props.validationState === "invalid" || props.isInvalid,
isInvalid: validationState === "invalid" || isInvalidProp,
orientation,
validationBehavior: "native",
onChange: onValueChange,
@ -109,8 +112,8 @@ export function useRadioGroup(props: UseRadioGroupProps) {
label,
isRequired,
isReadOnly,
props.isInvalid,
props.validationState,
isInvalidProp,
validationState,
orientation,
onValueChange,
]);
@ -127,7 +130,7 @@ export function useRadioGroup(props: UseRadioGroupProps) {
validationDetails,
} = useReactAriaRadioGroup(otherPropsWithOrientation, groupState);
const isInvalid = props.validationState === "invalid" || props.isInvalid || isAriaInvalid;
const isInvalid = otherPropsWithOrientation.isInvalid || isAriaInvalid;
const context: ContextType = useMemo(
() => ({
@ -168,7 +171,12 @@ export function useRadioGroup(props: UseRadioGroupProps) {
return {
ref: domRef,
className: slots.base({class: baseStyles}),
...mergeProps(groupProps, otherProps),
...mergeProps(
groupProps,
filterDOMProps(otherProps, {
enabled: shouldFilterDOMProps,
}),
),
};
}, [domRef, slots, baseStyles, groupProps, otherProps]);