UNPKG

@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
'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";