@wordpress/components
Version:
UI components for WordPress.
61 lines (58 loc) • 1.72 kB
JavaScript
/**
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
/**
* WordPress dependencies
*/
import { forwardRef, useContext } from '@wordpress/element';
import { Icon, check } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { MenuContext } from './context';
import * as Styled from './styles';
import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({
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.MenuCheckboxItem, {
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: check,
size: 24
})
}), /*#__PURE__*/_jsxs(Styled.MenuItemContentWrapper, {
children: [/*#__PURE__*/_jsx(Styled.MenuItemChildrenWrapper, {
children: children
}), suffix && /*#__PURE__*/_jsx(Styled.ItemSuffixWrapper, {
children: suffix
})]
})]
});
});
//# sourceMappingURL=checkbox-item.js.map