next-recomponents 1.9.95 → 1.9.97

package/dist/index.js

@@ -36781,16 +36781,15 @@ function CloseIcon2() {
 }
 
 // src/modal/index.tsx
+var import_material3 = require("@mui/material");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Modal({ button, children, ref, title = "" }) {
-  const modalRef = ref || (0, import_react9.useRef)(null);
+  const [open, setOpen] = (0, import_react9.useState)(false);
   function show() {
-    var _a;
-    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.showModal());
+    setOpen(true);
   }
   function hide() {
-    var _a;
-    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
+    setOpen(false);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     import_react9.default.Children.map(button, (child) => {
@@ -36806,12 +36805,12 @@ function Modal({ button, children, ref, title = "" }) {
       }
       return child;
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material3.Dialog, { open, onClose: hide, fullWidth: true, maxWidth: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "m-auto p-5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           onClick: hide,
-          className: "absolute top-0 right-0 text-red-500 ",
+          className: "absolute top-0 right-0 text-red-500  ",
           children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, {})
         }
       ),
@@ -37802,7 +37801,7 @@ function TableFooter({
 // src/table3/dialog.tsx
 var import_react14 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function Dialog2({
+function Dialog3({
   modalRef,
   children,
   dialogRow,
@@ -37854,7 +37853,7 @@ function Dialog2({
     }
   );
 }
-var dialog_default = Dialog2;
+var dialog_default = Dialog3;
 
 // src/table3/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -36747,7 +36747,7 @@ function Select(_a) {
 }
 
 // src/modal/index.tsx
-import React6, { useRef as useRef4 } from "react";
+import React6, { useState as useState8 } from "react";
 
 // src/modal/close.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -36768,16 +36768,15 @@ function CloseIcon2() {
 }
 
 // src/modal/index.tsx
+import { Dialog as Dialog2 } from "@mui/material";
 import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function Modal({ button, children, ref, title = "" }) {
-  const modalRef = ref || useRef4(null);
+  const [open, setOpen] = useState8(false);
   function show() {
-    var _a;
-    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.showModal());
+    setOpen(true);
   }
   function hide() {
-    var _a;
-    typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
+    setOpen(false);
   }
   return /* @__PURE__ */ jsxs8(Fragment2, { children: [
     React6.Children.map(button, (child) => {
@@ -36793,12 +36792,12 @@ function Modal({ button, children, ref, title = "" }) {
       }
       return child;
     }),
-    /* @__PURE__ */ jsx12("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx12(Dialog2, { open, onClose: hide, fullWidth: true, maxWidth: "xl", children: /* @__PURE__ */ jsxs8("div", { className: "m-auto p-5", children: [
       /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: hide,
-          className: "absolute top-0 right-0 text-red-500 ",
+          className: "absolute top-0 right-0 text-red-500  ",
           children: /* @__PURE__ */ jsx12(CloseIcon2, {})
         }
       ),
@@ -36866,7 +36865,7 @@ function useDates() {
 import {
   useEffect as useEffect6,
   useRef as useRef5,
-  useState as useState8
+  useState as useState9
 } from "react";
 import DatePicker from "react-datepicker";
 
@@ -36907,11 +36906,11 @@ function MyCalendar(_a) {
     "value"
   ]);
   const modalRef = useRef5(null);
-  const [selectedDate, setSelectedDate] = useState8(null);
-  const [dateStr, setDateStr] = useState8(
+  const [selectedDate, setSelectedDate] = useState9(null);
+  const [dateStr, setDateStr] = useState9(
     defaultValue || value || ""
   );
-  const [visible, setVisible] = useState8(false);
+  const [visible, setVisible] = useState9(false);
   useEffect6(() => {
     setVisible(typeof window !== "undefined");
   }, []);
@@ -37079,11 +37078,11 @@ import React9, {
   useMemo as useMemo6,
   useReducer as useReducer2,
   useRef as useRef6,
-  useState as useState11
+  useState as useState12
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect7, useMemo as useMemo4, useState as useState9 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo4, useState as useState10 } from "react";
 
 // src/table3/filters.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -37193,13 +37192,13 @@ function Filter({
   sort,
   setSort
 }) {
-  const [visible, setVisible] = useState9(false);
-  const [text, setText] = useState9("");
+  const [visible, setVisible] = useState10(false);
+  const [text, setText] = useState10("");
   const items = useMemo4(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
-  const [selected, setSelected] = useState9(items);
+  const [selected, setSelected] = useState10(items);
   const itemsFiltered = useMemo4(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
@@ -37486,7 +37485,7 @@ function TableHead({
 }
 
 // src/table3/body.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/table3/tr.tsx
 import React7 from "react";
@@ -37623,7 +37622,7 @@ function TableBody({
   symbols,
   sort
 }) {
-  const [selected, setSelected] = useState10(-1);
+  const [selected, setSelected] = useState11(-1);
   const sorted = Object.entries(objectData).sort(([, a], [, b]) => {
     for (const [key, order] of Object.entries(
       sort || { id: "desc", _id: "desc" }
@@ -37799,7 +37798,7 @@ function TableFooter({
 // src/table3/dialog.tsx
 import React8, { useMemo as useMemo5 } from "react";
 import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
-function Dialog2({
+function Dialog3({
   modalRef,
   children,
   dialogRow,
@@ -37851,7 +37850,7 @@ function Dialog2({
     }
   );
 }
-var dialog_default = Dialog2;
+var dialog_default = Dialog3;
 
 // src/table3/index.tsx
 import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -37883,8 +37882,8 @@ function Table3(_a) {
     "symbols",
     "sortBy"
   ]);
-  const [handlers, setHandlers] = useState11({});
-  const [page, setPage] = useState11(1);
+  const [handlers, setHandlers] = useState12({});
+  const [page, setPage] = useState12(1);
   function dataReducer(a, b) {
     if (b == null) return {};
     if (Array.isArray(b)) {
@@ -37938,9 +37937,9 @@ function Table3(_a) {
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
-  const [sort, setSort] = useState11(sortBy);
+  const [sort, setSort] = useState12(sortBy);
   const modalRef = useRef6(null);
-  const [dialogRow, setDialogRow] = useState11({});
+  const [dialogRow, setDialogRow] = useState12({});
   const context = __spreadValues({
     objectData,
     headers,

package/package.json

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

package/src/modal/index.tsx

@@ -1,21 +1,21 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import CloseIcon from "./close";
+import { Dialog } from "@mui/material";
 
-interface Props
-  extends React.DetailedHTMLProps<
-    React.DialogHTMLAttributes<HTMLDialogElement>,
-    HTMLDialogElement
-  > {
+interface Props extends React.DetailedHTMLProps<
+  React.DialogHTMLAttributes<HTMLDialogElement>,
+  HTMLDialogElement
+> {
   button: React.ReactElement<{ onClick: (e: React.MouseEvent) => void }>;
   children: React.ReactElement<{ hide: () => void }>;
 }
 export default function Modal({ button, children, ref, title = "" }: Props) {
-  const modalRef = ref || useRef<HTMLDialogElement>(null);
+  const [open, setOpen] = useState(false);
   function show() {
-    typeof modalRef == "object" && modalRef.current?.showModal();
+    setOpen(true);
   }
   function hide() {
-    typeof modalRef == "object" && modalRef.current?.close();
+    setOpen(false);
   }
 
   return (
@@ -33,12 +33,12 @@ export default function Modal({ button, children, ref, title = "" }: Props) {
         }
         return child;
       })}
-      <dialog ref={modalRef} className="p-5 border shadow rounded">
-        <div className="relative">
+      <Dialog open={open} onClose={hide} fullWidth maxWidth="xl">
+        <div className="m-auto p-5">
           {/* Botón de cerrar en la esquina superior derecha */}
           <button
             onClick={hide}
-            className="absolute top-0 right-0 text-red-500 "
+            className="absolute top-0 right-0 text-red-500  "
           >
             <CloseIcon />
           </button>
@@ -53,7 +53,7 @@ export default function Modal({ button, children, ref, title = "" }: Props) {
             })}
           </div>
         </div>
-      </dialog>
+      </Dialog>
     </>
   );
 }