Page MenuHomec4science
Files F100929423

useMenuItem.js
No OneTemporary
Actions

File Metadata

Created
Tue, Feb 4, 01:20

useMenuItem.js
View Options

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
import { MenuUnstyledContext } from '../MenuUnstyled';
import { useButton } from '../ButtonUnstyled';
export default function useMenuItem(props) {
const {
disabled = false,
ref,
label
} = props;
const id = useId();
const menuContext = React.useContext(MenuUnstyledContext);
const itemRef = React.useRef(null);
const handleRef = useForkRef(itemRef, ref);
if (menuContext === null) {
throw new Error('MenuItemUnstyled must be used within a MenuUnstyled');
}
const {
registerItem,
unregisterItem,
open
} = menuContext;
React.useEffect(() => {
if (id === undefined) {
return undefined;
}
registerItem(id, {
disabled,
id,
ref: itemRef,
label
});
return () => unregisterItem(id);
}, [id, registerItem, unregisterItem, disabled, ref, label]);
const {
getRootProps: getButtonProps,
focusVisible
} = useButton({
disabled,
focusableWhenDisabled: true,
ref: handleRef
});
// Ensure the menu item is focused when highlighted
const [focusRequested, requestFocus] = React.useState(false);
const focusIfRequested = React.useCallback(() => {
if (focusRequested && itemRef.current != null) {
itemRef.current.focus();
requestFocus(false);
}
}, [focusRequested]);
React.useEffect(() => {
focusIfRequested();
});
React.useDebugValue({
id,
disabled,
label
});
const itemState = menuContext.getItemState(id ?? '');
const {
highlighted
} = itemState ?? {
highlighted: false
};
React.useEffect(() => {
requestFocus(highlighted && open);
}, [highlighted, open]);
if (id === undefined) {
return {
getRootProps: other => _extends({}, other, getButtonProps(other), {
role: 'menuitem'
}),
disabled: false,
focusVisible
};
}
return {
getRootProps: other => {
const optionProps = menuContext.getItemProps(id, other);
return _extends({}, other, getButtonProps(other), {
tabIndex: optionProps.tabIndex,
id: optionProps.id,
role: 'menuitem'
});
},
disabled: itemState?.disabled ?? false,
focusVisible
};
}

Event Timeline

c4science · Help