@wordpress/components
Version:
UI components for WordPress.
71 lines (68 loc) • 1.94 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 { MenuContext } from './context';
import * as Styled from './styles';
import { SVG, Circle } from '@wordpress/primitives';
import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
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 MenuRadioItem = forwardRef(function MenuRadioItem({
suffix,
children,
onBlur,
hideOnClick = false,
...props
}, ref) {
// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
const focusVisibleFixProps = useTemporaryFocusVisibleFix({
onBlur
});
const menuContext = useContext(MenuContext);
return /*#__PURE__*/_jsxs(Styled.MenuRadioItem, {
ref: ref,
...props,
...focusVisibleFixProps,
accessibleWhenDisabled: true,
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.MenuItemContentWrapper, {
children: [/*#__PURE__*/_jsx(Styled.MenuItemChildrenWrapper, {
children: children
}), suffix && /*#__PURE__*/_jsx(Styled.ItemSuffixWrapper, {
children: suffix
})]
})]
});
});
//# sourceMappingURL=radio-item.js.map