@wordpress/components
Version:
UI components for WordPress.
69 lines (66 loc) • 1.8 kB
JavaScript
/**
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
/**
* WordPress dependencies
*/
import { forwardRef, useContext } from '@wordpress/element';
import { Icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { Context } from './context';
import * as Styled from './styles';
import { SVG, Circle } from '@wordpress/primitives';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const radioCheck = /*#__PURE__*/_jsx(SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
children: /*#__PURE__*/_jsx(Circle, {
cx: 12,
cy: 12,
r: 3
})
});
export const RadioItem = forwardRef(function RadioItem({
suffix,
children,
disabled = false,
hideOnClick = false,
...props
}, ref) {
const menuContext = useContext(Context);
if (!menuContext?.store) {
throw new Error('Menu.RadioItem can only be rendered inside a Menu component');
}
return /*#__PURE__*/_jsxs(Styled.RadioItem, {
ref: ref,
...props,
accessibleWhenDisabled: true,
disabled: disabled,
hideOnClick: hideOnClick,
store: menuContext.store,
children: [/*#__PURE__*/_jsx(Ariakit.MenuItemCheck, {
store: menuContext.store,
render: /*#__PURE__*/_jsx(Styled.ItemPrefixWrapper, {})
// Override some ariakit inline styles
,
style: {
width: 'auto',
height: 'auto'
},
children: /*#__PURE__*/_jsx(Icon, {
icon: radioCheck,
size: 24
})
}), /*#__PURE__*/_jsxs(Styled.ItemContentWrapper, {
children: [/*#__PURE__*/_jsx(Styled.ItemChildrenWrapper, {
children: children
}), suffix && /*#__PURE__*/_jsx(Styled.ItemSuffixWrapper, {
children: suffix
})]
})]
});
});
//# sourceMappingURL=radio-item.js.map