@coreui/react-pro 4.1.2 → 4.1.3

package/dist/index.js

@@ -6517,11 +6517,12 @@ CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = React.createContext({});
 var CModal = React.forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, visible = _a.visible;
+    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, _g = _a.unmountOnClose, unmountOnClose = _g === void 0 ? true : _g, visible = _a.visible;
     var modalRef = React.useRef(null);
+    var modalContentRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _g = React.useState(visible), _visible = _g[0], setVisible = _g[1];
-    var _h = React.useState(false), staticBackdrop = _h[0], setStaticBackdrop = _h[1];
+    var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _j = React.useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -6529,6 +6530,14 @@ var CModal = React.forwardRef(function (_a, ref) {
         visible: _visible,
         setVisible: setVisible,
     };
+    React.useEffect(function () {
+        modalRef.current && modalRef.current.addEventListener('click', handleClickOutside);
+        modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown);
+        return function () {
+            modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside);
+            modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown);
+        };
+    }, [_visible]);
     var handleDismiss = function () {
         if (backdrop === 'static') {
             return setStaticBackdrop(true);
@@ -6566,6 +6575,12 @@ var CModal = React.forwardRef(function (_a, ref) {
         }
         return function () { return document.body.classList.remove('modal-open'); };
     }, [_visible]);
+    var handleClickOutside = function (event) {
+        if (modalContentRef.current &&
+            !modalContentRef.current.contains(event.target)) {
+            handleDismiss();
+        }
+    };
     var handleKeyDown = React.useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -6574,17 +6589,16 @@ var CModal = React.forwardRef(function (_a, ref) {
     var modal = function (ref, transitionClass) {
         return (React__default["default"].createElement(CModalContext.Provider, { value: contextValues },
             React__default["default"].createElement("div", { className: classNames$1(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
-                React__default["default"].createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size, onClick: function (event) { return event.stopPropagation(); } },
-                    React__default["default"].createElement(CModalContent, null, children)))));
+                React__default["default"].createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                    React__default["default"].createElement(CModalContent, { ref: modalContentRef }, children)))));
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { onClick: handleDismiss, onKeyDown: handleKeyDown },
-            React__default["default"].createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: true, timeout: !transition ? 0 : duration }, function (state) {
-                var transitionClass = getTransitionClass(state);
-                return typeof window !== 'undefined' && portal
-                    ? ReactDOM.createPortal(modal(forkedRef, transitionClass), document.body)
-                    : modal(forkedRef, transitionClass);
-            })),
+        React__default["default"].createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: !transition ? 0 : duration }, function (state) {
+            var transitionClass = getTransitionClass(state);
+            return typeof window !== 'undefined' && portal
+                ? ReactDOM.createPortal(modal(forkedRef, transitionClass), document.body)
+                : modal(forkedRef, transitionClass);
+        }),
         typeof window !== 'undefined' && portal
             ? backdrop && ReactDOM.createPortal(React__default["default"].createElement(CBackdrop, { visible: _visible }), document.body)
             : backdrop && React__default["default"].createElement(CBackdrop, { visible: _visible })));
@@ -6607,6 +6621,7 @@ CModal.propTypes = {
     scrollable: PropTypes$1.bool,
     size: PropTypes$1.oneOf(['sm', 'lg', 'xl']),
     transition: PropTypes$1.bool,
+    unmountOnClose: PropTypes$1.bool,
     visible: PropTypes$1.bool,
 };
 CModal.displayName = 'CModal';