Buckets:
| 'use client'; | |
| import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | |
| import _extends from "@babel/runtime/helpers/esm/extends"; | |
| const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"]; | |
| import * as React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import clsx from 'clsx'; | |
| import HTMLElementType from '@mui/utils/HTMLElementType'; | |
| import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; | |
| import composeClasses from '@mui/utils/composeClasses'; | |
| import useSlotProps from '@mui/utils/useSlotProps'; | |
| import FocusTrap from '../Unstable_TrapFocus'; | |
| import Portal from '../Portal'; | |
| import styled from '../styles/styled'; | |
| import { useDefaultProps } from '../DefaultPropsProvider'; | |
| import Backdrop from '../Backdrop'; | |
| import useModal from './useModal'; | |
| import { getModalUtilityClass } from './modalClasses'; | |
| import { jsx as _jsx } from "react/jsx-runtime"; | |
| import { jsxs as _jsxs } from "react/jsx-runtime"; | |
| const useUtilityClasses = ownerState => { | |
| const { | |
| open, | |
| exited, | |
| classes | |
| } = ownerState; | |
| const slots = { | |
| root: ['root', !open && exited && 'hidden'], | |
| backdrop: ['backdrop'] | |
| }; | |
| return composeClasses(slots, getModalUtilityClass, 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 = useDefaultProps({ | |
| name: 'MuiModal', | |
| props: inProps | |
| }); | |
| const { | |
| BackdropComponent = ModalBackdrop, | |
| BackdropProps, | |
| className, | |
| closeAfterTransition = false, | |
| children, | |
| container, | |
| component, | |
| components = {}, | |
| componentsProps = {}, | |
| disableAutoFocus = false, | |
| disableEnforceFocus = false, | |
| disableEscapeKeyDown = false, | |
| disablePortal = false, | |
| disableRestoreFocus = false, | |
| disableScrollLock = false, | |
| hideBackdrop = false, | |
| keepMounted = false, | |
| onBackdropClick, | |
| open, | |
| slotProps, | |
| slots | |
| // eslint-disable-next-line react/prop-types | |
| } = props, | |
| other = _objectWithoutPropertiesLoose(props, _excluded); | |
| const propsWithDefaults = _extends({}, props, { | |
| closeAfterTransition, | |
| disableAutoFocus, | |
| disableEnforceFocus, | |
| disableEscapeKeyDown, | |
| disablePortal, | |
| disableRestoreFocus, | |
| disableScrollLock, | |
| hideBackdrop, | |
| keepMounted | |
| }); | |
| const { | |
| getRootProps, | |
| getBackdropProps, | |
| getTransitionProps, | |
| portalRef, | |
| isTopModal, | |
| exited, | |
| hasTransition | |
| } = useModal(_extends({}, propsWithDefaults, { | |
| rootRef: ref | |
| })); | |
| const ownerState = _extends({}, propsWithDefaults, { | |
| exited | |
| }); | |
| const classes = useUtilityClasses(ownerState); | |
| const childProps = {}; | |
| if (children.props.tabIndex === undefined) { | |
| childProps.tabIndex = '-1'; | |
| } | |
| // It's a Transition like component | |
| if (hasTransition) { | |
| const { | |
| onEnter, | |
| onExited | |
| } = getTransitionProps(); | |
| childProps.onEnter = onEnter; | |
| childProps.onExited = onExited; | |
| } | |
| 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; | |
| const rootProps = useSlotProps({ | |
| elementType: RootSlot, | |
| externalSlotProps: rootSlotProps, | |
| externalForwardedProps: other, | |
| getSlotProps: getRootProps, | |
| additionalProps: { | |
| ref, | |
| as: component | |
| }, | |
| ownerState, | |
| className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden)) | |
| }); | |
| const backdropProps = useSlotProps({ | |
| elementType: BackdropSlot, | |
| externalSlotProps: backdropSlotProps, | |
| additionalProps: BackdropProps, | |
| getSlotProps: otherHandlers => { | |
| return getBackdropProps(_extends({}, otherHandlers, { | |
| onClick: e => { | |
| if (onBackdropClick) { | |
| onBackdropClick(e); | |
| } | |
| if (otherHandlers != null && otherHandlers.onClick) { | |
| otherHandlers.onClick(e); | |
| } | |
| } | |
| })); | |
| }, | |
| className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop), | |
| ownerState | |
| }); | |
| if (!keepMounted && !open && (!hasTransition || exited)) { | |
| return null; | |
| } | |
| return /*#__PURE__*/_jsx(Portal, { | |
| ref: portalRef, | |
| container: container, | |
| disablePortal: disablePortal, | |
| children: /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, { | |
| children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, _extends({}, backdropProps)) : null, /*#__PURE__*/_jsx(FocusTrap, { | |
| disableEnforceFocus: disableEnforceFocus, | |
| disableAutoFocus: disableAutoFocus, | |
| disableRestoreFocus: disableRestoreFocus, | |
| isEnabled: isTopModal, | |
| open: open, | |
| children: /*#__PURE__*/React.cloneElement(children, childProps) | |
| })] | |
| })) | |
| }); | |
| }); | |
| 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 `pnpm 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, | |
| /** | |
| * @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. | |
| * | |
| * 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. | |
| * | |
| * You can also provide a callback, which is called in a React layout effect. | |
| * This lets you set the container from a ref, and also makes server-side rendering possible. | |
| * | |
| * 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, | |
| /** | |
| * A function called when a transition enters. | |
| */ | |
| onTransitionEnter: PropTypes.func, | |
| /** | |
| * A function called when a transition has exited. | |
| */ | |
| onTransitionExited: 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; |
Xet Storage Details
- Size:
- 13.7 kB
- Xet hash:
- edc7c7ac305b0a28dcd3e05c6b49a91a2ab9d898e25d575a3d7ff81033568a07
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.