@ballistix.digital/react-components 0.3.2 → 0.3.4

package/dist/index.d.ts

@@ -62,6 +62,7 @@ type TButtonElementStyles = DeepPartial$1<typeof base$g>;
 type TProps$f = {
     children: string | ReactNode;
     innerRef?: RefObject<HTMLButtonElement>;
+    htmlType?: 'button' | 'submit';
     type?: 'primary' | 'secondary' | 'outline';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     figure?: 'block' | 'rounded';
@@ -218,13 +219,15 @@ type TContainerProps$2 = {
     type?: 'normal' | 'sticky';
     styles?: TPanelLayoutStyles;
 };
-type THeadProps = {
+type TSectionProps = {
     children: ReactNode;
-    styles?: TPanelLayoutStyles;
+    styles?: {
+        section: string;
+    };
 };
 declare const LayoutPanel: {
     Container: React.FC<TContainerProps$2>;
-    Section: React.FC<THeadProps>;
+    Section: React.FC<TSectionProps>;
 };
 
 declare const base$7: {
@@ -534,16 +537,18 @@ declare const base$2: {
 type TModalOverlayStyles = DeepPartial$1<typeof base$2>;
 
 type TProps$2 = {
-    trigger?: ({ onOpen, onClose, }: {
-        onOpen: () => void;
-        onClose: () => void;
+    trigger?: ({ handleOpen, handleClose, }: {
+        handleOpen: () => void;
+        handleClose: () => void;
     }) => ReactNode;
-    children: ({ onOpen, onClose, }: {
-        onOpen: () => void;
-        onClose: () => void;
+    children: ({ handleOpen, handleClose, }: {
+        handleOpen: () => void;
+        handleClose: () => void;
     }) => ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     styles?: TModalOverlayStyles;
+    onOpen?: () => void;
+    onClose?: () => void;
 };
 declare const ModalOverlay: FC<TProps$2>;
 

package/dist/index.esm.js

@@ -317,7 +317,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);
@@ -327,7 +327,7 @@ var ButtonElement = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs("button", __assign({ type: "button", className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ArrowPathIcon, { className: styles.spinner }), jsx("p", { children: children })] }))), status === 'error' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ExclamationCircleIcon, { className: styles.icon }), jsx("p", { children: children })] }))), status === 'success' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(CheckIcon, { className: styles.icon }), jsx("p", { children: children })] })))] })));
+    return (jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ArrowPathIcon, { className: styles.spinner }), jsx("p", { children: children })] }))), status === 'error' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ExclamationCircleIcon, { className: styles.icon }), jsx("p", { children: children })] }))), status === 'success' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(CheckIcon, { className: styles.icon }), jsx("p", { children: children })] })))] })));
 };
 
 var base$g = {
@@ -17515,11 +17515,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 = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
     var options = 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);
@@ -17530,6 +17530,16 @@ var ModalOverlay = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    useEffect(function () {
+        if (isOpen) {
+            onOpen && onOpen();
+        }
+    }, [isOpen, onOpen]);
+    useEffect(function () {
+        if (!isOpen) {
+            onClose && onClose();
+        }
+    }, [isOpen, onClose]);
     return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ 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", __assign({ className: styles.layout.container }, { children: jsx("div", __assign({ className: styles.layout.content }, { children: jsx(Transition.Child, __assign({ 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, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };