@lets-events/react 12.0.0 → 12.1.0

package/src/components/FormFields/CalendarFormField.tsx

@@ -19,6 +19,7 @@ export type CalendarFormFieldProps = Omit<
     RegisterOptions<FieldValues, string>,
     "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
   >;
+  allowPastDates?: boolean;
 };
 
 export const CalendarFormField = ({
@@ -29,6 +30,7 @@ export const CalendarFormField = ({
   validationErrorMessage = "Este campo é obrigatório.",
   rules,
   onChange,
+  allowPastDates,
   ...calendarProps
 }: CalendarFormFieldProps) => {
   const handleValidate = useCallback(
@@ -63,7 +65,7 @@ export const CalendarFormField = ({
   };
 
   return (
-    <Flex direction="column">
+    <Flex direction="column" style={{ flex: "1" }}>
       {label && (
         <FormLabel
           name={name}
@@ -80,6 +82,7 @@ export const CalendarFormField = ({
           handleCalendarChange(date);
         }}
         hasError={haveError}
+        allowPastDates={allowPastDates}
         {...calendarProps}
       />
 

package/src/components/FormFields/IdentityDocumentNumberFormField.tsx

@@ -8,11 +8,6 @@ type IdentityDocumentNumberFormFieldProps = {
   validationErrorMessage: string;
 };
 
-const isValidRG = (rg: string): boolean => {
-  const cleaned = rg.replace(/[^\d]/g, "");
-  return /^\d{9}$/.test(cleaned);
-};
-
 export const IdentityDocumentNumberFormField = ({
   name,
   label,
@@ -31,9 +26,11 @@ export const IdentityDocumentNumberFormField = ({
         replacement: { _: /[0-9]/ },
       }}
       validate={(value: string) => {
-        const isEmpty = value.replace(/[^\d]/g, "").length === 0;
+        const cleaned = value.replace(/[^\d]/g, "");
+        const isEmpty = cleaned.length === 0;
         if (!required && isEmpty) return true;
-        return isValidRG(value) || validationErrorMessage;
+        if (cleaned.length >= 3) return true;
+        return false || validationErrorMessage;
       }}
     />
   );

package/src/components/FormFields/MultiSelectFormField.tsx

@@ -10,6 +10,7 @@ export type MultiSelectFormFieldProps = MultiSelectProps & {
   required?: boolean;
   selectedOrientation?: "row" | "column";
   zIndex?: string;
+  maxHeight?: string;
 };
 
 export const MultiSelectFormField = ({
@@ -18,6 +19,7 @@ export const MultiSelectFormField = ({
   required,
   selectedOrientation = "column",
   zIndex,
+  maxHeight,
   ...rest
 }: MultiSelectFormFieldProps) => {
   const { field, fieldState } = useController({
@@ -53,6 +55,7 @@ export const MultiSelectFormField = ({
         color={haveError ? "error" : "default"}
         selectedOrientation={selectedOrientation}
         zIndex={zIndex}
+        maxHeight={maxHeight}
         {...rest}
       />
       <ErrorFormMessage message={errorMsg} />

package/src/components/FormFields/TimePickerFormField.tsx

@@ -62,7 +62,7 @@ export const TimePickerFormField = ({
   };
 
   return (
-    <Flex direction="column">
+    <Flex direction="column" style={{ flex: "1" }}>
       {label && (
         <FormLabel
           name={name}

package/src/components/MultiSelect.tsx

@@ -1,3 +1,4 @@
+import React, { useCallback, useRef, useState } from "react";
 import { DropdownMenu, Theme } from "@radix-ui/themes";
 import { CheckboxGroup, CheckboxItem } from "./CheckboxGroup";
 import { styled } from "../styles";
@@ -9,10 +10,9 @@ import {
   faSquareXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { colors } from "@lets-events/tokens";
-import { ComponentProps, useCallback, useMemo, useRef, useState } from "react";
+import { ComponentProps, useMemo } from "react";
 import { Flex } from "./Flex";
 import { CSS } from "@stitches/react";
-import React from "react";
 
 const StyledContent = styled(DropdownMenu.Content, {
   backgroundColor: "$dark50",
@@ -21,6 +21,9 @@ const StyledContent = styled(DropdownMenu.Content, {
   boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
   boxSizing: "border-box",
   border: "1px solid $dark300",
+  zIndex: 999999,
+  minWidth: "var(--radix-dropdown-menu-trigger-width)",
+  maxWidth: "var(--radix-dropdown-menu-trigger-width)",
 });
 
 const StyledTrigger = styled("div", {
@@ -33,6 +36,7 @@ const StyledTrigger = styled("div", {
   padding: "$6 $14",
   boxSizing: "border-box",
   gap: "4px",
+  width: "100%",
 
   variants: {
     color: {
@@ -77,6 +81,40 @@ const BadgeCloseBtn = styled("div", {
   cursor: "pointer",
 });
 
+const StyledFlexWithMaxHeight = styled(Flex, {
+  variants: {
+    hasMaxHeight: {
+      true: {
+        overflowY: "auto",
+        "&::-webkit-scrollbar": {
+          width: "4px",
+        },
+        "&::-webkit-scrollbar-track": {
+          backgroundColor: "$dark100",
+          borderRadius: "2px",
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: "$dark300",
+          borderRadius: "2px",
+          "&:hover": {
+            backgroundColor: "$dark400",
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    hasMaxHeight: false,
+  },
+});
+const StyledText = styled(Text, {
+  flex: 1,
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+});
+
 export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   placeholder?: string;
   value?: string[];
@@ -91,6 +129,7 @@ export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   singleSelect?: boolean;
   selectedOrientation?: "row" | "column";
   disabled?: boolean;
+  maxHeight?: string;
 };
 
 export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
@@ -107,13 +146,13 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       singleSelect = false,
       selectedOrientation = "column",
       disabled = false,
+      maxHeight,
     },
     fowardedRef
   ) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const triggerRef = useRef<HTMLDivElement>(null);
-
     const labelByValue = useMemo(() => {
       return options.reduce<{ [key: string]: string }>((prev, curr) => {
         return {
@@ -131,8 +170,6 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       [selectedValues, onValueChange]
     );
 
-    const menuWidth = triggerRef.current?.offsetWidth;
-
     const text = useMemo(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
@@ -146,20 +183,21 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       onValueChange?.([v]);
       setIsOpen(false);
     };
+    const handleToggle = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) return;
+        setIsOpen((prev) => !prev);
+      },
+      [disabled]
+    );
 
     return (
       <Theme>
-        <DropdownMenu.Root open={isOpen} onOpenChange={() => setIsOpen(false)}>
-          <DropdownMenu.Trigger
-            onClick={() => {
-              if (disabled) return;
-              setIsOpen(true);
-            }}
-          >
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
             <StyledTrigger
-              css={{
-                width,
-              }}
               ref={(r) => {
                 if (!r) return;
                 triggerRef.current = r;
@@ -172,19 +210,15 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
               }}
               color={color}
               disabled={disabled}
+              style={width !== "100%" ? { width } : undefined}
+              onClick={handleToggle}
             >
-              <Text
+              <StyledText
                 typography={"labelMedium"}
-                css={{
-                  flex: 1,
-                  overflow: "hidden",
-                  whiteSpace: "nowrap",
-                  textOverflow: "ellipsis",
-                }}
                 color={disabled ? "dark400" : undefined}
               >
                 {text}
-              </Text>
+              </StyledText>
               <FontAwesomeIcon
                 icon={isOpen ? faChevronUp : faChevronDown}
                 size="sm"
@@ -194,8 +228,8 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
           </DropdownMenu.Trigger>
           <StyledContent
             css={{
-              width: menuWidth ? menuWidth + "px" : width,
-              zIndex,
+              width: "100%",
+              zIndex: zIndex === "auto" ? 999999 : zIndex,
             }}
           >
             {!singleSelect ? (
@@ -205,22 +239,32 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                   onValueChange?.(v);
                 }}
               >
-                <Flex direction={"column"} gap={8}>
+                <StyledFlexWithMaxHeight
+                  direction={"column"}
+                  gap={8}
+                  hasMaxHeight={!!maxHeight}
+                  style={maxHeight ? { maxHeight } : undefined}
+                >
                   {options.map(({ value, label }, i) => (
                     <CheckboxItem value={value} css={itemStyle} key={i}>
                       <Text typography={"labelSmall"}>{label}</Text>
                     </CheckboxItem>
                   ))}
-                </Flex>
+                </StyledFlexWithMaxHeight>
               </CheckboxGroup>
             ) : (
-              <Flex direction={"column"} gap={8}>
+              <StyledFlexWithMaxHeight
+                direction={"column"}
+                gap={8}
+                hasMaxHeight={!!maxHeight}
+                style={maxHeight ? { maxHeight } : undefined}
+              >
                 {options.map(({ value, label }, i) => (
                   <StyledItem key={i} onClick={() => handleItemClick(value)}>
                     <Text typography={"labelSmall"}>{label}</Text>
                   </StyledItem>
                 ))}
-              </Flex>
+              </StyledFlexWithMaxHeight>
             )}
           </StyledContent>
         </DropdownMenu.Root>
@@ -229,34 +273,35 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
             <Flex
               direction={selectedOrientation}
               gap={8}
-              align={"center"}
+              align={selectedOrientation === "column" ? "start" : "center"}
               justify={"start"}
-              css={{
-                margin: "8px 0",
-              }}
+              css={{ margin: "8px 0" }}
             >
-              {selectedValues.map((value) => {
-                return (
-                  <Flex gap={4} align={"center"} css={{ flexWrap: "wrap" }}>
-                    <BadgeCloseBtn
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleRemove(value);
-                      }}
-                      role="button"
-                    >
-                      <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                    </BadgeCloseBtn>
-                    <Text
-                      typography={"captionMedium"}
-                      fontWeight={"regular"}
-                      color="dark600"
-                    >
-                      {labelByValue[value]}
-                    </Text>
-                  </Flex>
-                );
-              })}
+              {selectedValues.map((value) => (
+                <Flex
+                  key={value}
+                  gap={4}
+                  align={"center"}
+                  css={{ flexWrap: "wrap" }}
+                >
+                  <BadgeCloseBtn
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemove(value);
+                    }}
+                    role="button"
+                  >
+                    <FontAwesomeIcon icon={faSquareXmark} size="sm" />
+                  </BadgeCloseBtn>
+                  <Text
+                    typography={"captionMedium"}
+                    fontWeight={"regular"}
+                    color="dark600"
+                  >
+                    {labelByValue[value]}
+                  </Text>
+                </Flex>
+              ))}
             </Flex>
           </>
         )}

package/src/components/RichEditor/QuillComponent.tsx

@@ -152,10 +152,8 @@ const QuillComponent: React.FC<QuillComponentProps> = ({
           const headerSelect = toolbarElement.querySelector(
             "select[data-value]"
           ) as HTMLSelectElement;
-          console.log(headerSelect, "headerSelect");
           if (headerSelect) {
             const options = headerSelect.querySelectorAll("option");
-            console.log(options, "options");
             options.forEach((option) => {
               if (option.value === "1") {
                 option.textContent = "Título 1";
@@ -167,7 +165,7 @@ const QuillComponent: React.FC<QuillComponentProps> = ({
             });
           }
         }
-      }, 100);
+      }, 2000);
     }
   }, [quill, onChange, handleImageUpload]);
 

package/src/components/TimePicker.tsx

@@ -12,19 +12,25 @@ export const TimePickerStyled = styled("div", {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
-  maxWidth: "200px",
   borderRadius: "$sm",
   "> div > div": {
-    paddingLeft: "1rem",
     input: {
       textAlign: "right",
     },
   },
+  variants: {
+    expand: {
+      true: {
+        width: "100%",
+        flex: "1",
+        display: "flex",
+      },
+    },
+  },
 });
 
 export const TimePickerDropdownStyled = styled("div", {
   position: "absolute",
-  left: 0,
   zIndex: 10,
   width: "100%",
   maxWidth: "8.875rem",
@@ -98,22 +104,30 @@ export const InputStyled = styled("input", {
 export const TimePickerButtonStyled = styled("button", {
   backgroundColor: "transparent",
   border: "none",
-  maxWidth: "200px",
   padding: "0",
   cursor: "pointer",
   "> div > div": {
-    paddingLeft: "1rem",
     input: {
       textAlign: "right",
     },
   },
+  variants: {
+    expand: {
+      true: {
+        flex: "1",
+        display: "flex",
+        maxWidth: "100%",
+      },
+    },
+  },
 });
 
 export type TimePickerProps = {
   selected: string | undefined;
   setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
-  position?: "bottom" | "top";
+  position?: "bottom" | "top" | "top-right" | "bottom-right";
   hasError?: boolean;
+  expand?: boolean;
 };
 const pad = (num: number) => String(num).padStart(2, "0");
 
@@ -122,6 +136,7 @@ export function TimePicker({
   setSelected,
   position = "bottom",
   hasError,
+  expand = false,
 }: TimePickerProps) {
   const [hours, setHours] = useState("00");
   const [minutes, setMinutes] = useState("00");
@@ -162,10 +177,11 @@ export function TimePicker({
   );
 
   return (
-    <TimePickerStyled ref={dropdownRef}>
+    <TimePickerStyled ref={dropdownRef} expand={expand}>
       <TimePickerButtonStyled
         type="button"
         onClick={() => setIsOpen((prev) => !prev)}
+        expand={expand}
       >
         <TextField
           value={selected}
@@ -184,7 +200,15 @@ export function TimePicker({
 
       {isOpen && (
         <TimePickerDropdownStyled
-          style={position === "top" ? { bottom: "110%" } : { top: "110%" }}
+          style={
+            position === "top"
+              ? { bottom: "110%", left: "0" }
+              : position === "top-right"
+              ? { bottom: "110%", right: "0" }
+              : position === "bottom-right"
+              ? { top: "110%", right: "0" }
+              : { top: "110%", left: "0" }
+          }
         >
           <TimerPickerContentStyled>
             {["hours", "minutes"].map((unit) => (

package/src/hooks/useOnClickOutside.tsx

@@ -1,12 +1,34 @@
 import { useEffect } from "react";
 
-export function useOnClickOutside(ref: any, handler: () => void) {
+export function useOnClickOutside(
+  ref: any,
+  handler: (event?: MouseEvent | TouchEvent) => void
+) {
   useEffect(() => {
     const listener = (event: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(event.target)) {
+      if (!ref?.current || !event.target) {
         return;
       }
-      handler();
+
+      const target = event.target as Element;
+      const currentTarget = event.currentTarget as Element;
+
+      if (ref.current.contains(target) || ref.current.contains(currentTarget)) {
+        return;
+      }
+
+      if (target.tagName === "HTML" || target.tagName === "BODY") {
+        const elementAtPoint = document.elementFromPoint(
+          (event as MouseEvent).clientX,
+          (event as MouseEvent).clientY
+        );
+
+        if (elementAtPoint && ref.current.contains(elementAtPoint)) {
+          return;
+        }
+      }
+
+      handler(event);
     };
 
     document.addEventListener("mousedown", listener);