@lets-events/react 12.1.1 → 12.1.3

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.1.1 build
+> @lets-events/react@12.1.3 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,14 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.css 27.00 KB
-CJS dist/index.js  363.99 KB
-CJS ⚡️ Build success in 564ms
-ESM dist/index.css 27.00 KB
 ESM dist/index.mjs 350.42 KB
-ESM ⚡️ Build success in 566ms
+ESM ⚡️ Build success in 408ms
+CJS dist/index.js 363.98 KB
+CJS ⚡️ Build success in 409ms
 DTS Build start
-DTS ⚡️ Build success in 9573ms
-DTS dist/index.d.mts 379.16 KB
-DTS dist/index.d.ts  379.16 KB
+DTS ⚡️ Build success in 7471ms
+DTS dist/index.d.mts 379.14 KB
+DTS dist/index.d.ts  379.14 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.1.3
+
+### Patch Changes
+
+- TextareaField maxLength control
+
+## 12.1.2
+
+### Patch Changes
+
+- added quill
+
 ## 12.1.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -14344,7 +14344,6 @@ interface RichEditorProps {
     onChange?: (value: string) => void;
     placeholder?: string;
     label?: string;
-    required?: boolean;
     disabled?: boolean;
     className?: string;
     uploadConfig: UploadConfig$1;

package/dist/index.d.ts

@@ -14344,7 +14344,6 @@ interface RichEditorProps {
     onChange?: (value: string) => void;
     placeholder?: string;
     label?: string;
-    required?: boolean;
     disabled?: boolean;
     className?: string;
     uploadConfig: UploadConfig$1;

package/dist/index.js

@@ -9087,19 +9087,21 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-var TextareaField = import_react11.default.forwardRef((_a, fowardedRef) => {
+var TextareaField = import_react11.default.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
   const inputRef = (0, import_react11.useRef)(null);
-  const badgeRef = (0, import_react11.useRef)(null);
-  const updateCharCountBadge = () => {
-    var _a2, _b2;
-    if (!maxLength || !badgeRef.current) return;
-    const remainingChars = maxLength - ((_b2 = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0);
-    badgeRef.current.textContent = String(remainingChars);
-  };
+  const [remaining, setRemaining] = (0, import_react11.useState)(maxLength);
+  (0, import_react11.useEffect)(() => {
+    var _a2;
+    if (maxLength && inputRef.current) {
+      setRemaining(maxLength - ((_a2 = inputRef.current.value.length) != null ? _a2 : 0));
+    }
+  }, [maxLength]);
   const handleInput = (e) => {
     var _a2;
-    updateCharCountBadge();
+    if (maxLength) {
+      setRemaining(maxLength - e.currentTarget.value.length);
+    }
     (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(TextareaContainer, { color, children: [
@@ -9110,18 +9112,16 @@ var TextareaField = import_react11.default.forwardRef((_a, fowardedRef) => {
         ref: (r) => {
           if (!r) return;
           inputRef.current = r;
-          if (fowardedRef) {
-            if (typeof fowardedRef === "function") fowardedRef(r);
-            else {
-              fowardedRef.current = r;
-            }
+          if (forwardedRef) {
+            if (typeof forwardedRef === "function") forwardedRef(r);
+            else forwardedRef.current = r;
           }
         },
         onInput: handleInput,
         maxLength
       }, props)
     ),
-    maxLength && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextareaLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
+    maxLength && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextareaLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { typography: "badgeMedium", children: remaining }) })
   ] });
 });
 
@@ -10953,6 +10953,7 @@ var import_react_hook_form11 = require("react-hook-form");
 // src/components/RichEditor/QuillComponent.tsx
 var import_react20 = require("react");
 var import_react_quilljs = require("react-quilljs");
+var import_quill_snow = require("quill/dist/quill.snow.css");
 
 // src/utils/uploadService.ts
 var generateUniqueFilename = (originalName) => {

package/dist/index.mjs

@@ -8913,7 +8913,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import React8, { useRef as useRef6 } from "react";
+import React8, { useRef as useRef6, useState as useState4, useEffect as useEffect4 } from "react";
 import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -8978,19 +8978,21 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-var TextareaField = React8.forwardRef((_a, fowardedRef) => {
+var TextareaField = React8.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
   const inputRef = useRef6(null);
-  const badgeRef = useRef6(null);
-  const updateCharCountBadge = () => {
-    var _a2, _b2;
-    if (!maxLength || !badgeRef.current) return;
-    const remainingChars = maxLength - ((_b2 = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0);
-    badgeRef.current.textContent = String(remainingChars);
-  };
+  const [remaining, setRemaining] = useState4(maxLength);
+  useEffect4(() => {
+    var _a2;
+    if (maxLength && inputRef.current) {
+      setRemaining(maxLength - ((_a2 = inputRef.current.value.length) != null ? _a2 : 0));
+    }
+  }, [maxLength]);
   const handleInput = (e) => {
     var _a2;
-    updateCharCountBadge();
+    if (maxLength) {
+      setRemaining(maxLength - e.currentTarget.value.length);
+    }
     (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
   return /* @__PURE__ */ jsxs10(TextareaContainer, { color, children: [
@@ -9001,23 +9003,21 @@ var TextareaField = React8.forwardRef((_a, fowardedRef) => {
         ref: (r) => {
           if (!r) return;
           inputRef.current = r;
-          if (fowardedRef) {
-            if (typeof fowardedRef === "function") fowardedRef(r);
-            else {
-              fowardedRef.current = r;
-            }
+          if (forwardedRef) {
+            if (typeof forwardedRef === "function") forwardedRef(r);
+            else forwardedRef.current = r;
           }
         },
         onInput: handleInput,
         maxLength
       }, props)
     ),
-    maxLength && /* @__PURE__ */ jsx22(TextareaLimitIndicator, { children: /* @__PURE__ */ jsx22(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
+    maxLength && /* @__PURE__ */ jsx22(TextareaLimitIndicator, { children: /* @__PURE__ */ jsx22(Text, { typography: "badgeMedium", children: remaining }) })
   ] });
 });
 
 // src/components/Toast/components/ToastItem.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/components/Toast/styles/index.ts
 import { keyframes as keyframes2 } from "@stitches/react";
@@ -9148,7 +9148,7 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [open, setOpen] = useState4(true);
+  const [open, setOpen] = useState5(true);
   const handleOpenChange = (open2) => {
     setOpen(open2);
     if (!open2) {
@@ -9172,7 +9172,7 @@ function ToastItem({
 }
 
 // src/components/Toast/components/ToastProvider.tsx
-import { createContext, useState as useState5 } from "react";
+import { createContext, useState as useState6 } from "react";
 import * as ToastPrimitive2 from "@radix-ui/react-toast";
 import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
@@ -9182,7 +9182,7 @@ function ToastProvider({
   maxToasts = 5,
   swipeDirection = "right"
 }) {
-  const [toasts, setToasts] = useState5([]);
+  const [toasts, setToasts] = useState6([]);
   const addToast = (toastData) => {
     const id = Math.random().toString(36).substr(2, 9);
     const newToast = __spreadProps(__spreadValues({
@@ -9278,7 +9278,7 @@ function Tooltip({
 }
 
 // src/components/MultiSelect.tsx
-import React9, { useCallback as useCallback2, useRef as useRef7, useState as useState6 } from "react";
+import React9, { useCallback as useCallback2, useRef as useRef7, useState as useState7 } from "react";
 import { DropdownMenu as DropdownMenu3, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -9392,7 +9392,7 @@ var MultiSelect = React9.forwardRef(
     disabled = false,
     maxHeight
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = useState6(false);
+    const [isOpen, setIsOpen] = useState7(false);
     const triggerRef = useRef7(null);
     const labelByValue = useMemo(() => {
       return options.reduce((prev, curr) => {
@@ -10484,7 +10484,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-import { useEffect as useEffect4, useState as useState7 } from "react";
+import { useEffect as useEffect5, useState as useState8 } from "react";
 import { useFormContext as useFormContext6, Controller as Controller2 } from "react-hook-form";
 import { Fragment as Fragment4, jsx as jsx45 } from "react/jsx-runtime";
 function CityFormField({
@@ -10497,9 +10497,9 @@ function CityFormField({
 }) {
   const { control, watch } = useFormContext6();
   const selectedState = watch(stateName);
-  const [cities, setCities] = useState7([]);
-  const [loading, setLoading] = useState7(false);
-  useEffect4(() => {
+  const [cities, setCities] = useState8([]);
+  const [loading, setLoading] = useState8(false);
+  useEffect5(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -10851,8 +10851,9 @@ var EmailFormField = ({
 import { useController as useController3 } from "react-hook-form";
 
 // src/components/RichEditor/QuillComponent.tsx
-import { useState as useState8, useRef as useRef8, useEffect as useEffect5, useCallback as useCallback4 } from "react";
+import { useState as useState9, useRef as useRef8, useEffect as useEffect6, useCallback as useCallback4 } from "react";
 import { useQuill } from "react-quilljs";
+import "quill/dist/quill.snow.css";
 
 // src/utils/uploadService.ts
 var generateUniqueFilename = (originalName) => {
@@ -11054,10 +11055,10 @@ var QuillComponent = ({
   className,
   uploadConfig
 }) => {
-  const [showVideoModal, setShowVideoModal] = useState8(false);
-  const [videoUrl, setVideoUrl] = useState8("");
-  const [showLinkModal, setShowLinkModal] = useState8(false);
-  const [linkUrl, setLinkUrl] = useState8("");
+  const [showVideoModal, setShowVideoModal] = useState9(false);
+  const [videoUrl, setVideoUrl] = useState9("");
+  const [showLinkModal, setShowLinkModal] = useState9(false);
+  const [linkUrl, setLinkUrl] = useState9("");
   const videoModalRef = useRef8(null);
   const linkModalRef = useRef8(null);
   const { addToast, removeToast } = useToast();
@@ -11124,7 +11125,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (quill && value) {
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
@@ -11138,7 +11139,7 @@ var QuillComponent = ({
       }
     }
   }, [quill, value]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -11187,7 +11188,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -11252,7 +11253,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  useEffect5(() => {
+  useEffect6(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -11620,11 +11621,11 @@ var TimePickerFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState9, useCallback as useCallback7 } from "react";
+import { useState as useState10, useCallback as useCallback7 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState9(false);
-  const [progress, setProgress] = useState9(null);
-  const [error, setError] = useState9(null);
+  const [isUploading, setIsUploading] = useState10(false);
+  const [progress, setProgress] = useState10(null);
+  const [error, setError] = useState10(null);
   const {
     onSuccess,
     onError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.1.1",
+  "version": "12.1.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,6 +41,7 @@
     "dotenv": "^17.2.1",
     "i18n-iso-countries": "^7.14.0",
     "npm": "^11.4.2",
+    "quill": "^2.0.3",
     "radix-ui": "^1.4.2",
     "react-day-picker": "^9.6.7",
     "react-hook-form": "^7.57.0",

package/src/components/RichEditor/RichEditor.tsx

@@ -19,7 +19,6 @@ export interface RichEditorProps {
   onChange?: (value: string) => void;
   placeholder?: string;
   label?: string;
-  required?: boolean;
   disabled?: boolean;
   className?: string;
   uploadConfig: UploadConfig;

package/src/components/TextareaField.tsx

@@ -1,7 +1,6 @@
-import { TextArea as TextAreaRadix, Flex, Box } from "@radix-ui/themes";
+import { TextArea as TextAreaRadix } from "@radix-ui/themes";
 import { styled } from "../styles";
-import React, { ComponentProps, useRef } from "react";
-
+import React, { ComponentProps, useRef, useState, useEffect } from "react";
 import { typographyValues } from "../types/typographyValues";
 import { Text } from "./Text";
 
@@ -59,12 +58,6 @@ const TextareaContainer = styled("div", {
   },
 });
 
-export type TextareaFieldProps = Omit<
-  ComponentProps<typeof TextareaFieldStyle>,
-  "color"
-> &
-  ComponentProps<typeof TextareaContainer>;
-
 const TextareaLimitIndicator = styled("div", {
   padding: "$12 $16",
   borderTop: "1px solid $neutral300",
@@ -80,21 +73,29 @@ const TextareaLimitIndicator = styled("div", {
   },
 });
 
+export type TextareaFieldProps = Omit<
+  ComponentProps<typeof TextareaFieldStyle>,
+  "color"
+> &
+  ComponentProps<typeof TextareaContainer>;
+
 export const TextareaField = React.forwardRef<
   HTMLTextAreaElement,
   TextareaFieldProps
->(({ maxLength, color, ...props }, fowardedRef) => {
+>(({ maxLength, color, ...props }, forwardedRef) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const badgeRef = useRef<HTMLSpanElement>(null);
+  const [remaining, setRemaining] = useState(maxLength);
 
-  const updateCharCountBadge = () => {
-    if (!maxLength || !badgeRef.current) return;
-    const remainingChars = maxLength - (inputRef?.current?.value.length ?? 0);
-    badgeRef.current.textContent = String(remainingChars);
-  };
+  useEffect(() => {
+    if (maxLength && inputRef.current) {
+      setRemaining(maxLength - (inputRef.current.value.length ?? 0));
+    }
+  }, [maxLength]);
 
   const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    updateCharCountBadge();
+    if (maxLength) {
+      setRemaining(maxLength - e.currentTarget.value.length);
+    }
     props.onInput?.(e);
   };
 
@@ -105,11 +106,9 @@ export const TextareaField = React.forwardRef<
         ref={(r) => {
           if (!r) return;
           inputRef.current = r;
-          if (fowardedRef) {
-            if (typeof fowardedRef === "function") fowardedRef(r);
-            else {
-              fowardedRef.current = r;
-            }
+          if (forwardedRef) {
+            if (typeof forwardedRef === "function") forwardedRef(r);
+            else forwardedRef.current = r;
           }
         }}
         onInput={handleInput}
@@ -118,8 +117,8 @@ export const TextareaField = React.forwardRef<
       />
       {maxLength && (
         <TextareaLimitIndicator>
-          <Text typography={"badgeMedium"} ref={badgeRef}>
-            {maxLength}
+          <Text typography="badgeMedium">
+            {remaining}
           </Text>
         </TextareaLimitIndicator>
       )}