@material-ui/unstyled
Version:
Unstyled React components with which to implement custom design systems.
436 lines (377 loc) • 14.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { elementAcceptingRef, HTMLElementType, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_createChainedFunction as createChainedFunction, unstable_useEventCallback as useEventCallback } from '@material-ui/utils';
import composeClasses from '../composeClasses';
import isHostComponent from '../utils/isHostComponent';
import Portal from '../Portal';
import ModalManager, { ariaHidden } from './ModalManager';
import TrapFocus from '../Unstable_TrapFocus';
import { getModalUtilityClass } from './modalUnstyledClasses';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useUtilityClasses = function useUtilityClasses(ownerState) {
var open = ownerState.open,
exited = ownerState.exited,
classes = ownerState.classes;
var slots = {
root: ['root', !open && exited && 'hidden']
};
return composeClasses(slots, getModalUtilityClass, classes);
};
function getContainer(container) {
return typeof container === 'function' ? container() : container;
}
function getHasTransition(props) {
return props.children ? props.children.props.hasOwnProperty('in') : false;
} // A modal manager used to track and manage the state of open Modals.
// Modals don't open on the server so this won't conflict with concurrent requests.
var defaultManager = new ModalManager();
/**
* Modal is a lower-level construct that is leveraged by the following components:
*
* - [Dialog](/api/dialog/)
* - [Drawer](/api/drawer/)
* - [Menu](/api/menu/)
* - [Popover](/api/popover/)
*
* If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
* rather than directly using Modal.
*
* This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
*/
var ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props, ref) {
var BackdropComponent = props.BackdropComponent,
BackdropProps = props.BackdropProps,
children = props.children,
classesProp = props.classes,
className = props.className,
_props$closeAfterTran = props.closeAfterTransition,
closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
_props$component = props.component,
component = _props$component === void 0 ? 'div' : _props$component,
_props$components = props.components,
components = _props$components === void 0 ? {} : _props$components,
_props$componentsProp = props.componentsProps,
componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
container = props.container,
_props$disableAutoFoc = props.disableAutoFocus,
disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
_props$disableEnforce = props.disableEnforceFocus,
disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
_props$disableEscapeK = props.disableEscapeKeyDown,
disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
_props$disablePortal = props.disablePortal,
disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
_props$disableRestore = props.disableRestoreFocus,
disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
_props$disableScrollL = props.disableScrollLock,
disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
_props$hideBackdrop = props.hideBackdrop,
hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
_props$keepMounted = props.keepMounted,
keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
_props$manager = props.manager,
manager = _props$manager === void 0 ? defaultManager : _props$manager,
onBackdropClick = props.onBackdropClick,
onClose = props.onClose,
onKeyDown = props.onKeyDown,
open = props.open,
theme = props.theme,
onTransitionEnter = props.onTransitionEnter,
onTransitionExited = props.onTransitionExited,
other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"]);
var _React$useState = React.useState(true),
exited = _React$useState[0],
setExited = _React$useState[1];
var modal = React.useRef({});
var mountNodeRef = React.useRef(null);
var modalRef = React.useRef(null);
var handleRef = useForkRef(modalRef, ref);
var hasTransition = getHasTransition(props);
var getDoc = function getDoc() {
return ownerDocument(mountNodeRef.current);
};
var getModal = function getModal() {
modal.current.modalRef = modalRef.current;
modal.current.mountNode = mountNodeRef.current;
return modal.current;
};
var handleMounted = function handleMounted() {
manager.mount(getModal(), {
disableScrollLock: disableScrollLock
}); // Fix a bug on Chrome where the scroll isn't initially 0.
modalRef.current.scrollTop = 0;
};
var handleOpen = useEventCallback(function () {
var resolvedContainer = getContainer(container) || getDoc().body;
manager.add(getModal(), resolvedContainer); // The element was already mounted.
if (modalRef.current) {
handleMounted();
}
});
var isTopModal = React.useCallback(function () {
return manager.isTopModal(getModal());
}, [manager]);
var handlePortalRef = useEventCallback(function (node) {
mountNodeRef.current = node;
if (!node) {
return;
}
if (open && isTopModal()) {
handleMounted();
} else {
ariaHidden(modalRef.current, true);
}
});
var handleClose = React.useCallback(function () {
manager.remove(getModal());
}, [manager]);
React.useEffect(function () {
return function () {
handleClose();
};
}, [handleClose]);
React.useEffect(function () {
if (open) {
handleOpen();
} else if (!hasTransition || !closeAfterTransition) {
handleClose();
}
}, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
var ownerState = _extends({}, props, {
classes: classesProp,
closeAfterTransition: closeAfterTransition,
disableAutoFocus: disableAutoFocus,
disableEnforceFocus: disableEnforceFocus,
disableEscapeKeyDown: disableEscapeKeyDown,
disablePortal: disablePortal,
disableRestoreFocus: disableRestoreFocus,
disableScrollLock: disableScrollLock,
exited: exited,
hideBackdrop: hideBackdrop,
keepMounted: keepMounted
});
var classes = useUtilityClasses(ownerState);
if (!keepMounted && !open && (!hasTransition || exited)) {
return null;
}
var handleEnter = function handleEnter() {
setExited(false);
if (onTransitionEnter) {
onTransitionEnter();
}
};
var handleExited = function handleExited() {
setExited(true);
if (onTransitionExited) {
onTransitionExited();
}
if (closeAfterTransition) {
handleClose();
}
};
var handleBackdropClick = function handleBackdropClick(event) {
if (event.target !== event.currentTarget) {
return;
}
if (onBackdropClick) {
onBackdropClick(event);
}
if (onClose) {
onClose(event, 'backdropClick');
}
};
var handleKeyDown = function handleKeyDown(event) {
if (onKeyDown) {
onKeyDown(event);
} // The handler doesn't take event.defaultPrevented into account:
//
// event.preventDefault() is meant to stop default behaviors like
// clicking a checkbox to check it, hitting a button to submit a form,
// and hitting left arrow to move the cursor in a text input etc.
// Only special HTML elements have these default behaviors.
if (event.key !== 'Escape' || !isTopModal()) {
return;
}
if (!disableEscapeKeyDown) {
// Swallow the event, in case someone is listening for the escape key on the body.
event.stopPropagation();
if (onClose) {
onClose(event, 'escapeKeyDown');
}
}
};
var childProps = {};
if (children.props.tabIndex === undefined) {
childProps.tabIndex = '-1';
} // It's a Transition like component
if (hasTransition) {
childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
}
var Root = components.Root || component;
var rootProps = componentsProps.root || {};
return /*#__PURE__*/_jsx(Portal, {
ref: handlePortalRef,
container: container,
disablePortal: disablePortal,
children: /*#__PURE__*/_jsxs(Root, _extends({
role: "presentation"
}, rootProps, !isHostComponent(Root) && {
as: component,
ownerState: _extends({}, ownerState, rootProps.ownerState),
theme: theme
}, other, {
ref: handleRef,
onKeyDown: handleKeyDown,
className: clsx(classes.root, rootProps.className, className),
children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropComponent, _extends({
open: open,
onClick: handleBackdropClick
}, BackdropProps)) : null, /*#__PURE__*/_jsx(TrapFocus, {
disableEnforceFocus: disableEnforceFocus,
disableAutoFocus: disableAutoFocus,
disableRestoreFocus: disableRestoreFocus,
isEnabled: isTopModal,
open: open,
children: /*#__PURE__*/React.cloneElement(children, childProps)
})]
}))
});
});
process.env.NODE_ENV !== "production" ? ModalUnstyled.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.
*/
BackdropComponent: PropTypes.elementType,
/**
* Props applied to the [`BackdropUnstyled`](/api/backdrop-unstyled/) element.
*/
BackdropProps: PropTypes.object,
/**
* A single child content element.
*/
children: elementAcceptingRef.isRequired,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* 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 the Modal.
* Either a string to use a HTML element or a component.
* @default {}
*/
components: PropTypes.shape({
Root: PropTypes.elementType
}),
/**
* The props used for each slot inside the Modal.
* @default {}
*/
componentsProps: 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.
* @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.
*/
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,
/**
* @ignore
*/
onKeyDown: PropTypes.func,
/**
* If `true`, the component is shown.
*/
open: PropTypes.bool.isRequired
} : void 0;
export default ModalUnstyled;