Files F98209284

MenuUnstyled.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Sat, Jan 11, 02:07

MenuUnstyled.js
View Options

	import _extends from "@babel/runtime/helpers/esm/extends";
	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	const _excluded = ["actions", "anchorEl", "children", "component", "keepMounted", "listboxId", "onClose", "open", "slotProps", "slots"];
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import { HTMLElementType, refType } from '@mui/utils';
	import MenuUnstyledContext from './MenuUnstyledContext';
	import { getMenuUnstyledUtilityClass } from './menuUnstyledClasses';
	import useMenu from './useMenu';
	import composeClasses from '../composeClasses';
	import PopperUnstyled from '../PopperUnstyled';
	import useSlotProps from '../utils/useSlotProps';
	import { jsx as _jsx } from "react/jsx-runtime";
	function getUtilityClasses(ownerState) {
	const {
	open
	} = ownerState;
	const slots = {
	root: ['root', open && 'expanded'],
	listbox: ['listbox', open && 'expanded']
	};
	return composeClasses(slots, getMenuUnstyledUtilityClass, {});
	}
	/**
	*
	* Demos:
	*
	* - [Unstyled Menu](https://mui.com/base/react-menu/)
	*
	* API:
	*
	* - [MenuUnstyled API](https://mui.com/base/api/menu-unstyled/)
	*/
	const MenuUnstyled = /#__PURE__/React.forwardRef(function MenuUnstyled(props, forwardedRef) {
	const {
	actions,
	anchorEl,
	children,
	component,
	keepMounted = false,
	listboxId,
	onClose,
	open = false,
	slotProps = {},
	slots = {}
	} = props,
	other = _objectWithoutPropertiesLoose(props, _excluded);
	const {
	registerItem,
	unregisterItem,
	getListboxProps,
	getItemProps,
	getItemState,
	highlightFirstItem,
	highlightLastItem
	} = useMenu({
	open,
	onClose,
	listboxId
	});
	React.useImperativeHandle(actions, () => ({
	highlightFirstItem,
	highlightLastItem
	}), [highlightFirstItem, highlightLastItem]);
	const ownerState = _extends({}, props, {
	open
	});
	const classes = getUtilityClasses(ownerState);
	const Root = component ?? slots.root ?? PopperUnstyled;
	const rootProps = useSlotProps({
	elementType: Root,
	externalForwardedProps: other,
	externalSlotProps: slotProps.root,
	additionalProps: {
	anchorEl,
	open,
	keepMounted,
	role: undefined,
	ref: forwardedRef
	},
	className: classes.root,
	ownerState
	});
	const Listbox = slots.listbox ?? 'ul';
	const listboxProps = useSlotProps({
	elementType: Listbox,
	getSlotProps: getListboxProps,
	externalSlotProps: slotProps.listbox,
	ownerState,
	className: classes.listbox
	});
	const contextValue = React.useMemo(() => ({
	registerItem,
	unregisterItem,
	getItemState,
	getItemProps,
	open
	}), [getItemProps, getItemState, open, registerItem, unregisterItem]);
	return /#__PURE__/_jsx(Root, _extends({}, rootProps, {
	children: /#__PURE__/_jsx(Listbox, _extends({}, listboxProps, {
	children: /#__PURE__/_jsx(MenuUnstyledContext.Provider, {
	value: contextValue,
	children: children
	})
	}))
	}));
	});
	process.env.NODE_ENV !== "production" ? MenuUnstyled.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit TypeScript types and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* A ref with imperative actions.
	* It allows to select the first or last menu item.
	*/
	actions: refType,
	/**
	* An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
	* or a function that returns either.
	* It's used to set the position of the popper.
	*/
	anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
	/**
	* @ignore
	*/
	children: PropTypes.node,
	/**
	* The component used for the root node.
	* Either a string to use a HTML element or a component.
	*/
	component: PropTypes.elementType,
	/**
	* Always keep the menu in the DOM.
	* This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Menu.
	*
	* @default false
	*/
	keepMounted: PropTypes.bool,
	/**
	* @ignore
	*/
	listboxId: PropTypes.string,
	/**
	* Triggered when focus leaves the menu and the menu should close.
	*/
	onClose: PropTypes.func,
	/**
	* Controls whether the menu is displayed.
	* @default false
	*/
	open: PropTypes.bool,
	/**
	* The props used for each slot inside the Menu.
	* @default {}
	*/
	slotProps: PropTypes.shape({
	listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
	root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
	}),
	/**
	* The components used for each slot inside the Menu.
	* Either a string to use a HTML element or a component.
	* @default {}
	*/
	slots: PropTypes.shape({
	listbox: PropTypes.elementType,
	root: PropTypes.elementType
	})
	} : void 0;
	export default MenuUnstyled;

Event Timeline