Files F100954218

Modal.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Tue, Feb 4, 06:44

Modal.js
View Options

	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	import _extends from "@babel/runtime/helpers/esm/extends";
	const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
	import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
	import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
	import styled from '../styles/styled';
	import useThemeProps from '../styles/useThemeProps';
	import Backdrop from '../Backdrop';
	import { jsx as _jsx } from "react/jsx-runtime";
	export const modalClasses = modalUnstyledClasses;
	const extendUtilityClasses = ownerState => {
	return ownerState.classes;
	};
	const ModalRoot = styled('div', {
	name: 'MuiModal',
	slot: 'Root',
	overridesResolver: (props, styles) => {
	const {
	ownerState
	} = props;
	return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
	}
	})(({
	theme,
	ownerState
	}) => _extends({
	position: 'fixed',
	zIndex: (theme.vars \|\| theme).zIndex.modal,
	right: 0,
	bottom: 0,
	top: 0,
	left: 0
	}, !ownerState.open && ownerState.exited && {
	visibility: 'hidden'
	}));
	const ModalBackdrop = styled(Backdrop, {
	name: 'MuiModal',
	slot: 'Backdrop',
	overridesResolver: (props, styles) => {
	return styles.backdrop;
	}
	})({
	zIndex: -1
	});

	/**
	* Modal is a lower-level construct that is leveraged by the following components:
	*
	* - [Dialog](/material-ui/api/dialog/)
	* - [Drawer](/material-ui/api/drawer/)
	* - [Menu](/material-ui/api/menu/)
	* - [Popover](/material-ui/api/popover/)
	*
	* If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
	* rather than directly using Modal.
	*
	* This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
	*/
	const Modal = /#__PURE__/React.forwardRef(function Modal(inProps, ref) {
	var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
	const props = useThemeProps({
	name: 'MuiModal',
	props: inProps
	});
	const {
	BackdropComponent = ModalBackdrop,
	BackdropProps,
	closeAfterTransition = false,
	children,
	component,
	components = {},
	componentsProps = {},
	disableAutoFocus = false,
	disableEnforceFocus = false,
	disableEscapeKeyDown = false,
	disablePortal = false,
	disableRestoreFocus = false,
	disableScrollLock = false,
	hideBackdrop = false,
	keepMounted = false,
	slotProps,
	slots,
	// eslint-disable-next-line react/prop-types
	theme
	} = props,
	other = _objectWithoutPropertiesLoose(props, _excluded);
	const [exited, setExited] = React.useState(true);
	const commonProps = {
	closeAfterTransition,
	disableAutoFocus,
	disableEnforceFocus,
	disableEscapeKeyDown,
	disablePortal,
	disableRestoreFocus,
	disableScrollLock,
	hideBackdrop,
	keepMounted
	};
	const ownerState = _extends({}, props, commonProps, {
	exited
	});
	const classes = extendUtilityClasses(ownerState);
	const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
	const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
	const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
	const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
	return /#__PURE__/_jsx(ModalUnstyled, _extends({
	slots: {
	root: RootSlot,
	backdrop: BackdropSlot
	},
	slotProps: {
	root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
	as: component,
	theme
	}),
	backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState))
	},
	onTransitionEnter: () => setExited(false),
	onTransitionExited: () => setExited(true),
	ref: ref
	}, other, {
	classes: classes
	}, commonProps, {
	children: children
	}));
	});
	process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit the d.ts file and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* A backdrop component. This prop enables custom backdrop rendering.
	* @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
	* Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
	* @default styled(Backdrop, {
	* name: 'MuiModal',
	* slot: 'Backdrop',
	* overridesResolver: (props, styles) => {
	* return styles.backdrop;
	* },
	* })({
	* zIndex: -1,
	* })
	*/
	BackdropComponent: PropTypes.elementType,
	/**
	* Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
	* @deprecated Use `slotProps.backdrop` instead.
	*/
	BackdropProps: PropTypes.object,
	/**
	* A single child content element.
	*/
	children: elementAcceptingRef.isRequired,
	/**
	* Override or extend the styles applied to the component.
	*/
	classes: PropTypes.object,
	/**
	* When set to true the Modal waits until a nested Transition is completed before closing.
	* @default false
	*/
	closeAfterTransition: PropTypes.bool,
	/**
	* The component used for the root node.
	* Either a string to use a HTML element or a component.
	*/
	component: PropTypes.elementType,
	/**
	* The components used for each slot inside.
	*
	* This prop is an alias for the `slots` prop.
	* It's recommended to use the `slots` prop instead.
	*
	* @default {}
	*/
	components: PropTypes.shape({
	Backdrop: PropTypes.elementType,
	Root: PropTypes.elementType
	}),
	/**
	* The extra props for the slot components.
	* You can override the existing props or add new ones.
	*
	* This prop is an alias for the `slotProps` prop.
	* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
	*
	* @default {}
	*/
	componentsProps: PropTypes.shape({
	backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
	root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
	}),
	/**
	* An HTML element or function that returns one.
	* The `container` will have the portal children appended to it.
	*
	* By default, it uses the body of the top-level document object,
	* so it's simply `document.body` most of the time.
	*/
	container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
	/**
	* If `true`, the modal will not automatically shift focus to itself when it opens, and
	* replace it to the last focused element when it closes.
	* This also works correctly with any modal children that have the `disableAutoFocus` prop.
	*
	* Generally this should never be set to `true` as it makes the modal less
	* accessible to assistive technologies, like screen readers.
	* @default false
	*/
	disableAutoFocus: PropTypes.bool,
	/**
	* If `true`, the modal will not prevent focus from leaving the modal while open.
	*
	* Generally this should never be set to `true` as it makes the modal less
	* accessible to assistive technologies, like screen readers.
	* @default false
	*/
	disableEnforceFocus: PropTypes.bool,
	/**
	* If `true`, hitting escape will not fire the `onClose` callback.
	* @default false
	*/
	disableEscapeKeyDown: PropTypes.bool,
	/**
	* The `children` will be under the DOM hierarchy of the parent component.
	* @default false
	*/
	disablePortal: PropTypes.bool,
	/**
	* If `true`, the modal will not restore focus to previously focused element once
	* modal is hidden or unmounted.
	* @default false
	*/
	disableRestoreFocus: PropTypes.bool,
	/**
	* Disable the scroll lock behavior.
	* @default false
	*/
	disableScrollLock: PropTypes.bool,
	/**
	* If `true`, the backdrop is not rendered.
	* @default false
	*/
	hideBackdrop: PropTypes.bool,
	/**
	* Always keep the children in the DOM.
	* This prop can be useful in SEO situation or
	* when you want to maximize the responsiveness of the Modal.
	* @default false
	*/
	keepMounted: PropTypes.bool,
	/**
	* Callback fired when the backdrop is clicked.
	* @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
	*/
	onBackdropClick: PropTypes.func,
	/**
	* Callback fired when the component requests to be closed.
	* The `reason` parameter can optionally be used to control the response to `onClose`.
	*
	* @param {object} event The event source of the callback.
	* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
	*/
	onClose: PropTypes.func,
	/**
	* If `true`, the component is shown.
	*/
	open: PropTypes.bool.isRequired,
	/**
	* The props used for each slot inside the Modal.
	* @default {}
	*/
	slotProps: PropTypes.shape({
	backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
	root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
	}),
	/**
	* The components used for each slot inside the Modal.
	* Either a string to use a HTML element or a component.
	* @default {}
	*/
	slots: PropTypes.shape({
	backdrop: PropTypes.elementType,
	root: PropTypes.elementType
	}),
	/**
	* The system prop that allows defining system overrides as well as additional CSS styles.
	*/
	sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
	} : void 0;
	export default Modal;

Event Timeline