@ballistix.digital/react-components 0.3.2 → 0.3.4

package/dist/index.js

@@ -327,7 +327,7 @@ var styles$i = {
 };
 
 var ButtonElement = function (props) {
-    var children = props.children, innerRef = props.innerRef, _a = props.type, type = _a === void 0 ? 'primary' : _a, _b = props.size, size = _b === void 0 ? 'md' : _b, _c = props.figure, figure = _c === void 0 ? 'block' : _c, _d = props.status, status = _d === void 0 ? 'idle' : _d, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
+    var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$h.base);
         var keys = calculateNestedKeys(styles$h.base);
@@ -337,7 +337,7 @@ var ButtonElement = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxRuntime.jsxs("button", __assign({ type: "button", className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ArrowPathIcon, { className: styles.spinner }), jsxRuntime.jsx("p", { children: children })] }))), status === 'error' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: styles.icon }), jsxRuntime.jsx("p", { children: children })] }))), status === 'success' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.CheckIcon, { className: styles.icon }), jsxRuntime.jsx("p", { children: children })] })))] })));
+    return (jsxRuntime.jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ArrowPathIcon, { className: styles.spinner }), jsxRuntime.jsx("p", { children: children })] }))), status === 'error' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: styles.icon }), jsxRuntime.jsx("p", { children: children })] }))), status === 'success' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.CheckIcon, { className: styles.icon }), jsxRuntime.jsx("p", { children: children })] })))] })));
 };
 
 var base$g = {
@@ -17525,11 +17525,11 @@ var styles$3 = {
 };
 
 var ModalOverlay = function (props) {
-    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles;
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, onOpen = props.onOpen, onClose = props.onClose;
     var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
     var options = React.useMemo(function () { return ({
-        onOpen: function () { return setIsOpen(true); },
-        onClose: function () { return setIsOpen(false); },
+        handleOpen: function () { return setIsOpen(true); },
+        handleClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$2.base);
@@ -17540,6 +17540,16 @@ var ModalOverlay = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    React.useEffect(function () {
+        if (isOpen) {
+            onOpen && onOpen();
+        }
+    }, [isOpen, onOpen]);
+    React.useEffect(function () {
+        if (!isOpen) {
+            onClose && onClose();
+        }
+    }, [isOpen, onClose]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ 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", __assign({ className: styles.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.content }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ 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, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };