@dilicorp/ui 1.3.1 → 1.3.3

package/dist/components/layout/footer/footer-pluxee.js

@@ -45,7 +45,7 @@ const linksByCountry = {
         {
             label: 'Cookies',
             href: 'https://www.pluxee.co/cookies/'
-        },
+        }
         // {
         //   label: 'Seguridad Información',
         //   href: 'https://www.sodexo.co/politica-uso-datos/'

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,15 @@
+import React from 'react';
+export function useMergedRefs(...refs) {
+    return React.useCallback((value) => {
+        refs.forEach(ref => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else {
+                ref.current = value;
+            }
+        });
+    }, [refs]);
+}

package/dist/molecules/alert.js

@@ -1,22 +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, onClose } = props;
     const [display, setDisplay] = useState(false);
-    const open = () => setDisplay(true);
-    const close = () => {
+    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

@@ -2,10 +2,12 @@ import React, { forwardRef } 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 mergedRef = useMergedRefs(ref, innerRef);
     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, onClose: closeFn },
+    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.1",
+  "version": "1.3.3",
   "description": "A simple UI design for Dilicorp",
   "repository": {
     "type": "git",