@lets-events/react 12.10.6 → 12.10.7

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.10.6 build
+> @lets-events/react@12.10.7 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 413.85 KB
-ESM ⚡️ Build success in 498ms
-CJS dist/index.js 429.51 KB
-CJS ⚡️ Build success in 499ms
+ESM dist/index.mjs 415.81 KB
+ESM ⚡️ Build success in 569ms
+CJS dist/index.js 431.44 KB
+CJS ⚡️ Build success in 570ms
 DTS Build start
-DTS ⚡️ Build success in 9566ms
+DTS ⚡️ Build success in 58622ms
 DTS dist/index.d.mts 405.26 KB
 DTS dist/index.d.ts  405.26 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.10.7
+
+### Patch Changes
+
+- update counter at initial values
+
 ## 12.10.6
 
 ### Patch Changes

package/dist/index.js

@@ -2812,7 +2812,10 @@ var TextField = import_react3.default.forwardRef(
       textAlign = "left",
       mask,
       maxLength,
-      hasError
+      hasError,
+      value,
+      defaultValue,
+      onInput
     } = _b, props = __objRest(_b, [
       "children",
       "isValid",
@@ -2824,21 +2827,58 @@ var TextField = import_react3.default.forwardRef(
       "textAlign",
       "mask",
       "maxLength",
-      "hasError"
+      "hasError",
+      "value",
+      "defaultValue",
+      "onInput"
     ]);
+    const _a2 = props, { ref: propRef } = _a2, restProps = __objRest(_a2, ["ref"]);
     const maskRef = mask ? (0, import_mask.useMask)(mask) : void 0;
     const inputRef = import_react3.default.useRef(null);
-    const badgeRef = import_react3.default.useRef(null);
-    const updateCharCountBadge = () => {
-      var _a2, _b2;
-      if (!maxLength || !badgeRef.current) return;
-      const currentLength = (_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0;
-      badgeRef.current.textContent = String(maxLength - currentLength);
+    const getTextLength = (text) => String(text != null ? text : "").length;
+    const updateRemaining = (currentLength) => {
+      if (maxLength !== void 0) {
+        setRemaining(maxLength - currentLength);
+      }
+    };
+    const getCurrentLength = (inputElement) => {
+      var _a3, _b2, _c;
+      if (value !== void 0 && value !== null) {
+        return getTextLength(value);
+      }
+      return (_c = (_b2 = inputElement == null ? void 0 : inputElement.value.length) != null ? _b2 : (_a3 = inputRef.current) == null ? void 0 : _a3.value.length) != null ? _c : getTextLength(defaultValue);
+    };
+    const [remaining, setRemaining] = (0, import_react3.useState)(
+      () => maxLength !== void 0 ? maxLength - getTextLength(value != null ? value : defaultValue) : 0
+    );
+    (0, import_react3.useLayoutEffect)(() => {
+      if (maxLength === void 0) return;
+      updateRemaining(getCurrentLength());
+    }, [maxLength, value, defaultValue]);
+    const assignRef = (element) => {
+      inputRef.current = element;
+      if (maskRef && element) {
+        maskRef.current = element;
+      }
+      if (typeof propRef === "function") {
+        propRef(element);
+      } else if (propRef) {
+        propRef.current = element;
+      }
+      if (typeof fowardedRef === "function") {
+        fowardedRef(element);
+      } else if (fowardedRef) {
+        fowardedRef.current = element;
+      }
+      if (element && maxLength !== void 0) {
+        updateRemaining(getCurrentLength(element));
+      }
     };
     const handleInput = (e) => {
-      var _a2;
-      updateCharCountBadge();
-      (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
+      if (maxLength !== void 0) {
+        updateRemaining(e.currentTarget.value.length);
+      }
+      onInput == null ? void 0 : onInput(e);
     };
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { gap: "0", css: { width: "100%" }, children: [
@@ -2852,7 +2892,7 @@ var TextField = import_react3.default.forwardRef(
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           TextFieldStyled,
-          __spreadProps(__spreadValues({
+          __spreadProps(__spreadValues({}, restProps), {
             color: hasError ? "error" : color || "default",
             isValid: isValid2,
             name,
@@ -2860,17 +2900,10 @@ var TextField = import_react3.default.forwardRef(
             fontWeight,
             textAlign,
             maxLength,
-            ref: (r) => {
-              if (!r) return;
-              inputRef.current = r;
-              if (maskRef) maskRef.current = r;
-              if (fowardedRef) {
-                if (typeof fowardedRef === "function") fowardedRef(r);
-                else fowardedRef.current = r;
-              }
-            },
-            onInput: handleInput
-          }, props), {
+            ref: assignRef,
+            onInput: handleInput,
+            value,
+            defaultValue,
             style: addon ? {
               borderTopLeftRadius: "0px",
               borderBottomLeftRadius: "0px"
@@ -2893,7 +2926,7 @@ var TextField = import_react3.default.forwardRef(
           })
         )
       ] }),
-      maxLength && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextFieldLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref: badgeRef, children: maxLength }) })
+      maxLength && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextFieldLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: remaining }) })
     ] });
   }
 );
@@ -13128,7 +13161,8 @@ var QuillComponent = ({
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
   (0, import_react23.useEffect)(() => {
-    if (quill && value) {
+    if (!quill) return;
+    if (value !== void 0 && value !== null) {
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
         const selection = quill.getSelection();
@@ -13140,7 +13174,8 @@ var QuillComponent = ({
         }
       }
     }
-  }, [quill, value]);
+    onCharacterCountChange == null ? void 0 : onCharacterCountChange(quill.getText().trim().length);
+  }, [quill, value, onCharacterCountChange]);
   (0, import_react23.useEffect)(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
@@ -13456,6 +13491,19 @@ var RichTextPresenter_default = RichTextPresenter;
 // src/components/FormFields/RichEditorFormField.tsx
 var import_react25 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
+var getPlainTextLengthFromHtml = (html) => {
+  var _a, _b;
+  if (!html.trim()) return 0;
+  if (typeof document === "undefined") {
+    return html.replace(/<[^>]*>/g, "").trim().length;
+  }
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return (_b = (_a = doc.body.textContent) == null ? void 0 : _a.trim().length) != null ? _b : 0;
+};
+var getRemainingCharacters = (maxLength, value) => {
+  if (maxLength === void 0) return maxLength;
+  return Math.max(0, maxLength - getPlainTextLengthFromHtml(value != null ? value : ""));
+};
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13488,15 +13536,19 @@ var RichEditorFormField = (_a) => {
           return true;
         return (_a2 = validate == null ? void 0 : validate(value)) != null ? _a2 : true;
       }
-    },
-    defaultValue: ""
+    }
   });
-  const [caracterQuantity, setCaracterQuantity] = (0, import_react25.useState)(maxLength);
+  const [caracterQuantity, setCaracterQuantity] = (0, import_react25.useState)(
+    () => getRemainingCharacters(maxLength, field.value)
+  );
   const handleCharacterCountChange = (count) => {
     if (maxLength !== void 0) {
       setCaracterQuantity(Math.max(0, maxLength - count));
     }
   };
+  (0, import_react25.useEffect)(() => {
+    setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
+  }, [field.value, maxLength]);
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;

package/dist/index.mjs

@@ -2484,7 +2484,7 @@ function Avatar(_a) {
 }
 
 // src/components/TextField.tsx
-import React from "react";
+import React, { useLayoutEffect, useState } from "react";
 import { TextField as TextFieldRadix } from "@radix-ui/themes";
 import { format, useMask, unformat } from "@react-input/mask";
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -2691,7 +2691,10 @@ var TextField = React.forwardRef(
       textAlign = "left",
       mask,
       maxLength,
-      hasError
+      hasError,
+      value,
+      defaultValue,
+      onInput
     } = _b, props = __objRest(_b, [
       "children",
       "isValid",
@@ -2703,21 +2706,58 @@ var TextField = React.forwardRef(
       "textAlign",
       "mask",
       "maxLength",
-      "hasError"
+      "hasError",
+      "value",
+      "defaultValue",
+      "onInput"
     ]);
+    const _a2 = props, { ref: propRef } = _a2, restProps = __objRest(_a2, ["ref"]);
     const maskRef = mask ? useMask(mask) : void 0;
     const inputRef = React.useRef(null);
-    const badgeRef = React.useRef(null);
-    const updateCharCountBadge = () => {
-      var _a2, _b2;
-      if (!maxLength || !badgeRef.current) return;
-      const currentLength = (_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0;
-      badgeRef.current.textContent = String(maxLength - currentLength);
+    const getTextLength = (text) => String(text != null ? text : "").length;
+    const updateRemaining = (currentLength) => {
+      if (maxLength !== void 0) {
+        setRemaining(maxLength - currentLength);
+      }
+    };
+    const getCurrentLength = (inputElement) => {
+      var _a3, _b2, _c;
+      if (value !== void 0 && value !== null) {
+        return getTextLength(value);
+      }
+      return (_c = (_b2 = inputElement == null ? void 0 : inputElement.value.length) != null ? _b2 : (_a3 = inputRef.current) == null ? void 0 : _a3.value.length) != null ? _c : getTextLength(defaultValue);
+    };
+    const [remaining, setRemaining] = useState(
+      () => maxLength !== void 0 ? maxLength - getTextLength(value != null ? value : defaultValue) : 0
+    );
+    useLayoutEffect(() => {
+      if (maxLength === void 0) return;
+      updateRemaining(getCurrentLength());
+    }, [maxLength, value, defaultValue]);
+    const assignRef = (element) => {
+      inputRef.current = element;
+      if (maskRef && element) {
+        maskRef.current = element;
+      }
+      if (typeof propRef === "function") {
+        propRef(element);
+      } else if (propRef) {
+        propRef.current = element;
+      }
+      if (typeof fowardedRef === "function") {
+        fowardedRef(element);
+      } else if (fowardedRef) {
+        fowardedRef.current = element;
+      }
+      if (element && maxLength !== void 0) {
+        updateRemaining(getCurrentLength(element));
+      }
     };
     const handleInput = (e) => {
-      var _a2;
-      updateCharCountBadge();
-      (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
+      if (maxLength !== void 0) {
+        updateRemaining(e.currentTarget.value.length);
+      }
+      onInput == null ? void 0 : onInput(e);
     };
     return /* @__PURE__ */ jsxs2(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
       /* @__PURE__ */ jsxs2(Flex, { gap: "0", css: { width: "100%" }, children: [
@@ -2731,7 +2771,7 @@ var TextField = React.forwardRef(
         ),
         /* @__PURE__ */ jsxs2(
           TextFieldStyled,
-          __spreadProps(__spreadValues({
+          __spreadProps(__spreadValues({}, restProps), {
             color: hasError ? "error" : color || "default",
             isValid: isValid2,
             name,
@@ -2739,17 +2779,10 @@ var TextField = React.forwardRef(
             fontWeight,
             textAlign,
             maxLength,
-            ref: (r) => {
-              if (!r) return;
-              inputRef.current = r;
-              if (maskRef) maskRef.current = r;
-              if (fowardedRef) {
-                if (typeof fowardedRef === "function") fowardedRef(r);
-                else fowardedRef.current = r;
-              }
-            },
-            onInput: handleInput
-          }, props), {
+            ref: assignRef,
+            onInput: handleInput,
+            value,
+            defaultValue,
             style: addon ? {
               borderTopLeftRadius: "0px",
               borderBottomLeftRadius: "0px"
@@ -2772,7 +2805,7 @@ var TextField = React.forwardRef(
           })
         )
       ] }),
-      maxLength && /* @__PURE__ */ jsx7(TextFieldLimitIndicator, { children: /* @__PURE__ */ jsx7("span", { ref: badgeRef, children: maxLength }) })
+      maxLength && /* @__PURE__ */ jsx7(TextFieldLimitIndicator, { children: /* @__PURE__ */ jsx7("span", { children: remaining }) })
     ] });
   }
 );
@@ -3301,7 +3334,7 @@ function FilterItem(_a) {
 
 // src/components/Dropdown.tsx
 import React2, {
-  useState,
+  useState as useState2,
   useRef,
   useEffect
 } from "react";
@@ -3435,7 +3468,7 @@ function DropdownMenu2(_a) {
     "onOpenChange",
     "defaultOpen"
   ]);
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
   const dropdownRef = useRef(null);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
@@ -3859,7 +3892,7 @@ function MenuDropdown({
 }
 
 // src/components/Calendar/index.tsx
-import { useRef as useRef3, useEffect as useEffect3, useState as useState2 } from "react";
+import { useRef as useRef3, useEffect as useEffect3, useState as useState3 } from "react";
 import { DayPicker } from "react-day-picker";
 
 // ../../node_modules/date-fns/locale/_lib/buildFormatLongFn.js
@@ -8255,8 +8288,8 @@ function Calendar(_a) {
     "maxYearsFromNow",
     "disabled"
   ]);
-  const [inputValue, setInputValue] = useState2("");
-  const [showContainer, setShowCalendar] = useState2(false);
+  const [inputValue, setInputValue] = useState3("");
+  const [showContainer, setShowCalendar] = useState3(false);
   const dropdownRef = useRef3(null);
   useOnClickOutside(dropdownRef, () => {
     setShowCalendar(false);
@@ -8352,7 +8385,7 @@ function Calendar(_a) {
 }
 
 // src/components/DoubleCalendar/index.tsx
-import { useRef as useRef4, useEffect as useEffect4, useState as useState3 } from "react";
+import { useRef as useRef4, useEffect as useEffect4, useState as useState4 } from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function DoubleCalendar(_a) {
@@ -8385,9 +8418,9 @@ function DoubleCalendar(_a) {
     "maxDate",
     "disabled"
   ]);
-  const [startValue, setStartValue] = useState3("");
-  const [endValue, setEndValue] = useState3("");
-  const [showContainer, setShowCalendar] = useState3(false);
+  const [startValue, setStartValue] = useState4("");
+  const [endValue, setEndValue] = useState4("");
+  const [showContainer, setShowCalendar] = useState4(false);
   const initialSelectedRef = useRef4(void 0);
   const dropdownRef = useRef4(null);
   useOnClickOutside(dropdownRef, () => {
@@ -8684,7 +8717,7 @@ function Drawer({
 }
 
 // src/components/TimePicker.tsx
-import { useCallback, useEffect as useEffect6, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8823,11 +8856,11 @@ function TimePicker({
   expand = false,
   disabled = false
 }) {
-  const [hours, setHours] = useState4("00");
-  const [minutes, setMinutes] = useState4("00");
-  const [rawHours, setRawHours] = useState4("00");
-  const [rawMinutes, setRawMinutes] = useState4("00");
-  const [isOpen, setIsOpen] = useState4(false);
+  const [hours, setHours] = useState5("00");
+  const [minutes, setMinutes] = useState5("00");
+  const [rawHours, setRawHours] = useState5("00");
+  const [rawMinutes, setRawMinutes] = useState5("00");
+  const [isOpen, setIsOpen] = useState5(false);
   const dropdownRef = useRef6(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
   useEffect6(() => {
@@ -9571,7 +9604,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import React9, { useRef as useRef7, useState as useState5, useEffect as useEffect7 } from "react";
+import React9, { useRef as useRef7, useState as useState6, useEffect as useEffect7 } from "react";
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -9625,7 +9658,7 @@ var TextareaContainer = styled("div", {
 var TextareaField = React9.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color, top = "-1.75rem" } = _b, props = __objRest(_b, ["maxLength", "color", "top"]);
   const inputRef = useRef7(null);
-  const [remaining, setRemaining] = useState5(maxLength);
+  const [remaining, setRemaining] = useState6(maxLength);
   useEffect7(() => {
     var _a2;
     if (maxLength && inputRef.current) {
@@ -9661,7 +9694,7 @@ var TextareaField = React9.forwardRef((_a, forwardedRef) => {
 });
 
 // src/components/Toast/components/ToastItem.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/components/Toast/styles/index.ts
 import { keyframes as keyframes2 } from "@stitches/react";
@@ -9792,7 +9825,7 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [open, setOpen] = useState6(true);
+  const [open, setOpen] = useState7(true);
   const handleOpenChange = (open2) => {
     setOpen(open2);
     if (!open2) {
@@ -9816,7 +9849,7 @@ function ToastItem({
 }
 
 // src/components/Toast/components/ToastProvider.tsx
-import { createContext, useState as useState7 } from "react";
+import { createContext, useState as useState8 } from "react";
 import * as ToastPrimitive2 from "@radix-ui/react-toast";
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
@@ -9826,7 +9859,7 @@ function ToastProvider({
   maxToasts = 5,
   swipeDirection = "right"
 }) {
-  const [toasts, setToasts] = useState7([]);
+  const [toasts, setToasts] = useState8([]);
   const addToast = (toastData) => {
     const id = Math.random().toString(36).substr(2, 9);
     const newToast = __spreadProps(__spreadValues({
@@ -9922,7 +9955,7 @@ function Tooltip({
 }
 
 // src/components/MultiSelect/index.tsx
-import React10, { useCallback as useCallback2, useRef as useRef8, useState as useState8 } from "react";
+import React10, { useCallback as useCallback2, useRef as useRef8, useState as useState9 } from "react";
 import { DropdownMenu as DropdownMenu4, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -10101,9 +10134,9 @@ var MultiSelect = React10.forwardRef(
     showMoreButtonLabel = "Carregar mais",
     showMoreButtonOnClick
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = useState8(false);
+    const [isOpen, setIsOpen] = useState9(false);
     const triggerRef = useRef8(null);
-    const [allOptionsSelected, setAllOptionsSelected] = useState8(false);
+    const [allOptionsSelected, setAllOptionsSelected] = useState9(false);
     const labelByValue = useMemo2(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
@@ -10361,7 +10394,7 @@ var Divider = styled("div", {
 });
 
 // src/components/ToggleElement/index.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function ToggleElement({
   children,
@@ -10373,7 +10406,7 @@ function ToggleElement({
   buttonProps,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = useState9(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState10(defaultOpen);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
   const handleClick = () => {
@@ -11357,7 +11390,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-import { useEffect as useEffect8, useState as useState10 } from "react";
+import { useEffect as useEffect8, useState as useState11 } from "react";
 import { useFormContext as useFormContext5, Controller as Controller2 } from "react-hook-form";
 import { Fragment as Fragment5, jsx as jsx47 } from "react/jsx-runtime";
 function CityFormField({
@@ -11370,8 +11403,8 @@ function CityFormField({
 }) {
   const { control, watch } = useFormContext5();
   const selectedState = watch(stateName);
-  const [cities, setCities] = useState10([]);
-  const [loading, setLoading] = useState10(false);
+  const [cities, setCities] = useState11([]);
+  const [loading, setLoading] = useState11(false);
   useEffect8(() => {
     if (!isBrazil) {
       setCities([]);
@@ -11757,10 +11790,10 @@ var EmailFormField = ({
 import { useController as useController3 } from "react-hook-form";
 
 // src/components/RichEditor/RichEditor.tsx
-import { useEffect as useEffect10, useState as useState12 } from "react";
+import { useEffect as useEffect10, useState as useState13 } from "react";
 
 // src/components/RichEditor/QuillComponent.tsx
-import { useState as useState11, useRef as useRef9, useEffect as useEffect9, useCallback as useCallback4 } from "react";
+import { useState as useState12, useRef as useRef9, useEffect as useEffect9, useCallback as useCallback4 } from "react";
 import { useQuill } from "react-quilljs";
 
 // src/utils/uploadService.ts
@@ -12963,10 +12996,10 @@ var QuillComponent = ({
   onCharacterCountChange,
   maxLength
 }) => {
-  const [showVideoModal, setShowVideoModal] = useState11(false);
-  const [videoUrl, setVideoUrl] = useState11("");
-  const [showLinkModal, setShowLinkModal] = useState11(false);
-  const [linkUrl, setLinkUrl] = useState11("");
+  const [showVideoModal, setShowVideoModal] = useState12(false);
+  const [videoUrl, setVideoUrl] = useState12("");
+  const [showLinkModal, setShowLinkModal] = useState12(false);
+  const [linkUrl, setLinkUrl] = useState12("");
   const videoModalRef = useRef9(null);
   const linkModalRef = useRef9(null);
   const { addToast, removeToast } = useToast();
@@ -13020,7 +13053,8 @@ var QuillComponent = ({
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
   useEffect9(() => {
-    if (quill && value) {
+    if (!quill) return;
+    if (value !== void 0 && value !== null) {
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
         const selection = quill.getSelection();
@@ -13032,7 +13066,8 @@ var QuillComponent = ({
         }
       }
     }
-  }, [quill, value]);
+    onCharacterCountChange == null ? void 0 : onCharacterCountChange(quill.getText().trim().length);
+  }, [quill, value, onCharacterCountChange]);
   useEffect9(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
@@ -13323,7 +13358,7 @@ var QuillComponent_default = QuillComponent;
 // src/components/RichEditor/RichEditor.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
 var RichEditor = (props) => {
-  const [isClient, setIsClient] = useState12(false);
+  const [isClient, setIsClient] = useState13(false);
   useEffect10(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
@@ -13346,8 +13381,21 @@ var RichTextPresenter = ({ richText }) => {
 var RichTextPresenter_default = RichTextPresenter;
 
 // src/components/FormFields/RichEditorFormField.tsx
-import { useState as useState13 } from "react";
+import { useEffect as useEffect11, useState as useState14 } from "react";
 import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+var getPlainTextLengthFromHtml = (html) => {
+  var _a, _b;
+  if (!html.trim()) return 0;
+  if (typeof document === "undefined") {
+    return html.replace(/<[^>]*>/g, "").trim().length;
+  }
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return (_b = (_a = doc.body.textContent) == null ? void 0 : _a.trim().length) != null ? _b : 0;
+};
+var getRemainingCharacters = (maxLength, value) => {
+  if (maxLength === void 0) return maxLength;
+  return Math.max(0, maxLength - getPlainTextLengthFromHtml(value != null ? value : ""));
+};
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13380,15 +13428,19 @@ var RichEditorFormField = (_a) => {
           return true;
         return (_a2 = validate == null ? void 0 : validate(value)) != null ? _a2 : true;
       }
-    },
-    defaultValue: ""
+    }
   });
-  const [caracterQuantity, setCaracterQuantity] = useState13(maxLength);
+  const [caracterQuantity, setCaracterQuantity] = useState14(
+    () => getRemainingCharacters(maxLength, field.value)
+  );
   const handleCharacterCountChange = (count) => {
     if (maxLength !== void 0) {
       setCaracterQuantity(Math.max(0, maxLength - count));
     }
   };
+  useEffect11(() => {
+    setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
+  }, [field.value, maxLength]);
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -13660,7 +13712,7 @@ var TimePickerFormField = (_a) => {
 
 // src/components/FormFields/DateAndTimeFormField.tsx
 import { useController as useController7 } from "react-hook-form";
-import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo4, useState as useState14 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useMemo as useMemo4, useState as useState15 } from "react";
 import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
 var DateAndTimeFormField = (_a) => {
   var _b = _a, {
@@ -13748,9 +13800,9 @@ var DateAndTimeFormField = (_a) => {
       return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
-  const [draftDate, setDraftDate] = useState14(selectedDateFromIso);
-  const [draftTime, setDraftTime] = useState14(selectedTimeFromIso);
-  useEffect11(() => {
+  const [draftDate, setDraftDate] = useState15(selectedDateFromIso);
+  const [draftTime, setDraftTime] = useState15(selectedTimeFromIso);
+  useEffect12(() => {
     setDraftDate(selectedDateFromIso);
     setDraftTime(selectedTimeFromIso);
   }, [selectedDateFromIso, selectedTimeFromIso]);
@@ -13841,11 +13893,11 @@ var DateAndTimeFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState15, useCallback as useCallback9 } from "react";
+import { useState as useState16, useCallback as useCallback9 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState15(false);
-  const [progress, setProgress] = useState15(null);
-  const [error, setError] = useState15(null);
+  const [isUploading, setIsUploading] = useState16(false);
+  const [progress, setProgress] = useState16(null);
+  const [error, setError] = useState16(null);
   const {
     onSuccess,
     onError,

package/package.json

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

package/src/components/FormFields/RichEditorFormField.tsx

@@ -3,9 +3,25 @@ import { Flex } from "../Flex";
 import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { RichEditor, RichEditorProps } from "../RichEditor";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Badge } from "../Badge";
 import { RichEditorElement } from "../RichEditor/types";
+
+const getPlainTextLengthFromHtml = (html: string) => {
+  if (!html.trim()) return 0;
+
+  if (typeof document === "undefined") {
+    return html.replace(/<[^>]*>/g, "").trim().length;
+  }
+
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return doc.body.textContent?.trim().length ?? 0;
+};
+
+const getRemainingCharacters = (maxLength: number | undefined, value?: string) => {
+  if (maxLength === undefined) return maxLength;
+  return Math.max(0, maxLength - getPlainTextLengthFromHtml(value ?? ""));
+};
 export type RichEditorFormFieldProps = Omit<
   RichEditorProps,
   "value" | "onChange"
@@ -48,14 +64,20 @@ export const RichEditorFormField = ({
         return validate?.(value) ?? true;
       },
     },
-    defaultValue: "",
   });
-  const [caracterQuantity, setCaracterQuantity] = useState(maxLength)
+  const [caracterQuantity, setCaracterQuantity] = useState(() =>
+    getRemainingCharacters(maxLength, field.value),
+  );
+
   const handleCharacterCountChange = (count: number) => {
     if (maxLength !== undefined) {
       setCaracterQuantity(Math.max(0, maxLength - count));
     }
   };
+
+  useEffect(() => {
+    setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
+  }, [field.value, maxLength]);
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError?.message;

package/src/components/RichEditor/QuillComponent.tsx

@@ -90,7 +90,9 @@ const QuillComponent: React.FC<RichEditorProps> = ({
   );
 
   useEffect(() => {
-    if (quill && value) {
+    if (!quill) return;
+
+    if (value !== undefined && value !== null) {
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
         const selection = quill.getSelection();
@@ -103,7 +105,9 @@ const QuillComponent: React.FC<RichEditorProps> = ({
         }
       }
     }
-  }, [quill, value]);
+
+    onCharacterCountChange?.(quill.getText().trim().length);
+  }, [quill, value, onCharacterCountChange]);
 
   useEffect(() => {
     if (quill) {

package/src/components/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactNode } from "react";
+import React, { ComponentProps, ReactNode, useLayoutEffect, useState } from "react";
 import { styled } from "../styles";
 import { TextField as TextFieldRadix } from "@radix-ui/themes";
 import Icon from "./Icon";
@@ -250,23 +250,81 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       mask,
       maxLength,
       hasError,
+      value,
+      defaultValue,
+      onInput,
       ...props
     },
     fowardedRef
   ) => {
+    const { ref: propRef, ...restProps } = props as typeof props & {
+      ref?: React.Ref<HTMLInputElement>;
+    };
     const maskRef = mask ? useMask(mask) : undefined;
     const inputRef = React.useRef<HTMLInputElement>(null);
-    const badgeRef = React.useRef<HTMLSpanElement>(null);
 
-    const updateCharCountBadge = () => {
-      if (!maxLength || !badgeRef.current) return;
-      const currentLength = inputRef.current?.value.length ?? 0;
-      badgeRef.current.textContent = String(maxLength - currentLength);
+    const getTextLength = (
+      text?: string | number | readonly string[] | null,
+    ) => String(text ?? "").length;
+
+    const updateRemaining = (currentLength: number) => {
+      if (maxLength !== undefined) {
+        setRemaining(maxLength - currentLength);
+      }
+    };
+
+    const getCurrentLength = (inputElement?: HTMLInputElement | null) => {
+      if (value !== undefined && value !== null) {
+        return getTextLength(value);
+      }
+
+      return (
+        inputElement?.value.length ??
+        inputRef.current?.value.length ??
+        getTextLength(defaultValue)
+      );
+    };
+
+    const [remaining, setRemaining] = useState(() =>
+      maxLength !== undefined
+        ? maxLength - getTextLength(value ?? defaultValue)
+        : 0,
+    );
+
+    useLayoutEffect(() => {
+      if (maxLength === undefined) return;
+      updateRemaining(getCurrentLength());
+    }, [maxLength, value, defaultValue]);
+
+    const assignRef = (element: HTMLInputElement | null) => {
+      inputRef.current = element;
+
+      if (maskRef && element) {
+        maskRef.current = element;
+      }
+
+      if (typeof propRef === "function") {
+        propRef(element);
+      } else if (propRef) {
+        propRef.current = element;
+      }
+
+      if (typeof fowardedRef === "function") {
+        fowardedRef(element);
+      } else if (fowardedRef) {
+        fowardedRef.current = element;
+      }
+
+      if (element && maxLength !== undefined) {
+        updateRemaining(getCurrentLength(element));
+      }
     };
 
     const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-      updateCharCountBadge();
-      props.onInput?.(e);
+      if (maxLength !== undefined) {
+        updateRemaining(e.currentTarget.value.length);
+      }
+      onInput?.(e);
     };
 
     return (
@@ -282,6 +340,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           )}
 
           <TextFieldStyled
+            {...restProps}
             color={hasError ? "error" : color || "default"}
             isValid={isValid}
             name={name}
@@ -289,18 +348,10 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             fontWeight={fontWeight}
             textAlign={textAlign}
             maxLength={maxLength}
-            ref={(r) => {
-              if (!r) return;
-              inputRef.current = r;
-              if (maskRef) maskRef.current = r;
-
-              if (fowardedRef) {
-                if (typeof fowardedRef === "function") fowardedRef(r);
-                else fowardedRef.current = r;
-              }
-            }}
+            ref={assignRef}
             onInput={handleInput}
-            {...props}
+            value={value}
+            defaultValue={defaultValue}
             style={
               addon
                 ? {
@@ -329,7 +380,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         </Flex>
         {maxLength && (
           <TextFieldLimitIndicator>
-            <span ref={badgeRef}>{maxLength}</span>
+            <span>{remaining}</span>
           </TextFieldLimitIndicator>
         )}
       </Flex>