@lets-events/react 12.1.2 → 12.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.1.2",
+  "version": "12.1.4",
   "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

@@ -1,5 +1,7 @@
+import { lazy, useEffect, useState, Suspense } from "react";
 import { ToastProvider } from "../Toast";
-import QuillComponent from "./QuillComponent";
+
+const QuillComponent = lazy(() => import("./QuillComponent"));
 
 export interface UploadConfig {
   apiUrl: string;
@@ -19,20 +21,29 @@ export interface RichEditorProps {
   onChange?: (value: string) => void;
   placeholder?: string;
   label?: string;
-  required?: boolean;
   disabled?: boolean;
   className?: string;
   uploadConfig: UploadConfig;
 }
 
 const RichEditor = (props: RichEditorProps) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(typeof window !== "undefined");
+  }, []);
+
+  if (!isClient) return null;
+
   return (
     <div>
       <ToastProvider>
-        <QuillComponent {...props} />
+        <Suspense fallback={null}>
+          <QuillComponent {...props} />
+        </Suspense>
       </ToastProvider>
     </div>
   );
 };
 
-export default RichEditor;
+export default RichEditor;

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>
       )}