@ballistix.digital/react-components 2.1.1 → 2.2.0

package/dist/index.esm.js

@@ -2358,10 +2358,15 @@ var styles$c = {
 var ModalOverlay = function (props) {
     var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose;
     var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var handleClose = useCallback(function () {
+        setIsOpen(false);
+        if (onClose)
+            setTimeout(onClose, 180);
+    }, [onClose]);
     var options = useMemo(function () { return ({
         handleOpen: function () { return setIsOpen(true); },
-        handleClose: function () { return setIsOpen(false); },
-    }); }, []);
+        handleClose: handleClose,
+    }); }, [handleClose]);
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$b.base);
         var keys = calculateNestedKeys(styles$b.base);
@@ -2376,12 +2381,7 @@ var ModalOverlay = function (props) {
             onOpen && onOpen();
         }
     }, [isOpen, onOpen]);
-    useEffect(function () {
-        if (!isOpen) {
-            onClose && onClose();
-        }
-    }, [isOpen, onClose]);
-    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: handleClose, children: [jsx(Transition.Child, { as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
 var base$8 = {

package/dist/index.js

@@ -2360,10 +2360,15 @@ var styles$c = {
 var ModalOverlay = function (props) {
     var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose;
     var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var handleClose = React.useCallback(function () {
+        setIsOpen(false);
+        if (onClose)
+            setTimeout(onClose, 180);
+    }, [onClose]);
     var options = React.useMemo(function () { return ({
         handleOpen: function () { return setIsOpen(true); },
-        handleClose: function () { return setIsOpen(false); },
-    }); }, []);
+        handleClose: handleClose,
+    }); }, [handleClose]);
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$b.base);
         var keys = calculateNestedKeys(styles$b.base);
@@ -2378,12 +2383,7 @@ var ModalOverlay = function (props) {
             onOpen && onOpen();
         }
     }, [isOpen, onOpen]);
-    React.useEffect(function () {
-        if (!isOpen) {
-            onClose && onClose();
-        }
-    }, [isOpen, onClose]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: handleClose, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
 var base$8 = {