@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/esm/modal/modal-close-button.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clearIcon = _interopRequireDefault(require("../utils/clear-icon"));
+
+var _modal = require("./modal.styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const ModalCloseButton = ({
+  onClick,
+  ...props
+}) => {
+  const clickHandler = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalCloseButton, {
+    type: "button",
+    onClick: clickHandler,
+    className: "nextui-modal-close-icon",
+    "aria-label": "Close",
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearIcon.default, {
+      plain: true,
+      size: 18,
+      className: "nextui-modal-close-icon-svg",
+      fill: "currentColor",
+      "aria-hidden": true
+    })
+  });
+};
+
+ModalCloseButton.toString = () => '.nextui-modal-close-icon';
+
+const MemoModalCloseButton = /*#__PURE__*/_react.default.memo(ModalCloseButton);
+
+var _default = MemoModalCloseButton;
+exports.default = _default;
+module.exports = exports.default;

package/esm/modal/modal-context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ModalConfig {
+    autoMargin?: boolean;
+    noPadding?: boolean;
+    close?: () => void;
+}
+export declare const ModalContext: React.Context<ModalConfig>;
+export declare const useModalContext: () => ModalConfig;

package/esm/modal/modal-context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useModalContext = exports.ModalContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {};
+
+const ModalContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.ModalContext = ModalContext;
+
+const useModalContext = () => _react.default.useContext(ModalContext);
+
+exports.useModalContext = useModalContext;

package/esm/modal/modal-footer.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Justify } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { ModalFooterVariantsProps } from './modal.styles';
+interface Props {
+    className?: string;
+    justify?: Justify;
+    autoMargin?: boolean;
+    css?: CSS;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type ModalFooterProps = Props & typeof defaultProps & NativeAttrs & ModalFooterVariantsProps;
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+}> & Omit<ModalFooterProps, "justify" | "className" | "autoMargin">>;
+export default _default;

package/esm/modal/modal-footer.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _modalContext = require("./modal-context");
+
+var _modal = require("./modal.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  className: '',
+  justify: 'flex-end',
+  autoMargin: true
+};
+const preClass = 'nextui-modal-footer';
+
+const ModalFooter = ({
+  children,
+  className,
+  justify,
+  autoMargin: autoMarginProp,
+  css,
+  ...props
+}) => {
+  const {
+    autoMargin: autoMarginContext,
+    noPadding
+  } = (0, _react.useContext)(_modalContext.ModalContext);
+  const autoMargin = (0, _react.useMemo)(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalFooter, {
+    className: (0, _clsx.default)(preClass, {
+      [`${preClass}-auto-margin`]: autoMargin,
+      [`${preClass}-no-padding`]: noPadding
+    }, className),
+    noPadding: noPadding,
+    autoMargin: autoMargin,
+    css: {
+      justifyContent: justify,
+      ...css
+    },
+    ...props,
+    children: children
+  });
+};
+
+ModalFooter.toString = () => '.nextui-modal-footer';
+
+const MemoModalFooter = /*#__PURE__*/_react.default.memo(ModalFooter);
+
+var _default = (0, _withDefaults.default)(MemoModalFooter, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/modal/modal-header.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Justify } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { ModalHeaderVariantsProps } from './modal.styles';
+interface Props {
+    className?: string;
+    justify?: Justify;
+    autoMargin?: boolean;
+    css?: CSS;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type ModalHeaderProps = Props & typeof defaultProps & NativeAttrs & ModalHeaderVariantsProps;
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+}> & Omit<ModalHeaderProps, "justify" | "className" | "autoMargin">>;
+export default _default;

package/esm/modal/modal-header.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _modalContext = require("./modal-context");
+
+var _modal = require("./modal.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  className: '',
+  justify: 'center',
+  autoMargin: true
+};
+const preClass = 'nextui-modal-header';
+
+const ModalHeader = ({
+  children,
+  className,
+  justify,
+  autoMargin: autoMarginProp,
+  css,
+  ...props
+}) => {
+  const {
+    autoMargin: autoMarginContext,
+    noPadding
+  } = (0, _react.useContext)(_modalContext.ModalContext);
+  const autoMargin = (0, _react.useMemo)(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalHeader, {
+    className: (0, _clsx.default)(preClass, {
+      [`${preClass}-auto-margin`]: autoMargin,
+      [`${preClass}-no-padding`]: noPadding
+    }, className),
+    noPadding: noPadding,
+    autoMargin: autoMargin,
+    css: {
+      justifyContent: justify,
+      ...css
+    },
+    ...props,
+    children: children
+  });
+};
+
+ModalHeader.toString = () => '.nextui-modal-header';
+
+const MemoModalHeader = /*#__PURE__*/_react.default.memo(ModalHeader);
+
+var _default = (0, _withDefaults.default)(MemoModalHeader, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/modal/modal-wrapper.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { ModalVariantsProps } from './modal.styles';
+interface Props {
+    visible?: boolean;
+    scroll?: boolean;
+    rebound?: boolean;
+    animated?: boolean;
+    fullScreen?: boolean;
+    closeButton?: boolean;
+    as?: keyof JSX.IntrinsicElements;
+    className?: string;
+    onCloseButtonClick?: () => void;
+}
+declare type NativeAttrs = Omit<React.DialogHTMLAttributes<unknown>, keyof Props>;
+export declare type ModalWrapperProps = Props & NativeAttrs & ModalVariantsProps & {
+    css?: CSS;
+};
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    visible: boolean;
+    rebound: boolean;
+}> & Omit<React.PropsWithChildren<ModalWrapperProps>, "visible" | "className" | "rebound">>;
+export default _default;

package/esm/modal/modal-wrapper.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
+
+var _collections = require("../utils/collections");
+
+var _modalCloseButton = _interopRequireDefault(require("./modal-close-button"));
+
+var _useKeyboard = require("../use-keyboard");
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _modal = require("./modal.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  className: '',
+  visible: false,
+  rebound: false
+};
+const preClass = 'nextui-modal';
+
+const ModalWrapper = ({
+  className,
+  children,
+  visible,
+  fullScreen,
+  closeButton,
+  rebound,
+  animated,
+  onCloseButtonClick,
+  scroll,
+  ...props
+}) => {
+  const modalContent = (0, _react.useRef)(null);
+  const tabStart = (0, _react.useRef)(null);
+  const tabEnd = (0, _react.useRef)(null);
+  const [rendered, setRendered] = (0, _react.useState)(false);
+  const {
+    isDark
+  } = (0, _useTheme.default)();
+  (0, _react.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setRendered(true);
+      clearTimeout(timer);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!visible) return;
+    const activeElement = document.activeElement;
+    const isChild = (0, _collections.isChildElement)(modalContent.current, activeElement);
+    if (isChild) return;
+    tabStart.current && tabStart.current.focus();
+  }, [visible]);
+
+  const onKeyDown = event => {
+    const isTabDown = event.keyCode === _useKeyboard.KeyCode.Tab;
+    if (!visible || !isTabDown) return;
+    const activeElement = document.activeElement;
+
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        tabEnd.current && tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        tabStart.current && tabStart.current.focus();
+      }
+    }
+  };
+
+  const handleClose = () => {
+    onCloseButtonClick && onCloseButtonClick();
+  };
+
+  const getState = (0, _react.useMemo)(() => {
+    return visible ? 'open' : 'closed';
+  }, [visible]);
+  const renderChildren = (0, _react.useMemo)(() => {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      (0, _jsxRuntime.jsxs)(_modal.StyledModal, {
+        role: "dialog",
+        tabIndex: -1,
+        "aria-modal": visible,
+        ref: modalContent,
+        "data-state": getState,
+        fullScreen: fullScreen,
+        scroll: scroll,
+        closeButton: closeButton,
+        isDark: isDark,
+        className: (0, _clsx.default)(preClass, `${preClass}--${getState}`, {
+          [`${preClass}-fullscreen`]: fullScreen,
+          [`${preClass}-with-close-button`]: closeButton,
+          [`${preClass}-rebound`]: rebound,
+          [`${preClass}-rendered`]: rendered
+        }, className),
+        ...props,
+        onKeyDown: onKeyDown,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalHideTab, {
+          role: "button",
+          tabIndex: 0,
+          className: `${preClass}-hide-tab`,
+          "aria-hidden": "true",
+          ref: tabStart
+        }), closeButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalCloseButton.default, {
+          onClick: handleClose
+        }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalHideTab, {
+          role: "button",
+          tabIndex: 0,
+          className: `${preClass}-hide-tab`,
+          "aria-hidden": "true",
+          ref: tabEnd
+        })]
+      })
+    );
+  }, [rebound, children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: animated ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
+      name: `${preClass}-wrapper`,
+      visible: visible,
+      enterTime: 20,
+      leaveTime: 20,
+      clearTime: 300,
+      children: renderChildren
+    }) : visible ? renderChildren : null
+  });
+};
+
+ModalWrapper.toString = () => '.nextui-modal-wrapper';
+
+var _default = (0, _withDefaults.default)(ModalWrapper, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/modal/modal.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import ModalBody from './modal-body';
+import ModalHeader from './modal-header';
+import ModalFooter from './modal-footer';
+import { ModalWrapperProps } from './modal-wrapper';
+interface Props {
+    open?: boolean;
+    scroll?: boolean;
+    blur?: boolean;
+    noPadding?: boolean;
+    closeButton?: boolean;
+    animated?: boolean;
+    fullScreen?: boolean;
+    autoMargin?: boolean;
+    width?: string;
+    preventClose?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    width: string;
+    className: string;
+    preventClose: boolean;
+    fullScreen: boolean;
+    closeButton: boolean;
+    animated: boolean;
+    blur: boolean;
+    scroll: boolean;
+    noPadding: boolean;
+};
+declare type NativeAttrs = Omit<React.DialogHTMLAttributes<unknown>, keyof Props>;
+export declare type ModalProps = Props & typeof defaultProps & NativeAttrs & ModalWrapperProps;
+declare type ModalComponent<P = {}> = React.FC<P> & {
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+};
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs;
+declare const _default: ModalComponent<ComponentProps>;
+export default _default;

package/esm/modal/modal.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _usePortal = _interopRequireDefault(require("../use-portal"));
+
+var _modalWrapper = _interopRequireDefault(require("./modal-wrapper"));
+
+var _backdrop = _interopRequireDefault(require("../backdrop"));
+
+var _modalContext = require("./modal-context");
+
+var _useBodyScroll = _interopRequireDefault(require("../use-body-scroll"));
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _useKeyboard = _interopRequireWildcard(require("../use-keyboard"));
+
+var _assertion = require("../utils/assertion");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  width: '400px',
+  className: '',
+  preventClose: false,
+  fullScreen: false,
+  closeButton: false,
+  animated: true,
+  blur: false,
+  scroll: false,
+  noPadding: false
+};
+
+const Modal = ({
+  children,
+  onClose,
+  onOpen,
+  open,
+  autoMargin,
+  width: wrapperWidth,
+  className,
+  preventClose,
+  blur,
+  animated,
+  fullScreen,
+  noPadding,
+  ...props
+}) => {
+  const portal = (0, _usePortal.default)('modal');
+  const [, setBodyHidden] = (0, _useBodyScroll.default)(null, {
+    scrollLayer: true
+  });
+  const [visible, setVisible, visibleRef] = (0, _useCurrentState.default)(false);
+  const [rebound, setRebound] = (0, _react.useState)(false);
+
+  const closeModal = () => {
+    onClose && onClose();
+    setVisible(false);
+    setBodyHidden(false);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (open === undefined) return;
+
+    if (open) {
+      onOpen && onOpen();
+    }
+
+    if (!open && visibleRef.current) {
+      onClose && onClose();
+    }
+
+    setVisible(open);
+    setBodyHidden(open);
+  }, [open]);
+
+  const toggleRebound = () => {
+    setRebound(true);
+    const timer = setTimeout(() => {
+      setRebound(false);
+      clearTimeout(timer);
+    }, 300);
+  };
+
+  const {
+    bindings
+  } = (0, _useKeyboard.default)(() => {
+    if (preventClose) {
+      toggleRebound();
+      return;
+    }
+
+    closeModal();
+  }, _useKeyboard.KeyCode.Escape, {
+    disableGlobalEvent: true,
+    preventDefault: true
+  });
+
+  const closeFromBackdrop = () => {
+    if (preventClose) {
+      toggleRebound();
+      return;
+    }
+
+    closeModal();
+  };
+
+  const modalConfig = (0, _react.useMemo)(() => ({
+    close: closeModal,
+    autoMargin,
+    noPadding
+  }), []);
+  if (!portal) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalContext.ModalContext.Provider, {
+    value: modalConfig,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_backdrop.default, {
+      onClick: closeFromBackdrop,
+      visible: visible,
+      maxWidth: wrapperWidth,
+      fullScreen: fullScreen,
+      blur: blur,
+      animated: animated,
+      ...bindings,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalWrapper.default, {
+        visible: visible,
+        onCloseButtonClick: closeModal,
+        className: className,
+        fullScreen: fullScreen,
+        rebound: rebound,
+        animated: animated,
+        ...props,
+        children: children
+      })
+    })
+  }), portal);
+};
+
+if (_assertion.__DEV__) {
+  _backdrop.default.displayName = 'NextUI - Modal';
+}
+
+Modal.toString = () => '.nextui-modal';
+
+Modal.defaultProps = defaultProps;
+var _default = Modal;
+exports.default = _default;
+module.exports = exports.default;