@lets-events/react 12.8.6 → 12.9.1

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.8.6 build
+> @lets-events/react@12.9.1 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 398.26 KB
-ESM ⚡️ Build success in 334ms
-CJS dist/index.js 413.69 KB
-CJS ⚡️ Build success in 335ms
+ESM dist/index.mjs 399.64 KB
+ESM ⚡️ Build success in 505ms
+CJS dist/index.js 415.12 KB
+CJS ⚡️ Build success in 506ms
 DTS Build start
-DTS ⚡️ Build success in 7365ms
-DTS dist/index.d.mts 404.21 KB
-DTS dist/index.d.ts  404.21 KB
+DTS ⚡️ Build success in 9204ms
+DTS dist/index.d.mts 404.35 KB
+DTS dist/index.d.ts  404.35 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.9.1
+
+### Patch Changes
+
+- Disabled click area
+
+## 12.9.0
+
+### Minor Changes
+
+- DateAndTimeFormField Disabled
+
 ## 12.8.6
 
 ### Patch Changes

package/dist/index.d.mts

@@ -4728,8 +4728,9 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
     allowPastDates?: boolean;
     maxDate?: Date;
     maxYearsFromNow?: number;
+    disabled?: boolean;
 };
-declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, disabled, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type DateRange = {
     from?: Date;
@@ -7770,8 +7771,9 @@ type TimePickerProps = {
     position?: "bottom" | "top" | "top-right" | "bottom-right";
     hasError?: boolean;
     expand?: boolean;
+    disabled?: boolean;
 };
-declare function TimePicker({ selected, setSelected, position, hasError, expand, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+declare function TimePicker({ selected, setSelected, position, hasError, expand, disabled, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
 declare const AlertDialogSimpleStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.ContentProps & React$1.RefAttributes<HTMLDivElement>>, {
     color?: "info" | "warning" | "error" | "success" | undefined;
@@ -15369,11 +15371,13 @@ type DateAndTimeFormFieldProps = Omit<CalendarProps, "selected" | "setSelected">
     validate?: (value: string | undefined) => boolean | string;
     validationErrorMessage?: string;
     rules?: Omit<RegisterOptions<FieldValues, string>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+    disabled?: boolean;
+    disabledInfo?: string;
     allowPastDates?: boolean;
     maxYearsFromNow?: number;
     maxDate?: Date;
 };
-declare const DateAndTimeFormField: ({ name, label, required, validate, validationErrorMessage, rules, allowPastDates, maxYearsFromNow, maxDate, ...props }: DateAndTimeFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const DateAndTimeFormField: ({ name, label, required, validate, validationErrorMessage, rules, disabled, disabledInfo, allowPastDates, maxYearsFromNow, maxDate, ...props }: DateAndTimeFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 interface UploadConfig {
     apiUrl: string;

package/dist/index.d.ts

@@ -4728,8 +4728,9 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
     allowPastDates?: boolean;
     maxDate?: Date;
     maxYearsFromNow?: number;
+    disabled?: boolean;
 };
-declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, disabled, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type DateRange = {
     from?: Date;
@@ -7770,8 +7771,9 @@ type TimePickerProps = {
     position?: "bottom" | "top" | "top-right" | "bottom-right";
     hasError?: boolean;
     expand?: boolean;
+    disabled?: boolean;
 };
-declare function TimePicker({ selected, setSelected, position, hasError, expand, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+declare function TimePicker({ selected, setSelected, position, hasError, expand, disabled, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
 declare const AlertDialogSimpleStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<AlertDialog.ContentProps & React$1.RefAttributes<HTMLDivElement>>, {
     color?: "info" | "warning" | "error" | "success" | undefined;
@@ -15369,11 +15371,13 @@ type DateAndTimeFormFieldProps = Omit<CalendarProps, "selected" | "setSelected">
     validate?: (value: string | undefined) => boolean | string;
     validationErrorMessage?: string;
     rules?: Omit<RegisterOptions<FieldValues, string>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+    disabled?: boolean;
+    disabledInfo?: string;
     allowPastDates?: boolean;
     maxYearsFromNow?: number;
     maxDate?: Date;
 };
-declare const DateAndTimeFormField: ({ name, label, required, validate, validationErrorMessage, rules, allowPastDates, maxYearsFromNow, maxDate, ...props }: DateAndTimeFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const DateAndTimeFormField: ({ name, label, required, validate, validationErrorMessage, rules, disabled, disabledInfo, allowPastDates, maxYearsFromNow, maxDate, ...props }: DateAndTimeFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 interface UploadConfig {
     apiUrl: string;

package/dist/index.js

@@ -8122,7 +8122,8 @@ function Calendar(_a) {
     expand,
     allowPastDates = false,
     maxDate,
-    maxYearsFromNow
+    maxYearsFromNow,
+    disabled = false
   } = _b, props = __objRest(_b, [
     "action",
     "actionText",
@@ -8135,7 +8136,8 @@ function Calendar(_a) {
     "expand",
     "allowPastDates",
     "maxDate",
-    "maxYearsFromNow"
+    "maxYearsFromNow",
+    "disabled"
   ]);
   const [inputValue, setInputValue] = (0, import_react8.useState)("");
   const [showContainer, setShowCalendar] = (0, import_react8.useState)(false);
@@ -8194,6 +8196,7 @@ function Calendar(_a) {
             inputMode: "numeric",
             textAlign: "right",
             color: hasError ? "error" : "default",
+            disabled,
             children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
           }
         )
@@ -8679,7 +8682,8 @@ function TimePicker({
   setSelected,
   position = "bottom",
   hasError,
-  expand = false
+  expand = false,
+  disabled = false
 }) {
   const [hours, setHours] = (0, import_react11.useState)("00");
   const [minutes, setMinutes] = (0, import_react11.useState)("00");
@@ -8740,6 +8744,7 @@ function TimePicker({
             typography: "labelSmall",
             fontWeight: "regular",
             color: hasError ? "error" : "default",
+            disabled,
             children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "clock", size: "xl", color: "#4C4F54" }) })
           }
         )
@@ -13387,6 +13392,8 @@ var DateAndTimeFormField = (_a) => {
     validate,
     validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
     rules,
+    disabled = false,
+    disabledInfo = "Este campo est\xE1 desabilitado.",
     allowPastDates,
     maxYearsFromNow = 20,
     maxDate
@@ -13397,10 +13404,34 @@ var DateAndTimeFormField = (_a) => {
     "validate",
     "validationErrorMessage",
     "rules",
+    "disabled",
+    "disabledInfo",
     "allowPastDates",
     "maxYearsFromNow",
     "maxDate"
   ]);
+  const { addToast } = useToast();
+  const handleDisabledClick = (0, import_react28.useCallback)(
+    (event) => {
+      if (!disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+      addToast({
+        type: "error",
+        icon: "xmark-circle",
+        message: disabledInfo
+      });
+    },
+    [addToast, disabled, disabledInfo]
+  );
+  const handleDisabledMouseDown = (0, import_react28.useCallback)(
+    (event) => {
+      if (!disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [disabled]
+  );
   const handleValidate = (0, import_react28.useCallback)(
     (value) => {
       var _a2;
@@ -13476,33 +13507,57 @@ var DateAndTimeFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { gap: 12, align: "start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        Calendar,
-        __spreadValues({
-          selected: draftDate,
-          setSelected: (date) => {
-            const d = typeof date === "function" ? date(draftDate) : date;
-            handleDateChange(d);
-          },
-          hasError: haveError,
-          allowPastDates,
-          maxYearsFromNow,
-          maxDate
-        }, props)
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        TimePicker,
-        __spreadValues({
-          selected: draftTime,
-          setSelected: (value) => {
-            const time = typeof value === "function" ? value(draftTime) : value;
-            handleTimeChange(time);
-          },
-          hasError: haveError
-        }, props)
-      ) })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      Flex,
+      {
+        gap: 12,
+        align: "start",
+        style: disabled ? { position: "relative" } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            Calendar,
+            __spreadValues({
+              selected: draftDate,
+              setSelected: (date) => {
+                const d = typeof date === "function" ? date(draftDate) : date;
+                handleDateChange(d);
+              },
+              hasError: haveError,
+              allowPastDates,
+              maxYearsFromNow,
+              maxDate,
+              disabled
+            }, props)
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            TimePicker,
+            __spreadValues({
+              selected: draftTime,
+              setSelected: (value) => {
+                const time = typeof value === "function" ? value(draftTime) : value;
+                handleTimeChange(time);
+              },
+              disabled,
+              hasError: haveError
+            }, props)
+          ) }),
+          disabled && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 1,
+                cursor: "not-allowed"
+              },
+              onClick: handleDisabledClick,
+              onMouseDown: handleDisabledMouseDown
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };

package/dist/index.mjs

@@ -8006,7 +8006,8 @@ function Calendar(_a) {
     expand,
     allowPastDates = false,
     maxDate,
-    maxYearsFromNow
+    maxYearsFromNow,
+    disabled = false
   } = _b, props = __objRest(_b, [
     "action",
     "actionText",
@@ -8019,7 +8020,8 @@ function Calendar(_a) {
     "expand",
     "allowPastDates",
     "maxDate",
-    "maxYearsFromNow"
+    "maxYearsFromNow",
+    "disabled"
   ]);
   const [inputValue, setInputValue] = useState2("");
   const [showContainer, setShowCalendar] = useState2(false);
@@ -8078,6 +8080,7 @@ function Calendar(_a) {
             inputMode: "numeric",
             textAlign: "right",
             color: hasError ? "error" : "default",
+            disabled,
             children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
           }
         )
@@ -8563,7 +8566,8 @@ function TimePicker({
   setSelected,
   position = "bottom",
   hasError,
-  expand = false
+  expand = false,
+  disabled = false
 }) {
   const [hours, setHours] = useState4("00");
   const [minutes, setMinutes] = useState4("00");
@@ -8624,6 +8628,7 @@ function TimePicker({
             typography: "labelSmall",
             fontWeight: "regular",
             color: hasError ? "error" : "default",
+            disabled,
             children: /* @__PURE__ */ jsx18(TextFieldSlot, { children: /* @__PURE__ */ jsx18(Icon_default, { name: "clock", size: "xl", color: "#4C4F54" }) })
           }
         )
@@ -13280,6 +13285,8 @@ var DateAndTimeFormField = (_a) => {
     validate,
     validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
     rules,
+    disabled = false,
+    disabledInfo = "Este campo est\xE1 desabilitado.",
     allowPastDates,
     maxYearsFromNow = 20,
     maxDate
@@ -13290,10 +13297,34 @@ var DateAndTimeFormField = (_a) => {
     "validate",
     "validationErrorMessage",
     "rules",
+    "disabled",
+    "disabledInfo",
     "allowPastDates",
     "maxYearsFromNow",
     "maxDate"
   ]);
+  const { addToast } = useToast();
+  const handleDisabledClick = useCallback8(
+    (event) => {
+      if (!disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+      addToast({
+        type: "error",
+        icon: "xmark-circle",
+        message: disabledInfo
+      });
+    },
+    [addToast, disabled, disabledInfo]
+  );
+  const handleDisabledMouseDown = useCallback8(
+    (event) => {
+      if (!disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [disabled]
+  );
   const handleValidate = useCallback8(
     (value) => {
       var _a2;
@@ -13369,33 +13400,57 @@ var DateAndTimeFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsxs33(Flex, { gap: 12, align: "start", children: [
-      /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
-        Calendar,
-        __spreadValues({
-          selected: draftDate,
-          setSelected: (date) => {
-            const d = typeof date === "function" ? date(draftDate) : date;
-            handleDateChange(d);
-          },
-          hasError: haveError,
-          allowPastDates,
-          maxYearsFromNow,
-          maxDate
-        }, props)
-      ) }),
-      /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
-        TimePicker,
-        __spreadValues({
-          selected: draftTime,
-          setSelected: (value) => {
-            const time = typeof value === "function" ? value(draftTime) : value;
-            handleTimeChange(time);
-          },
-          hasError: haveError
-        }, props)
-      ) })
-    ] }),
+    /* @__PURE__ */ jsxs33(
+      Flex,
+      {
+        gap: 12,
+        align: "start",
+        style: disabled ? { position: "relative" } : void 0,
+        children: [
+          /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+            Calendar,
+            __spreadValues({
+              selected: draftDate,
+              setSelected: (date) => {
+                const d = typeof date === "function" ? date(draftDate) : date;
+                handleDateChange(d);
+              },
+              hasError: haveError,
+              allowPastDates,
+              maxYearsFromNow,
+              maxDate,
+              disabled
+            }, props)
+          ) }),
+          /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+            TimePicker,
+            __spreadValues({
+              selected: draftTime,
+              setSelected: (value) => {
+                const time = typeof value === "function" ? value(draftTime) : value;
+                handleTimeChange(time);
+              },
+              disabled,
+              hasError: haveError
+            }, props)
+          ) }),
+          disabled && /* @__PURE__ */ jsx59(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 1,
+                cursor: "not-allowed"
+              },
+              onClick: handleDisabledClick,
+              onMouseDown: handleDisabledMouseDown
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx59(ErrorFormMessage, { message: errorMsg })
   ] });
 };

package/package.json

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

package/src/components/Calendar/index.tsx

@@ -28,6 +28,7 @@ export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
   allowPastDates?: boolean;
   maxDate?: Date;
   maxYearsFromNow?: number;
+  disabled?: boolean;
 };
 
 function formatToDateMask(value: string): string {
@@ -51,6 +52,7 @@ export function Calendar({
   allowPastDates = false,
   maxDate,
   maxYearsFromNow,
+  disabled = false,
   ...props
 }: CalendarProps) {
   const [inputValue, setInputValue] = useState("");
@@ -117,6 +119,7 @@ export function Calendar({
             inputMode="numeric"
             textAlign={"right"}
             color={hasError ? "error" : "default"}
+            disabled={disabled}
           >
             <TextFieldSlot>
               <Icon name="calendar" size={"xl"} color="#4C4F54" />

package/src/components/FormFields/DateAndTimeFormField.tsx

@@ -4,7 +4,8 @@ import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { Calendar, CalendarProps } from "../Calendar";
 import { TimePicker, TimePickerProps } from "../TimePicker";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, type SyntheticEvent } from "react";
+import { useToast } from "../Toast/hooks/useToast";
 
 export type DateAndTimeFormFieldProps = Omit<
     CalendarProps,
@@ -22,6 +23,8 @@ export type DateAndTimeFormFieldProps = Omit<
         RegisterOptions<FieldValues, string>,
         "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
     >;
+    disabled?: boolean;
+    disabledInfo?: string;
     allowPastDates?: boolean;
     maxYearsFromNow?: number;
     maxDate?: Date;
@@ -34,11 +37,38 @@ export const DateAndTimeFormField = ({
     validate,
     validationErrorMessage = "Este campo é obrigatório.",
     rules,
+    disabled = false,
+    disabledInfo = "Este campo está desabilitado.",
     allowPastDates,
     maxYearsFromNow = 20,
     maxDate,
     ...props
 }: DateAndTimeFormFieldProps) => {
+    const { addToast } = useToast();
+
+    const handleDisabledClick = useCallback(
+        (event: SyntheticEvent) => {
+            if (!disabled) return;
+            event.preventDefault();
+            event.stopPropagation();
+            addToast({
+                type: "error",
+                icon: "xmark-circle",
+                message: disabledInfo,
+            });
+        },
+        [addToast, disabled, disabledInfo]
+    );
+
+    const handleDisabledMouseDown = useCallback(
+        (event: SyntheticEvent) => {
+            if (!disabled) return;
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        [disabled]
+    );
+
     const handleValidate = useCallback(
         (value?: string) => {
             if (value === undefined || value === null || value === "") {
@@ -130,7 +160,11 @@ export const DateAndTimeFormField = ({
                 />
             )}
 
-            <Flex gap={12} align="start">
+            <Flex
+                gap={12}
+                align="start"
+                style={disabled ? { position: "relative" } : undefined}
+            >
                 <Flex direction="column">
                     <Calendar
                         selected={draftDate}
@@ -142,6 +176,7 @@ export const DateAndTimeFormField = ({
                         allowPastDates={allowPastDates}
                         maxYearsFromNow={maxYearsFromNow}
                         maxDate={maxDate}
+                        disabled={disabled}
                         {...(props as Omit<CalendarProps, "selected" | "setSelected">)}
                     />
                 </Flex>
@@ -153,10 +188,25 @@ export const DateAndTimeFormField = ({
                             const time = typeof value === "function" ? value(draftTime) : value;
                             handleTimeChange(time);
                         }}
+                        disabled={disabled}
                         hasError={haveError}
                         {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
                     />
                 </Flex>
+
+                {disabled && (
+                    <div
+                        aria-hidden
+                        style={{
+                            position: "absolute",
+                            inset: 0,
+                            zIndex: 1,
+                            cursor: "not-allowed",
+                        }}
+                        onClick={handleDisabledClick}
+                        onMouseDown={handleDisabledMouseDown}
+                    />
+                )}
             </Flex>
 
             <ErrorFormMessage message={errorMsg} />

package/src/components/TimePicker.tsx

@@ -131,6 +131,7 @@ export type TimePickerProps = {
   position?: "bottom" | "top" | "top-right" | "bottom-right";
   hasError?: boolean;
   expand?: boolean;
+  disabled?: boolean;
 };
 const pad = (num: number) => String(num).padStart(2, "0");
 
@@ -158,6 +159,7 @@ export function TimePicker({
   position = "bottom",
   hasError,
   expand = false,
+  disabled = false,
 }: TimePickerProps) {
   const [hours, setHours] = useState("00");
   const [minutes, setMinutes] = useState("00");
@@ -220,6 +222,7 @@ export function TimePicker({
           typography="labelSmall"
           fontWeight="regular"
           color={hasError ? "error" : "default"}
+          disabled={disabled}
         >
           <TextFieldSlot>
             <Icon name="clock" size="xl" color="#4C4F54" />