@base-ui/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.
57 lines (55 loc) • 1.74 kB
JavaScript
'use client';
import * as React from 'react';
import { useMenuCheckboxItemContext } from "../checkbox-item/MenuCheckboxItemContext.js";
import { useRenderElement } from "../../internals/useRenderElement.js";
import { itemMapping } from "../utils/stateAttributesMapping.js";
import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
/**
* Indicates whether the checkbox item is ticked.
* Renders a `<span>` element.
*
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
*/
export const MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function MenuCheckboxItemIndicator(componentProps, forwardedRef) {
const {
render,
className,
style,
keepMounted = false,
...elementProps
} = componentProps;
const item = useMenuCheckboxItemContext();
const indicatorRef = React.useRef(null);
const {
transitionStatus,
setMounted
} = useTransitionStatus(item.checked);
useOpenChangeComplete({
open: item.checked,
ref: indicatorRef,
onComplete() {
if (!item.checked) {
setMounted(false);
}
}
});
const state = {
checked: item.checked,
disabled: item.disabled,
highlighted: item.highlighted,
transitionStatus
};
const element = useRenderElement('span', componentProps, {
state,
ref: [forwardedRef, indicatorRef],
stateAttributesMapping: itemMapping,
props: {
'aria-hidden': true,
...elementProps
},
enabled: keepMounted || item.checked
});
return element;
});
if (process.env.NODE_ENV !== "production") MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";