@dilicorp/ui 1.3.2 → 1.3.4

package/dist/hooks/use-merge-ref.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function useMergedRefs<T>(...refs: Array<React.ForwardedRef<T> | undefined>): (value: T | null) => void;
+//# sourceMappingURL=use-merge-ref.d.ts.map

package/dist/hooks/use-merge-ref.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export function useMergedRefs(...refs) {
+    const syncedRefs = React.useRef(refs);
+    syncedRefs.current = refs;
+    return React.useCallback((value) => {
+        syncedRefs.current.forEach(ref => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else {
+                ref.current = value;
+            }
+        });
+    }, []);
+}

package/dist/molecules/alert.d.ts

@@ -7,10 +7,12 @@ export declare type AlertProps = {
     color?: 'default' | 'success' | 'info' | 'warning' | 'error';
     showButton?: boolean;
     buttonText?: string;
+    onClose?: () => void;
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const Alert: React.ForwardRefExoticComponent<{
     color?: "success" | "info" | "warning" | "default" | "error" | undefined;
     showButton?: boolean | undefined;
     buttonText?: string | undefined;
+    onClose?: (() => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<AlertRef>>;
 //# sourceMappingURL=alert.d.ts.map

package/dist/molecules/alert.js

@@ -1,19 +1,24 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { Button } from '../atoms/button';
 export const Alert = forwardRef((props, ref) => {
-    const { children, className, showButton, buttonText = 'Ok', color } = props;
+    const { children, className, showButton, buttonText = 'Ok', color, onClose } = props;
     const [display, setDisplay] = useState(false);
-    const open = () => setDisplay(true);
-    const close = () => setDisplay(false);
+    const open = useCallback(() => {
+        setDisplay(true);
+    }, []);
+    const close = useCallback(() => {
+        setDisplay(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
     useImperativeHandle(ref, () => ({
-        open: () => open(),
-        close: () => close()
-    }));
+        open,
+        close
+    }), [open, close]);
     const classes = classNames(className, 'alert-content', color);
     if (!display)
-        return React.createElement(React.Fragment, null);
+        return null;
     return ReactDOM.createPortal(React.createElement(React.Fragment, null,
         React.createElement("div", { className: "alert-overlay", onClick: close }),
         React.createElement("div", { className: classes },

package/dist/molecules/modal/modal.js

@@ -1,11 +1,14 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Button } from '../../atoms/button';
 import { Alert } from '../../molecules/alert';
 import classNames from 'classnames';
+import { useMergedRefs } from '../../hooks/use-merge-ref';
 export const Modal = forwardRef((props, ref) => {
     const { children, title, closeFn, className, innerRef } = props;
+    const refsArray = useMemo(() => [ref, innerRef], [ref, innerRef]);
+    const mergedRef = useMergedRefs(...refsArray);
     const classes = classNames(className !== null && className !== void 0 ? className : 'alert-small');
-    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes },
+    return (React.createElement(Alert, { ref: mergedRef, className: classes, onClose: closeFn },
         React.createElement("div", { className: "modal modal-sm" },
             React.createElement("div", { className: "modal-header" },
                 React.createElement("div", { className: "title" }, title),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilicorp/ui",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "A simple UI design for Dilicorp",
   "repository": {
     "type": "git",