@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.
60 lines (59 loc) • 1.86 kB
JavaScript
'use client';
import * as React from 'react';
import { useControlled } from '@base-ui-components/utils/useControlled';
import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
import { MenuRadioGroupContext } from "./MenuRadioGroupContext.js";
import { useRenderElement } from "../../utils/useRenderElement.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
* Groups related radio items.
* Renders a `<div>` element.
*
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
*/
export const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function MenuRadioGroup(componentProps, forwardedRef) {
const {
render,
className,
value: valueProp,
defaultValue,
onValueChange: onValueChangeProp,
disabled = false,
...elementProps
} = componentProps;
const [value, setValueUnwrapped] = useControlled({
controlled: valueProp,
default: defaultValue,
name: 'MenuRadioGroup'
});
const onValueChange = useStableCallback(onValueChangeProp);
const setValue = useStableCallback((newValue, eventDetails) => {
onValueChange?.(newValue, eventDetails);
if (eventDetails.isCanceled) {
return;
}
setValueUnwrapped(newValue);
});
const state = React.useMemo(() => ({
disabled
}), [disabled]);
const element = useRenderElement('div', componentProps, {
state,
ref: forwardedRef,
props: {
role: 'group',
'aria-disabled': disabled || undefined,
...elementProps
}
});
const context = React.useMemo(() => ({
value,
setValue,
disabled
}), [value, setValue, disabled]);
return /*#__PURE__*/_jsx(MenuRadioGroupContext.Provider, {
value: context,
children: element
});
}));
if (process.env.NODE_ENV !== "production") MenuRadioGroup.displayName = "MenuRadioGroup";