@lets-events/react 12.11.2 → 12.11.3

package/dist/index.mjs

@@ -7819,6 +7819,27 @@ var CalendarStyled = styled("div", {
     }
   }
 });
+var calendarMobileCentered = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  right: "auto",
+  bottom: "auto",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "calc(100vw - 32px)",
+  maxHeight: "90vh",
+  overflowY: "auto"
+};
+var CalendarOverlayStyled = styled("div", {
+  display: "none",
+  "@media (max-width: 748px)": {
+    display: "block",
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999998
+  }
+});
 var CalendarButtonStyled = styled("button", {
   backgroundColor: "transparent",
   border: "none",
@@ -7852,23 +7873,28 @@ var CalendarContentStyled = styled("div", {
   position: "absolute",
   backgroundColor: "$neutral50",
   zIndex: "999999",
+  "@media (max-width: 748px)": calendarMobileCentered,
   variants: {
     position: {
       top: {
         bottom: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       bottom: {
         top: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "top-right": {
         bottom: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "bottom-right": {
         top: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       }
     }
   }
@@ -8346,60 +8372,63 @@ function Calendar(_a) {
       console.warn("Data inv\xE1lida inserida no input:", masked);
     }
   };
-  return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs7(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx15(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => !prev),
-        children: /* @__PURE__ */ jsx15(
-          TextField,
-          {
-            placeholder: "00/00/0000",
-            type: "text",
-            value: inputValue,
-            onChange: handleInputChange,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        )
-      }
-    ),
-    showContainer && /* @__PURE__ */ jsxs7(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx15(
-        DayPicker,
-        {
-          mode: "single",
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          startMonth: allowPastDates ? void 0 : today,
-          endMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ jsx15(
-        Button,
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    showContainer && /* @__PURE__ */ jsx15(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ jsxs7(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ jsx15(
+        CalendarButtonStyled,
         {
-          variant: "text",
-          color: "brand",
+          expand,
           type: "button",
-          onClick: () => {
-            setShowCalendar(false);
-          },
-          size: "medium",
-          fontWeight: "medium",
-          children: actionText != null ? actionText : "Aplicar"
+          onClick: () => setShowCalendar((prev) => !prev),
+          children: /* @__PURE__ */ jsx15(
+            TextField,
+            {
+              placeholder: "00/00/0000",
+              type: "text",
+              value: inputValue,
+              onChange: handleInputChange,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          )
         }
-      ) })
-    ] })
-  ] })) });
+      ),
+      showContainer && /* @__PURE__ */ jsxs7(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx15(
+          DayPicker,
+          {
+            mode: "single",
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            startMonth: allowPastDates ? void 0 : today,
+            endMonth: resolvedMaxDate
+          }
+        ) }) }),
+        action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ jsx15(
+          Button,
+          {
+            variant: "text",
+            color: "brand",
+            type: "button",
+            onClick: () => {
+              setShowCalendar(false);
+            },
+            size: "medium",
+            fontWeight: "medium",
+            children: actionText != null ? actionText : "Aplicar"
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/DoubleCalendar/index.tsx
@@ -8465,89 +8494,71 @@ function DoubleCalendar(_a) {
       setEndValue("");
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsxs8(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx16(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => {
-          const next = !prev;
-          if (!prev) initialSelectedRef.current = selected;
-          return next;
-        }),
-        disabled,
-        children: /* @__PURE__ */ jsx16("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ jsx16(
-          TextField,
-          {
-            placeholder: "00/00/0000 - 00/00/0000",
-            type: "text",
-            value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
-            readOnly: true,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ jsx16(TextFieldSlot, { children: /* @__PURE__ */ jsx16(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        ) })
-      }
-    ),
-    showContainer && /* @__PURE__ */ jsxs8(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ jsx16(
-        DayPicker2,
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    showContainer && /* @__PURE__ */ jsx16(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ jsxs8(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ jsx16(
+        CalendarButtonStyled,
         {
-          mode: "range",
-          numberOfMonths: 2,
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          fromMonth: allowPastDates ? void 0 : today,
-          toMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ jsxs8(CalendarFooterStyled, { children: [
-        /* @__PURE__ */ jsx16("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx16("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
-        /* @__PURE__ */ jsx16(
-          Button,
+          expand,
+          type: "button",
+          onClick: () => setShowCalendar((prev) => {
+            const next = !prev;
+            if (!prev) initialSelectedRef.current = selected;
+            return next;
+          }),
+          disabled,
+          children: /* @__PURE__ */ jsx16("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ jsx16(
+            TextField,
+            {
+              placeholder: "00/00/0000 - 00/00/0000",
+              type: "text",
+              value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
+              readOnly: true,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ jsx16(TextFieldSlot, { children: /* @__PURE__ */ jsx16(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          ) })
+        }
+      ),
+      showContainer && /* @__PURE__ */ jsxs8(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ jsx16(
+          DayPicker2,
           {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "neutral",
-            type: "button",
-            onClick: () => {
-              setSelected(initialSelectedRef.current);
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "regular",
-            children: "Cancelar"
+            mode: "range",
+            numberOfMonths: 2,
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            fromMonth: allowPastDates ? void 0 : today,
+            toMonth: resolvedMaxDate
           }
-        ),
-        /* @__PURE__ */ jsx16(
-          Button,
-          {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "brand",
-            type: "button",
-            onClick: () => {
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "medium",
-            children: actionText != null ? actionText : "Aplicar"
-          }
-        )
-      ] }),
-      simpleAction && /* @__PURE__ */ jsx16(CalendarFooterStyled, { children: /* @__PURE__ */ jsx16(
-        "div",
-        {
-          style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
-          children: /* @__PURE__ */ jsx16(
+        ) }) }),
+        action && /* @__PURE__ */ jsxs8(CalendarFooterStyled, { children: [
+          /* @__PURE__ */ jsx16("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx16("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
+          /* @__PURE__ */ jsx16(
+            Button,
+            {
+              style: { margin: "0 0.5rem" },
+              variant: "text",
+              color: "neutral",
+              type: "button",
+              onClick: () => {
+                setSelected(initialSelectedRef.current);
+                setShowCalendar(false);
+              },
+              size: "medium",
+              fontWeight: "regular",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ jsx16(
             Button,
             {
               style: { margin: "0 0.5rem" },
@@ -8562,10 +8573,31 @@ function DoubleCalendar(_a) {
               children: actionText != null ? actionText : "Aplicar"
             }
           )
-        }
-      ) })
-    ] })
-  ] })) });
+        ] }),
+        simpleAction && /* @__PURE__ */ jsx16(CalendarFooterStyled, { children: /* @__PURE__ */ jsx16(
+          "div",
+          {
+            style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
+            children: /* @__PURE__ */ jsx16(
+              Button,
+              {
+                style: { margin: "0 0.5rem" },
+                variant: "text",
+                color: "brand",
+                type: "button",
+                onClick: () => {
+                  setShowCalendar(false);
+                },
+                size: "medium",
+                fontWeight: "medium",
+                children: actionText != null ? actionText : "Aplicar"
+              }
+            )
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/Drawer/index.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.11.2",
+  "version": "12.11.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",