next-recomponents 1.2.0 → 1.2.2

package/dist/index.d.mts

@@ -125,8 +125,13 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
 interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
-    button: React$1.ReactElement;
+    button: React$1.ReactElement<{
+        onClick: (e: React$1.MouseEvent) => void;
+    }>;
+    children: React$1.ReactElement<{
+        hide: () => void;
+    }>;
 }
-declare function Modal({ button, children }: Props): react_jsx_runtime.JSX.Element;
+declare function Modal({ button, children, ref }: Props): react_jsx_runtime.JSX.Element;
 
 export { Alert, Button, Container, Form, Input, Modal, Select, Table, TextArea, regularExpresions, useResources };

package/dist/index.d.ts

@@ -125,8 +125,13 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
 interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
-    button: React$1.ReactElement;
+    button: React$1.ReactElement<{
+        onClick: (e: React$1.MouseEvent) => void;
+    }>;
+    children: React$1.ReactElement<{
+        hide: () => void;
+    }>;
 }
-declare function Modal({ button, children }: Props): react_jsx_runtime.JSX.Element;
+declare function Modal({ button, children, ref }: Props): react_jsx_runtime.JSX.Element;
 
 export { Alert, Button, Container, Form, Input, Modal, Select, Table, TextArea, regularExpresions, useResources };

package/dist/index.js

@@ -32692,40 +32692,44 @@ function Select(_a) {
 // src/modal/index.tsx
 var import_react31 = __toESM(require("react"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function Modal({ button, children }) {
-  const modalRef = (0, import_react31.useRef)(null);
+function Modal({ button, children, ref }) {
+  const modalRef = ref || (0, import_react31.useRef)(null);
   function show() {
     var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.showModal();
+    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.showModal());
   }
   function hide() {
     var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.close();
+    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
   }
-  const newChildren = (0, import_react31.useMemo)(() => {
-    return children && import_react31.default.cloneElement(children, { hide });
-  }, [children]);
-  const newButton = (0, import_react31.useMemo)(() => {
-    return button && import_react31.default.cloneElement(button, {
-      onClick: (e) => {
-        var _a, _b;
-        show();
-        (_b = (_a = button.props).onClick) == null ? void 0 : _b.call(_a, e);
-      }
-    });
-  }, [button]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    newButton,
+    import_react31.default.Children.map(button, (child) => {
+      if (import_react31.default.isValidElement(child)) {
+        return import_react31.default.cloneElement(child, {
+          onClick: (e) => {
+            var _a, _b;
+            show();
+            (_b = (_a = child.props) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
+          }
+        });
+      }
+      return child;
+    }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           onClick: hide,
           className: "absolute top-0 right-0 text-red-500 ",
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CloseIcon, {})
+          children: "X"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-3 pt-6", children: newChildren })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-3 pt-6", children: import_react31.default.Children.map(children, (child) => {
+        if (import_react31.default.isValidElement(child)) {
+          return import_react31.default.cloneElement(child, { hide });
+        }
+        return child;
+      }) })
     ] }) })
   ] });
 }

package/dist/index.mjs

@@ -32687,42 +32687,46 @@ function Select(_a) {
 }
 
 // src/modal/index.tsx
-import React6, { useMemo as useMemo10, useRef as useRef6 } from "react";
+import React6, { useRef as useRef6 } from "react";
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-function Modal({ button, children }) {
-  const modalRef = useRef6(null);
+function Modal({ button, children, ref }) {
+  const modalRef = ref || useRef6(null);
   function show() {
     var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.showModal();
+    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.showModal());
   }
   function hide() {
     var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.close();
+    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
   }
-  const newChildren = useMemo10(() => {
-    return children && React6.cloneElement(children, { hide });
-  }, [children]);
-  const newButton = useMemo10(() => {
-    return button && React6.cloneElement(button, {
-      onClick: (e) => {
-        var _a, _b;
-        show();
-        (_b = (_a = button.props).onClick) == null ? void 0 : _b.call(_a, e);
-      }
-    });
-  }, [button]);
   return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-    newButton,
+    React6.Children.map(button, (child) => {
+      if (React6.isValidElement(child)) {
+        return React6.cloneElement(child, {
+          onClick: (e) => {
+            var _a, _b;
+            show();
+            (_b = (_a = child.props) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
+          }
+        });
+      }
+      return child;
+    }),
     /* @__PURE__ */ jsx17("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
       /* @__PURE__ */ jsx17(
         "button",
         {
           onClick: hide,
           className: "absolute top-0 right-0 text-red-500 ",
-          children: /* @__PURE__ */ jsx17(CloseIcon, {})
+          children: "X"
         }
       ),
-      /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-3 pt-6", children: newChildren })
+      /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-3 pt-6", children: React6.Children.map(children, (child) => {
+        if (React6.isValidElement(child)) {
+          return React6.cloneElement(child, { hide });
+        }
+        return child;
+      }) })
     ] }) })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/modal/index.tsx

@@ -1,40 +1,35 @@
-import React, { useMemo, useRef } from "react";
-import CloseIcon from "../select/close";
+import React, { useRef } from "react";
+
 interface Props
   extends React.DetailedHTMLProps<
     React.DialogHTMLAttributes<HTMLDialogElement>,
     HTMLDialogElement
   > {
-  button: React.ReactElement;
+  button: React.ReactElement<{ onClick: (e: React.MouseEvent) => void }>;
+  children: React.ReactElement<{ hide: () => void }>;
 }
-export default function Modal({ button, children }: Props) {
-  const modalRef = useRef<HTMLDialogElement>(null);
+export default function Modal({ button, children, ref }: Props) {
+  const modalRef = ref || useRef<HTMLDialogElement>(null);
   function show() {
-    modalRef.current?.showModal();
+    typeof modalRef == "object" && modalRef.current?.showModal();
   }
   function hide() {
-    modalRef.current?.close();
+    typeof modalRef == "object" && modalRef.current?.close();
   }
-  const newChildren = useMemo(() => {
-    return (
-      children && React.cloneElement(children as React.ReactElement, { hide })
-    );
-  }, [children]);
-  const newButton = useMemo(() => {
-    return (
-      button &&
-      React.cloneElement(button, {
-        onClick: (e: any) => {
-          show();
-          button.props.onClick?.(e);
-        },
-      })
-    );
-  }, [button]);
 
   return (
     <>
-      {newButton}
+      {React.Children.map(button, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            onClick: (e) => {
+              show();
+              child.props?.onClick?.(e);
+            },
+          });
+        }
+        return child;
+      })}
       <dialog ref={modalRef} className="p-5 border shadow rounded">
         <div className="relative">
           {/* Botón de cerrar en la esquina superior derecha */}
@@ -42,9 +37,16 @@ export default function Modal({ button, children }: Props) {
             onClick={hide}
             className="absolute top-0 right-0 text-red-500 "
           >
-            <CloseIcon />
+            X
           </button>
-          <div className="flex flex-col gap-3 pt-6">{newChildren}</div>
+          <div className="flex flex-col gap-3 pt-6">
+            {React.Children.map(children, (child) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, { hide });
+              }
+              return child;
+            })}
+          </div>
         </div>
       </dialog>
     </>