@lets-events/react 12.2.0 → 12.2.2

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.2.0 build
+> @lets-events/react@12.2.2 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 391.96 KB
-CJS ⚡️ Build success in 499ms
-ESM dist/index.mjs 378.06 KB
-ESM ⚡️ Build success in 501ms
+ESM dist/index.mjs 379.06 KB
+ESM ⚡️ Build success in 419ms
+CJS dist/index.js 393.01 KB
+CJS ⚡️ Build success in 420ms
 DTS Build start
-DTS ⚡️ Build success in 8126ms
-DTS dist/index.d.mts 388.96 KB
-DTS dist/index.d.ts  388.96 KB
+DTS ⚡️ Build success in 6505ms
+DTS dist/index.d.mts 389.04 KB
+DTS dist/index.d.ts  389.04 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.2.2
+
+### Patch Changes
+
+- RichEditor HTML Stylization
+
+## 12.2.1
+
+### Patch Changes
+
+- Drawer Go Back Button
+
 ## 12.2.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -5054,8 +5054,10 @@ type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
     backgroundColor?: keyof Colors;
     title: string;
     children?: ReactNode;
+    goBackIcon?: ReactNode;
+    goBackAction: () => void;
 };
-declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, goBackIcon, goBackAction }: DrawerProps): react_jsx_runtime.JSX.Element | null;
 
 declare const TimePickerStyled: _stitches_react_types_styled_component.StyledComponent<"div", {
     expand?: boolean | "true" | undefined;

package/dist/index.d.ts

@@ -5054,8 +5054,10 @@ type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
     backgroundColor?: keyof Colors;
     title: string;
     children?: ReactNode;
+    goBackIcon?: ReactNode;
+    goBackAction: () => void;
 };
-declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, goBackIcon, goBackAction }: DrawerProps): react_jsx_runtime.JSX.Element | null;
 
 declare const TimePickerStyled: _stitches_react_types_styled_component.StyledComponent<"div", {
     expand?: boolean | "true" | undefined;

package/dist/index.js

@@ -8112,6 +8112,12 @@ var DrawerHeaderCloseButton = styled("button", {
   border: "none",
   cursor: "pointer"
 });
+var GoBackButtonStyled = styled("button", {
+  background: "none",
+  padding: "0",
+  border: "none",
+  cursor: "pointer"
+});
 
 // src/components/Drawer/index.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -8121,7 +8127,9 @@ function Drawer({
   width,
   backgroundColor,
   title,
-  children
+  children,
+  goBackIcon,
+  goBackAction
 }) {
   if (!isOpen) return null;
   const drawerContainerRef = (0, import_react8.useRef)(null);
@@ -8175,7 +8183,10 @@ function Drawer({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DrawerHeaderDiv, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: 8, align: "center", children: [
+            goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
         ] }),
         children
@@ -9455,8 +9466,10 @@ var itemStyle = {
   }
 };
 var StyledItem2 = styled("div", __spreadValues({}, itemStyle));
-var BadgeCloseBtn = styled("div", {
-  cursor: "pointer"
+var CloseBtnStyled = styled("button", {
+  cursor: "pointer",
+  background: "none",
+  border: "none"
 });
 var StyledFlexWithMaxHeight = styled(Flex2, {
   variants: {
@@ -9682,6 +9695,7 @@ var MultiSelect = import_react16.default.forwardRef(
                         {
                           css: itemStyle,
                           onClick: (e) => handleSelectAll(e),
+                          type: "button",
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: allOptionsSelected ? "checked" : "" }),
                             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
@@ -9722,13 +9736,13 @@ var MultiSelect = import_react16.default.forwardRef(
               css: { flexWrap: "wrap" },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  BadgeCloseBtn,
+                  CloseBtnStyled,
                   {
                     onClick: (e) => {
                       e.stopPropagation();
                       handleRemove(value);
                     },
-                    role: "button",
+                    type: "button",
                     children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
                   }
                 ),
@@ -11296,7 +11310,8 @@ var QuillEditor = styled("div", {
       marginBottom: 0
     },
     "& h1": {
-      fontSize: "2em"
+      fontSize: "2em",
+      lineHeight: "2em!important"
     },
     "& h2": {
       fontSize: "1.5em"
@@ -12155,6 +12170,17 @@ var QuillComponent = ({
   const videoModalRef = (0, import_react20.useRef)(null);
   const linkModalRef = (0, import_react20.useRef)(null);
   const { addToast, removeToast } = useToast();
+  const formatHTML = (html) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    doc.querySelectorAll("h1").forEach((h1) => {
+      h1.setAttribute("style", `${h1.getAttribute("style") || ""}line-height: 2em;`);
+    });
+    doc.querySelectorAll("img").forEach((img) => {
+      img.setAttribute("style", `${img.getAttribute("style") || ""}max-width: 100%; height: auto; width: auto;`);
+    });
+    return doc.body.innerHTML;
+  };
   const modules = simpleVersion ? {
     toolbar: [
       ["bold", "italic", "underline"],
@@ -12217,7 +12243,7 @@ var QuillComponent = ({
         const index = selection ? selection.index : quill.getLength();
         quill.insertEmbed(index, "image", uploadedFile.url);
         quill.setSelection(index + 1, 0);
-        onChange == null ? void 0 : onChange(quill.root.innerHTML);
+        onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
       } catch (error) {
         console.error("Erro no upload:", error);
         addToast({
@@ -12252,7 +12278,7 @@ var QuillComponent = ({
             quill.deleteText(maxLength, count - maxLength);
             return;
           }
-          onChange == null ? void 0 : onChange(quill.root.innerHTML);
+          onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
           onCharacterCountChange == null ? void 0 : onCharacterCountChange(count);
         }
       });

package/dist/index.mjs

@@ -8001,6 +8001,12 @@ var DrawerHeaderCloseButton = styled("button", {
   border: "none",
   cursor: "pointer"
 });
+var GoBackButtonStyled = styled("button", {
+  background: "none",
+  padding: "0",
+  border: "none",
+  cursor: "pointer"
+});
 
 // src/components/Drawer/index.tsx
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -8010,7 +8016,9 @@ function Drawer({
   width,
   backgroundColor,
   title,
-  children
+  children,
+  goBackIcon,
+  goBackAction
 }) {
   if (!isOpen) return null;
   const drawerContainerRef = useRef4(null);
@@ -8064,7 +8072,10 @@ function Drawer({
       },
       children: [
         /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
-          /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title }),
+          /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
+            goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+            /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
+          ] }),
           /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
         ] }),
         children
@@ -9348,8 +9359,10 @@ var itemStyle = {
   }
 };
 var StyledItem2 = styled("div", __spreadValues({}, itemStyle));
-var BadgeCloseBtn = styled("div", {
-  cursor: "pointer"
+var CloseBtnStyled = styled("button", {
+  cursor: "pointer",
+  background: "none",
+  border: "none"
 });
 var StyledFlexWithMaxHeight = styled(Flex2, {
   variants: {
@@ -9575,6 +9588,7 @@ var MultiSelect = React9.forwardRef(
                         {
                           css: itemStyle,
                           onClick: (e) => handleSelectAll(e),
+                          type: "button",
                           children: [
                             /* @__PURE__ */ jsx26("div", { className: allOptionsSelected ? "checked" : "" }),
                             /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
@@ -9615,13 +9629,13 @@ var MultiSelect = React9.forwardRef(
               css: { flexWrap: "wrap" },
               children: [
                 /* @__PURE__ */ jsx26(
-                  BadgeCloseBtn,
+                  CloseBtnStyled,
                   {
                     onClick: (e) => {
                       e.stopPropagation();
                       handleRemove(value);
                     },
-                    role: "button",
+                    type: "button",
                     children: /* @__PURE__ */ jsx26(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
                   }
                 ),
@@ -11194,7 +11208,8 @@ var QuillEditor = styled("div", {
       marginBottom: 0
     },
     "& h1": {
-      fontSize: "2em"
+      fontSize: "2em",
+      lineHeight: "2em!important"
     },
     "& h2": {
       fontSize: "1.5em"
@@ -12053,6 +12068,17 @@ var QuillComponent = ({
   const videoModalRef = useRef8(null);
   const linkModalRef = useRef8(null);
   const { addToast, removeToast } = useToast();
+  const formatHTML = (html) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    doc.querySelectorAll("h1").forEach((h1) => {
+      h1.setAttribute("style", `${h1.getAttribute("style") || ""}line-height: 2em;`);
+    });
+    doc.querySelectorAll("img").forEach((img) => {
+      img.setAttribute("style", `${img.getAttribute("style") || ""}max-width: 100%; height: auto; width: auto;`);
+    });
+    return doc.body.innerHTML;
+  };
   const modules = simpleVersion ? {
     toolbar: [
       ["bold", "italic", "underline"],
@@ -12115,7 +12141,7 @@ var QuillComponent = ({
         const index = selection ? selection.index : quill.getLength();
         quill.insertEmbed(index, "image", uploadedFile.url);
         quill.setSelection(index + 1, 0);
-        onChange == null ? void 0 : onChange(quill.root.innerHTML);
+        onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
       } catch (error) {
         console.error("Erro no upload:", error);
         addToast({
@@ -12150,7 +12176,7 @@ var QuillComponent = ({
             quill.deleteText(maxLength, count - maxLength);
             return;
           }
-          onChange == null ? void 0 : onChange(quill.root.innerHTML);
+          onChange == null ? void 0 : onChange(formatHTML(quill.root.innerHTML));
           onCharacterCountChange == null ? void 0 : onCharacterCountChange(count);
         }
       });

package/package.json

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

package/src/components/Drawer/index.tsx

@@ -7,8 +7,10 @@ import {
   DrawerHeaderDiv,
   DrawerHeaderTitle,
   DrawerHeaderCloseButton,
+  GoBackButtonStyled,
 } from "./styledComponents";
 import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { Flex } from "../Flex";
 
 export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
   isOpen: boolean;
@@ -17,6 +19,8 @@ export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
   backgroundColor?: keyof Colors;
   title: string;
   children?: ReactNode;
+  goBackIcon?: ReactNode;
+  goBackAction: () => void;
 };
 
 export function Drawer({
@@ -26,6 +30,8 @@ export function Drawer({
   backgroundColor,
   title,
   children,
+  goBackIcon,
+  goBackAction
 }: DrawerProps) {
   if (!isOpen) return null;
   const drawerContainerRef = useRef<HTMLDivElement>(null);
@@ -117,7 +123,10 @@ export function Drawer({
         }}
       >
         <DrawerHeaderDiv>
-          <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
+          <Flex gap={8} align="center">
+            {(goBackIcon && goBackIcon) && <GoBackButtonStyled type="button" onClick={goBackAction}>{goBackIcon}</GoBackButtonStyled>}
+            <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
+          </Flex>
           <DrawerHeaderCloseButton onClick={onClose}>
             <Icon size={"xl"} color="$dark600" name="xmark" />
           </DrawerHeaderCloseButton>

package/src/components/Drawer/styledComponents.ts

@@ -44,3 +44,9 @@ export const DrawerHeaderCloseButton = styled("button", {
   border: "none",
   cursor: "pointer",
 });
+export const GoBackButtonStyled = styled("button", {
+  background: "none",
+  padding: "0",
+  border: "none",
+  cursor: "pointer",
+});

package/src/components/MultiSelect/index.tsx

@@ -11,7 +11,7 @@ import {
 import { colors } from "@lets-events/tokens";
 import { ComponentProps, useMemo } from "react";
 import { Flex } from "../Flex";
-import { BadgeCloseBtn, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
+import { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
 
 export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   placeholder?: string;
@@ -170,6 +170,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                     <ButtonSelectAllStyled
                       css={itemStyle}
                       onClick={(e) => handleSelectAll(e)}
+                      type="button"
                     >
                       <div className={allOptionsSelected ? "checked" : ""}></div>
                       <Text typography="labelSmall">
@@ -216,15 +217,15 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                 align={"center"}
                 css={{ flexWrap: "wrap" }}
               >
-                <BadgeCloseBtn
+                <CloseBtnStyled
                   onClick={(e) => {
                     e.stopPropagation();
                     handleRemove(value);
                   }}
-                  role="button"
+                  type="button"
                 >
                   <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                </BadgeCloseBtn>
+                </CloseBtnStyled>
                 <Text
                   typography={"captionMedium"}
                   fontWeight={"regular"}

package/src/components/MultiSelect/styledComponents.ts

@@ -67,8 +67,10 @@ export const StyledItem = styled("div", {
   ...itemStyle,
 });
 
-export const BadgeCloseBtn = styled("div", {
+export const CloseBtnStyled = styled("button", {
   cursor: "pointer",
+  background: "none",
+  border: "none",
 });
 
 export const StyledFlexWithMaxHeight = styled(Flex, {

package/src/components/RichEditor/QuillComponent.tsx

@@ -26,7 +26,20 @@ const QuillComponent: React.FC<RichEditorProps> = ({
   const videoModalRef = useRef<HTMLDivElement>(null);
   const linkModalRef = useRef<HTMLDivElement>(null);
   const { addToast, removeToast } = useToast();
+  const formatHTML = (html: string) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
 
+    doc.querySelectorAll("h1").forEach((h1) => {
+      h1.setAttribute("style", `${h1.getAttribute("style") || ""}line-height: 2em;`);
+    });
+
+    doc.querySelectorAll("img").forEach((img) => {
+      img.setAttribute("style", `${img.getAttribute("style") || ""}max-width: 100%; height: auto; width: auto;`);
+    });
+
+    return doc.body.innerHTML;
+  };
   const modules = simpleVersion
     ? {
       toolbar: [
@@ -99,7 +112,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
         const index = selection ? selection.index : quill.getLength();
         quill.insertEmbed(index, "image", uploadedFile.url);
         quill.setSelection(index + 1, 0);
-        onChange?.(quill.root.innerHTML);
+        onChange?.(formatHTML(quill.root.innerHTML));
       } catch (error) {
         console.error("Erro no upload:", error);
         addToast({
@@ -132,15 +145,15 @@ const QuillComponent: React.FC<RichEditorProps> = ({
     if (quill) {
       quill.on("text-change", (delta: any, oldDelta: any, source: string) => {
         if (source === "user") {
-          const text = quill.getText().trim();
-          const count = text.length;
+          const text = quill.getText().trim()
+          const count = text.length
 
           if (maxLength !== undefined && count > maxLength) {
-            quill.deleteText(maxLength, count - maxLength);
-            return;
+            quill.deleteText(maxLength, count - maxLength)
+            return
           }
-          onChange?.(quill.root.innerHTML);
-          onCharacterCountChange?.(count);
+          onChange?.(formatHTML(quill.root.innerHTML))
+          onCharacterCountChange?.(count)
         }
       });
 

package/src/components/RichEditor/styledComponents.ts

@@ -89,6 +89,7 @@ export const QuillEditor = styled("div", {
 
     "& h1": {
       fontSize: "2em",
+      lineHeight: '2em!important',
     },
 
     "& h2": {