@lets-events/react 12.8.5 → 12.9.0

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.8.5 build
+> @lets-events/react@12.9.0 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
-CJS dist/index.js 413.65 KB
-CJS ⚡️ Build success in 336ms
-ESM dist/index.mjs 398.23 KB
-ESM ⚡️ Build success in 337ms
+CJS dist/index.js 414.81 KB
+CJS ⚡️ Build success in 532ms
+ESM dist/index.mjs 399.34 KB
+ESM ⚡️ Build success in 533ms
 DTS Build start
-DTS ⚡️ Build success in 6837ms
-DTS dist/index.d.mts 404.21 KB
-DTS dist/index.d.ts  404.21 KB
+DTS ⚡️ Build success in 9136ms
+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.0
+
+### Minor Changes
+
+- DateAndTimeFormField Disabled
+
+## 12.8.6
+
+### Patch Changes
+
+- Calendar and timer icon color
+
 ## 12.8.5
 
 ### 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,7 +8196,8 @@ function Calendar(_a) {
             inputMode: "numeric",
             textAlign: "right",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl" }) })
+            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,7 +8744,8 @@ function TimePicker({
             typography: "labelSmall",
             fontWeight: "regular",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "clock", size: "xl" }) })
+            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,37 @@ 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",
+        message: disabledInfo
+      });
+    },
+    [addToast, disabled, disabledInfo]
+  );
+  const handleDisabledMouseDown = (0, import_react28.useCallback)(
+    (event) => {
+      if (!disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [disabled]
+  );
+  const disabledInteractionProps = disabled ? {
+    onClickCapture: handleDisabledClick,
+    onMouseDownCapture: handleDisabledMouseDown
+  } : void 0;
   const handleValidate = (0, import_react28.useCallback)(
     (value) => {
       var _a2;
@@ -13477,7 +13511,7 @@ var DateAndTimeFormField = (_a) => {
       }
     ),
     /* @__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)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         Calendar,
         __spreadValues({
           selected: draftDate,
@@ -13488,10 +13522,11 @@ var DateAndTimeFormField = (_a) => {
           hasError: haveError,
           allowPastDates,
           maxYearsFromNow,
-          maxDate
+          maxDate,
+          disabled
         }, props)
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      ) })),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         TimePicker,
         __spreadValues({
           selected: draftTime,
@@ -13499,9 +13534,10 @@ var DateAndTimeFormField = (_a) => {
             const time = typeof value === "function" ? value(draftTime) : value;
             handleTimeChange(time);
           },
+          disabled,
           hasError: haveError
         }, props)
-      ) })
+      ) }))
     ] }),
     /* @__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,7 +8080,8 @@ function Calendar(_a) {
             inputMode: "numeric",
             textAlign: "right",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl" }) })
+            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,7 +8628,8 @@ function TimePicker({
             typography: "labelSmall",
             fontWeight: "regular",
             color: hasError ? "error" : "default",
-            children: /* @__PURE__ */ jsx18(TextFieldSlot, { children: /* @__PURE__ */ jsx18(Icon_default, { name: "clock", size: "xl" }) })
+            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,37 @@ 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",
+        message: disabledInfo
+      });
+    },
+    [addToast, disabled, disabledInfo]
+  );
+  const handleDisabledMouseDown = useCallback8(
+    (event) => {
+      if (!disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [disabled]
+  );
+  const disabledInteractionProps = disabled ? {
+    onClickCapture: handleDisabledClick,
+    onMouseDownCapture: handleDisabledMouseDown
+  } : void 0;
   const handleValidate = useCallback8(
     (value) => {
       var _a2;
@@ -13370,7 +13404,7 @@ var DateAndTimeFormField = (_a) => {
       }
     ),
     /* @__PURE__ */ jsxs33(Flex, { gap: 12, align: "start", children: [
-      /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+      /* @__PURE__ */ jsx59(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ jsx59(
         Calendar,
         __spreadValues({
           selected: draftDate,
@@ -13381,10 +13415,11 @@ var DateAndTimeFormField = (_a) => {
           hasError: haveError,
           allowPastDates,
           maxYearsFromNow,
-          maxDate
+          maxDate,
+          disabled
         }, props)
-      ) }),
-      /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+      ) })),
+      /* @__PURE__ */ jsx59(Flex, __spreadProps(__spreadValues({ direction: "column" }, disabledInteractionProps != null ? disabledInteractionProps : {}), { children: /* @__PURE__ */ jsx59(
         TimePicker,
         __spreadValues({
           selected: draftTime,
@@ -13392,9 +13427,10 @@ var DateAndTimeFormField = (_a) => {
             const time = typeof value === "function" ? value(draftTime) : value;
             handleTimeChange(time);
           },
+          disabled,
           hasError: haveError
         }, props)
-      ) })
+      ) }))
     ] }),
     /* @__PURE__ */ jsx59(ErrorFormMessage, { message: errorMsg })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.8.5",
+  "version": "12.9.0",
   "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,9 +119,10 @@ export function Calendar({
             inputMode="numeric"
             textAlign={"right"}
             color={hasError ? "error" : "default"}
+            disabled={disabled}
           >
             <TextFieldSlot>
-              <Icon name="calendar" size={"xl"} />
+              <Icon name="calendar" size={"xl"} color="#4C4F54" />
             </TextFieldSlot>
           </TextField>
         </CalendarButtonStyled>

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,43 @@ 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",
+                message: disabledInfo,
+            });
+        },
+        [addToast, disabled, disabledInfo]
+    );
+
+    const handleDisabledMouseDown = useCallback(
+        (event: SyntheticEvent) => {
+            if (!disabled) return;
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        [disabled]
+    );
+
+    const disabledInteractionProps = disabled
+        ? {
+            onClickCapture: handleDisabledClick,
+            onMouseDownCapture: handleDisabledMouseDown,
+        }
+        : undefined;
     const handleValidate = useCallback(
         (value?: string) => {
             if (value === undefined || value === null || value === "") {
@@ -131,7 +166,7 @@ export const DateAndTimeFormField = ({
             )}
 
             <Flex gap={12} align="start">
-                <Flex direction="column">
+                <Flex direction="column" {...(disabledInteractionProps ?? {})}>
                     <Calendar
                         selected={draftDate}
                         setSelected={(date) => {
@@ -142,17 +177,19 @@ export const DateAndTimeFormField = ({
                         allowPastDates={allowPastDates}
                         maxYearsFromNow={maxYearsFromNow}
                         maxDate={maxDate}
+                        disabled={disabled}
                         {...(props as Omit<CalendarProps, "selected" | "setSelected">)}
                     />
                 </Flex>
 
-                <Flex direction="column">
+                <Flex direction="column" {...(disabledInteractionProps ?? {})}>
                     <TimePicker
                         selected={draftTime}
                         setSelected={(value) => {
                             const time = typeof value === "function" ? value(draftTime) : value;
                             handleTimeChange(time);
                         }}
+                        disabled={disabled}
                         hasError={haveError}
                         {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
                     />

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,9 +222,10 @@ export function TimePicker({
           typography="labelSmall"
           fontWeight="regular"
           color={hasError ? "error" : "default"}
+          disabled={disabled}
         >
           <TextFieldSlot>
-            <Icon name="clock" size="xl" />
+            <Icon name="clock" size="xl" color="#4C4F54" />
           </TextFieldSlot>
         </TextField>
       </TimePickerButtonStyled>