@coreui/react-pro 4.1.2 → 4.1.3

package/README.md

@@ -43,7 +43,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.1.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.1.3.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/modal/CModal.d.ts

@@ -52,6 +52,7 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
     transition?: boolean;
+    unmountOnClose?: boolean;
     /**
      * Toggle the visibility of modal component.
      */

package/dist/index.es.js

@@ -6490,11 +6490,12 @@ CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = createContext({});
 var CModal = 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 = useRef(null);
+    var modalContentRef = useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _g = useState(visible), _visible = _g[0], setVisible = _g[1];
-    var _h = useState(false), staticBackdrop = _h[0], setStaticBackdrop = _h[1];
+    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _j = useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -6502,6 +6503,14 @@ var CModal = forwardRef(function (_a, ref) {
         visible: _visible,
         setVisible: setVisible,
     };
+    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);
@@ -6539,6 +6548,12 @@ var CModal = 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 = useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -6547,17 +6562,16 @@ var CModal = forwardRef(function (_a, ref) {
     var modal = function (ref, transitionClass) {
         return (React__default.createElement(CModalContext.Provider, { value: contextValues },
             React__default.createElement("div", { className: classNames$1(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
-                React__default.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size, onClick: function (event) { return event.stopPropagation(); } },
-                    React__default.createElement(CModalContent, null, children)))));
+                React__default.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                    React__default.createElement(CModalContent, { ref: modalContentRef }, children)))));
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { onClick: handleDismiss, onKeyDown: handleKeyDown },
-            React__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
-                    ? createPortal(modal(forkedRef, transitionClass), document.body)
-                    : modal(forkedRef, transitionClass);
-            })),
+        React__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
+                ? createPortal(modal(forkedRef, transitionClass), document.body)
+                : modal(forkedRef, transitionClass);
+        }),
         typeof window !== 'undefined' && portal
             ? backdrop && createPortal(React__default.createElement(CBackdrop, { visible: _visible }), document.body)
             : backdrop && React__default.createElement(CBackdrop, { visible: _visible })));
@@ -6580,6 +6594,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';