next-recomponents 2.0.0 → 2.0.1

package/dist/index.js

@@ -36916,6 +36916,7 @@ function CalendarIcon() {
 }
 
 // src/calendar/index.tsx
+var import_material4 = require("@mui/material");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function MyCalendar(_a) {
   var _b = _a, {
@@ -36933,23 +36934,18 @@ function MyCalendar(_a) {
     "label",
     "value"
   ]);
-  const modalRef = (0, import_react10.useRef)(null);
   const [selectedDate, setSelectedDate] = (0, import_react10.useState)(null);
   const [dateStr, setDateStr] = (0, import_react10.useState)(
     defaultValue || value || ""
   );
-  const [visible, setVisible] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
-    setVisible(typeof window !== "undefined");
-  }, []);
+  const [open, setOpen] = (0, import_react10.useState)(false);
   function handleChange(date) {
-    var _a2, _b2;
     if (!date) return;
     setSelectedDate(date);
     const formattedDate = date.toISOString().split("T")[0];
     setDateStr(formattedDate);
     onChange == null ? void 0 : onChange({ target: { value: formattedDate } });
-    (_b2 = (_a2 = modalRef.current) == null ? void 0 : _a2.close) == null ? void 0 : _b2.call(_a2);
+    setOpen(false);
   }
   const normalizedEnabledDates = enabledDates.map((item) => {
     if (item instanceof Date) return item;
@@ -36969,11 +36965,8 @@ function MyCalendar(_a) {
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "div",
         {
-          onClick: () => {
-            var _a2, _b2;
-            return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
-          },
           className: "cursor-pointer flex items-center justify-center",
+          onClick: (e) => setOpen(true),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "input",
@@ -36994,29 +36987,25 @@ function MyCalendar(_a) {
         }
       ) })
     ] }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "dialog",
-      {
-        ref: modalRef,
-        id: "my-calendar-modal-item",
-        onClick: (e) => {
-          var _a2;
-          const el = e.target;
-          if ((el == null ? void 0 : el.id) === "my-calendar-modal-item") {
-            (_a2 = modalRef.current) == null ? void 0 : _a2.close();
-          }
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: " w-[300px] flex items-start justify-center h-[300px]  p-5", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_react_datepicker.default,
-          {
-            inline: true,
-            selected: selectedDate,
-            onChange: handleChange,
-            includeDates: normalizedEnabledDates
-          }
-        ) })
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material4.Dialog, { open, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-end p-5 font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
+        {
+          className: " border-lg w-[20px] bg-red-500 text-white shadow rounded",
+          onClick: (e) => setOpen(false),
+          children: "x"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: " w-[300px] flex items-start justify-center h-[300px]  p-5", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_react_datepicker.default,
+        {
+          inline: true,
+          selected: selectedDate,
+          onChange: handleChange,
+          includeDates: normalizedEnabledDates
+        }
+      ) })
+    ] })
   ] });
 }
 
@@ -37820,7 +37809,7 @@ function TableFooter({
 // src/table3/dialog.tsx
 var import_react14 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function Dialog3({
+function Dialog4({
   modalRef,
   children,
   dialogRow,
@@ -37872,7 +37861,7 @@ function Dialog3({
     }
   );
 }
-var dialog_default = Dialog3;
+var dialog_default = Dialog4;
 
 // src/table3/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -36882,8 +36882,6 @@ function useDates() {
 
 // src/calendar/index.tsx
 import {
-  useEffect as useEffect6,
-  useRef as useRef5,
   useState as useState9
 } from "react";
 import DatePicker from "react-datepicker";
@@ -36907,6 +36905,7 @@ function CalendarIcon() {
 }
 
 // src/calendar/index.tsx
+import { Dialog as Dialog3 } from "@mui/material";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function MyCalendar(_a) {
   var _b = _a, {
@@ -36924,23 +36923,18 @@ function MyCalendar(_a) {
     "label",
     "value"
   ]);
-  const modalRef = useRef5(null);
   const [selectedDate, setSelectedDate] = useState9(null);
   const [dateStr, setDateStr] = useState9(
     defaultValue || value || ""
   );
-  const [visible, setVisible] = useState9(false);
-  useEffect6(() => {
-    setVisible(typeof window !== "undefined");
-  }, []);
+  const [open, setOpen] = useState9(false);
   function handleChange(date) {
-    var _a2, _b2;
     if (!date) return;
     setSelectedDate(date);
     const formattedDate = date.toISOString().split("T")[0];
     setDateStr(formattedDate);
     onChange == null ? void 0 : onChange({ target: { value: formattedDate } });
-    (_b2 = (_a2 = modalRef.current) == null ? void 0 : _a2.close) == null ? void 0 : _b2.call(_a2);
+    setOpen(false);
   }
   const normalizedEnabledDates = enabledDates.map((item) => {
     if (item instanceof Date) return item;
@@ -36960,11 +36954,8 @@ function MyCalendar(_a) {
       /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs9(
         "div",
         {
-          onClick: () => {
-            var _a2, _b2;
-            return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
-          },
           className: "cursor-pointer flex items-center justify-center",
+          onClick: (e) => setOpen(true),
           children: [
             /* @__PURE__ */ jsx15(
               "input",
@@ -36985,29 +36976,25 @@ function MyCalendar(_a) {
         }
       ) })
     ] }),
-    visible && /* @__PURE__ */ jsx15(
-      "dialog",
-      {
-        ref: modalRef,
-        id: "my-calendar-modal-item",
-        onClick: (e) => {
-          var _a2;
-          const el = e.target;
-          if ((el == null ? void 0 : el.id) === "my-calendar-modal-item") {
-            (_a2 = modalRef.current) == null ? void 0 : _a2.close();
-          }
-        },
-        children: /* @__PURE__ */ jsx15("div", { className: " w-[300px] flex items-start justify-center h-[300px]  p-5", children: /* @__PURE__ */ jsx15(
-          DatePicker,
-          {
-            inline: true,
-            selected: selectedDate,
-            onChange: handleChange,
-            includeDates: normalizedEnabledDates
-          }
-        ) })
-      }
-    )
+    /* @__PURE__ */ jsxs9(Dialog3, { open, children: [
+      /* @__PURE__ */ jsx15("div", { className: "flex justify-end p-5 font-bold", children: /* @__PURE__ */ jsx15(
+        "button",
+        {
+          className: " border-lg w-[20px] bg-red-500 text-white shadow rounded",
+          onClick: (e) => setOpen(false),
+          children: "x"
+        }
+      ) }),
+      /* @__PURE__ */ jsx15("div", { className: " w-[300px] flex items-start justify-center h-[300px]  p-5", children: /* @__PURE__ */ jsx15(
+        DatePicker,
+        {
+          inline: true,
+          selected: selectedDate,
+          onChange: handleChange,
+          includeDates: normalizedEnabledDates
+        }
+      ) })
+    ] })
   ] });
 }
 
@@ -37817,7 +37804,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 Dialog3({
+function Dialog4({
   modalRef,
   children,
   dialogRow,
@@ -37869,7 +37856,7 @@ function Dialog3({
     }
   );
 }
-var dialog_default = Dialog3;
+var dialog_default = Dialog4;
 
 // src/table3/index.tsx
 import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";

package/package.json

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

package/src/calendar/index.tsx

@@ -9,6 +9,7 @@ import {
 import DatePicker from "react-datepicker";
 import "./react-datepicker.css";
 import CalendarIcon from "./calendar.icon";
+import { Dialog } from "@mui/material";
 
 interface CalendarProps extends DetailedHTMLProps<
   InputHTMLAttributes<HTMLInputElement>,
@@ -29,16 +30,15 @@ export default function MyCalendar({
   value,
   ...otherProps
 }: CalendarProps) {
-  const modalRef = useRef<HTMLDialogElement>(null);
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [dateStr, setDateStr] = useState<string | number | readonly string[]>(
     defaultValue || value || "",
   );
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    setVisible(typeof window !== "undefined");
-  }, []);
+  // useEffect(() => {
+  //   setVisible(typeof window !== "undefined");
+  // }, []);
 
   function handleChange(date: Date | null) {
     if (!date) return;
@@ -46,7 +46,7 @@ export default function MyCalendar({
     const formattedDate = date.toISOString().split("T")[0];
     setDateStr(formattedDate);
     onChange?.({ target: { value: formattedDate } });
-    modalRef.current?.close?.();
+    setOpen(false);
   }
 
   // 🔧 Convertir strings a fechas sin zona horaria
@@ -69,8 +69,8 @@ export default function MyCalendar({
         </div>
         <div>
           <div
-            onClick={() => modalRef?.current?.showModal?.()}
             className="cursor-pointer flex items-center justify-center"
+            onClick={(e) => setOpen(true)}
           >
             <input
               {...otherProps}
@@ -91,27 +91,24 @@ export default function MyCalendar({
         </div>
       </label>
 
-      {visible && (
-        <dialog
-          ref={modalRef}
-          id="my-calendar-modal-item"
-          onClick={(e) => {
-            const el = e.target as HTMLElement;
-            if (el?.id === "my-calendar-modal-item") {
-              modalRef.current?.close();
-            }
-          }}
-        >
-          <div className=" w-[300px] flex items-start justify-center h-[300px]  p-5">
-            <DatePicker
-              inline
-              selected={selectedDate}
-              onChange={handleChange}
-              includeDates={normalizedEnabledDates}
-            />
-          </div>
-        </dialog>
-      )}
+      <Dialog open={open}>
+        <div className="flex justify-end p-5 font-bold">
+          <button
+            className=" border-lg w-[20px] bg-red-500 text-white shadow rounded"
+            onClick={(e) => setOpen(false)}
+          >
+            x
+          </button>
+        </div>
+        <div className=" w-[300px] flex items-start justify-center h-[300px]  p-5">
+          <DatePicker
+            inline
+            selected={selectedDate}
+            onChange={handleChange}
+            includeDates={normalizedEnabledDates}
+          />
+        </div>
+      </Dialog>
     </div>
   );
 }