next-recomponents 1.2.1 → 1.2.3

package/dist/index.d.mts

@@ -125,7 +125,12 @@ 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, ref }: Props): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -125,7 +125,12 @@ 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, ref }: Props): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -11238,7 +11238,10 @@ function FilterMenu({
   const [newMapedData, setNewMapedData] = (0, import_react24.useState)([]);
   (0, import_react24.useEffect)(() => {
     setNewMapedData(
-      [...new Set(mapedData.map((md) => md[h].content))].filter(
+      [...new Set(mapedData.map((md) => {
+        var _a;
+        return (_a = md[h]) == null ? void 0 : _a.content;
+      }))].filter(
         (item) => {
           return item && `${item}`.toLowerCase().includes(text.toLowerCase());
         }
@@ -11403,7 +11406,8 @@ function HTable(_a) {
   const mapedTotals = (0, import_react25.useMemo)(() => {
     return mapedData.reduce((acc, md) => {
       head.forEach((h) => {
-        const value = isNaN(+md[h].content) ? 0 : +md[h].content;
+        var _a2, _b2;
+        const value = isNaN(+((_a2 = md[h]) == null ? void 0 : _a2.content)) ? 0 : +((_b2 = md[h]) == null ? void 0 : _b2.content);
         if (acc[h]) {
           acc[h] += value;
         } else {
@@ -11417,7 +11421,10 @@ function HTable(_a) {
     setFilters(__spreadValues({}, head.reduce((acc, hh) => {
       const newAcc = __spreadValues({}, acc);
       newAcc[hh] = [
-        ...new Set(mapedData.map((md) => md[hh].content))
+        ...new Set(mapedData.map((md) => {
+          var _a2;
+          return (_a2 = md[hh]) == null ? void 0 : _a2.content;
+        }))
       ];
       return newAcc;
     }, {})));
@@ -11447,7 +11454,12 @@ function HTable(_a) {
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "bg-gray-800 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: head.map((h, key) => {
       var _a2;
       const items = [
-        ...new Set(mapedData.map((item) => item[h].content))
+        ...new Set(
+          mapedData.map((item) => {
+            var _a3;
+            return (_a3 = item[h]) == null ? void 0 : _a3.content;
+          })
+        )
       ];
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "th",
@@ -11487,8 +11499,9 @@ function HTable(_a) {
       );
     }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "divide-y divide-gray-200", children: mapedData.filter((md) => {
+      var _a2;
       for (let datum of Object.keys(md)) {
-        if (!filters[datum].map((d) => `${d}`.toLowerCase()).includes(`${md[datum].content}`.toLowerCase())) {
+        if (!filters[datum].map((d) => `${d}`.toLowerCase()).includes(`${(_a2 = md[datum]) == null ? void 0 : _a2.content}`.toLowerCase())) {
           return false;
         }
       }
@@ -32690,7 +32703,7 @@ function Select(_a) {
 }
 
 // src/modal/index.tsx
-var import_react31 = require("react");
+var import_react31 = __toESM(require("react"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function Modal({ button, children, ref }) {
   const modalRef = ref || (0, import_react31.useRef)(null);
@@ -32703,17 +32716,33 @@ function Modal({ button, children, ref }) {
     typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
   }
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    button,
+    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 })
+      /* @__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

@@ -11229,7 +11229,10 @@ function FilterMenu({
   const [newMapedData, setNewMapedData] = useState5([]);
   useEffect6(() => {
     setNewMapedData(
-      [...new Set(mapedData.map((md) => md[h].content))].filter(
+      [...new Set(mapedData.map((md) => {
+        var _a;
+        return (_a = md[h]) == null ? void 0 : _a.content;
+      }))].filter(
         (item) => {
           return item && `${item}`.toLowerCase().includes(text.toLowerCase());
         }
@@ -11394,7 +11397,8 @@ function HTable(_a) {
   const mapedTotals = useMemo7(() => {
     return mapedData.reduce((acc, md) => {
       head.forEach((h) => {
-        const value = isNaN(+md[h].content) ? 0 : +md[h].content;
+        var _a2, _b2;
+        const value = isNaN(+((_a2 = md[h]) == null ? void 0 : _a2.content)) ? 0 : +((_b2 = md[h]) == null ? void 0 : _b2.content);
         if (acc[h]) {
           acc[h] += value;
         } else {
@@ -11408,7 +11412,10 @@ function HTable(_a) {
     setFilters(__spreadValues({}, head.reduce((acc, hh) => {
       const newAcc = __spreadValues({}, acc);
       newAcc[hh] = [
-        ...new Set(mapedData.map((md) => md[hh].content))
+        ...new Set(mapedData.map((md) => {
+          var _a2;
+          return (_a2 = md[hh]) == null ? void 0 : _a2.content;
+        }))
       ];
       return newAcc;
     }, {})));
@@ -11438,7 +11445,12 @@ function HTable(_a) {
     /* @__PURE__ */ jsx11("thead", { className: "bg-gray-800 text-white", children: /* @__PURE__ */ jsx11("tr", { children: head.map((h, key) => {
       var _a2;
       const items = [
-        ...new Set(mapedData.map((item) => item[h].content))
+        ...new Set(
+          mapedData.map((item) => {
+            var _a3;
+            return (_a3 = item[h]) == null ? void 0 : _a3.content;
+          })
+        )
       ];
       return /* @__PURE__ */ jsxs8(
         "th",
@@ -11478,8 +11490,9 @@ function HTable(_a) {
       );
     }) }) }),
     /* @__PURE__ */ jsx11("tbody", { className: "divide-y divide-gray-200", children: mapedData.filter((md) => {
+      var _a2;
       for (let datum of Object.keys(md)) {
-        if (!filters[datum].map((d) => `${d}`.toLowerCase()).includes(`${md[datum].content}`.toLowerCase())) {
+        if (!filters[datum].map((d) => `${d}`.toLowerCase()).includes(`${(_a2 = md[datum]) == null ? void 0 : _a2.content}`.toLowerCase())) {
           return false;
         }
       }
@@ -32687,7 +32700,7 @@ function Select(_a) {
 }
 
 // src/modal/index.tsx
-import { 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, ref }) {
   const modalRef = ref || useRef6(null);
@@ -32700,17 +32713,33 @@ function Modal({ button, children, ref }) {
     typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
   }
   return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-    button,
+    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 })
+      /* @__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.1",
+  "version": "1.2.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/modal/index.tsx

@@ -1,11 +1,12 @@
-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, ref }: Props) {
   const modalRef = ref || useRef<HTMLDialogElement>(null);
@@ -18,7 +19,17 @@ export default function Modal({ button, children, ref }: Props) {
 
   return (
     <>
-      {button}
+      {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 */}
@@ -26,9 +37,16 @@ export default function Modal({ button, children, ref }: Props) {
             onClick={hide}
             className="absolute top-0 right-0 text-red-500 "
           >
-            <CloseIcon />
+            X
           </button>
-          <div className="flex flex-col gap-3 pt-6">{children}</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>
     </>

package/src/table/filter.menu.tsx

@@ -27,7 +27,7 @@ export default function FilterMenu({
 
   useEffect(() => {
     setNewMapedData(
-      [...new Set<string>(mapedData.map((md: any) => md[h].content))].filter(
+      [...new Set<string>(mapedData.map((md: any) => md[h]?.content))].filter(
         (item) => {
           return item && `${item}`.toLowerCase().includes(text.toLowerCase());
         }

package/src/table/h.tsx

@@ -24,7 +24,7 @@ export default function HTable({
   const mapedTotals = useMemo(() => {
     return mapedData.reduce((acc: any, md: any) => {
       head.forEach((h) => {
-        const value = isNaN(+md[h].content) ? 0 : +md[h].content;
+        const value = isNaN(+md[h]?.content) ? 0 : +md[h]?.content;
         if (acc[h]) {
           acc[h] += value;
         } else {
@@ -40,7 +40,7 @@ export default function HTable({
       ...head.reduce((acc, hh) => {
         const newAcc: any = { ...acc };
         newAcc[hh] = [
-          ...new Set<string>(mapedData.map((md: any) => md[hh].content)),
+          ...new Set<string>(mapedData.map((md: any) => md[hh]?.content)),
         ];
         return newAcc;
       }, {}),
@@ -80,7 +80,9 @@ export default function HTable({
         <tr>
           {head.map((h, key) => {
             const items = [
-              ...new Set<string>(mapedData.map((item: any) => item[h].content)),
+              ...new Set<string>(
+                mapedData.map((item: any) => item[h]?.content)
+              ),
             ];
             return (
               <th
@@ -125,7 +127,7 @@ export default function HTable({
               if (
                 !filters[datum]
                   .map((d: any) => `${d}`.toLowerCase())
-                  .includes(`${md[datum].content}`.toLowerCase())
+                  .includes(`${md[datum]?.content}`.toLowerCase())
               ) {
                 return false;
               }