@lets-events/react 11.6.3 → 11.6.5

package/src/components/Dropdown.tsx

@@ -1,21 +1,28 @@
-import { useState, ComponentProps, ElementType } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  ElementType,
+  ReactNode,
+  KeyboardEvent,
+  MouseEvent,
+} from "react";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
-import { Theme, DropdownMenu as DropdownMenuRadix } from "@radix-ui/themes";
 import { typographyLabelValues } from "../types/typographyValues";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { colors } from "@lets-events/tokens";
 import { styled } from "../styles";
 
-const DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
+const DropdownMenuItemStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
   padding: "$8 $16",
+  cursor: "pointer",
   "&:hover, &:focus": {
     backgroundColor: "$dark100",
     border: "none",
     outline: "none",
-    cursor: "pointer",
   },
   variants: {
     typography: typographyLabelValues,
@@ -29,16 +36,18 @@ const DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
 });
 
 const DropdownMenuStyled = styled("div", {
+  boxSizing: "border-box",
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
   cursor: "pointer",
   border: "1px solid $dark300",
   borderRadius: "$xs",
-  padding: "$8 $12",
-  width: "100%",
+  maxWidth: "100%",
   display: "flex",
+  position: "relative",
   button: {
+    boxSizing: "border-box",
     fontFamily: "$default",
     color: "$dark600",
     letterSpacing: "0px",
@@ -49,6 +58,7 @@ const DropdownMenuStyled = styled("div", {
     display: "flex",
     alignItems: "center",
     gap: "$8",
+    padding: "$8 $12",
     cursor: "pointer",
     svg: {
       marginLeft: "auto",
@@ -98,94 +108,192 @@ const DropdownMenuStyled = styled("div", {
   },
 });
 
-const DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
+const DropdownMenuContentStyled = styled("div", {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  width: "100%",
   background: "white",
   border: "1px solid $dark300",
   borderRadius: "$xs",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "100%",
-  minWidth: "100%",
   marginTop: "3px",
   maxHeight: "400px",
-  height: "100%",
-  position: "relative",
   overflow: "auto",
   zIndex: 9999999999,
 });
 
-export type DropdownMenuProps = ComponentProps<
-  typeof DropdownMenuRadix.Root
-> & {
+export type DropdownMenuProps = {
   as?: ElementType;
   placeholder?: string;
   fontWeight: "regular" | "medium" | "semibold" | "bold";
   typography: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
-  children: React.ReactNode;
+  children: ReactNode;
   color?: "default" | "error";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
 };
 
-export type DropdownMenuItemProps = ComponentProps<
-  typeof DropdownMenuItemStyled
-> & {
+export type DropdownMenuItemProps = {
   as?: ElementType;
   value: string;
   typography: DropdownMenuProps["typography"];
   fontWeight: DropdownMenuProps["fontWeight"];
+  children: ReactNode;
+  onSelect?: (value: string) => void;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
 
-/* Componente principal */
 export function DropdownMenu({
   children,
   placeholder,
   typography,
-  color,
+  color = "default",
   fontWeight,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
   ...props
 }: DropdownMenuProps) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const handleToggle = () => {
+    const newOpen = !isOpen;
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+
+  const handleClose = () => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: Event) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        handleClose();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape as any);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape as any);
+    };
+  }, [isOpen]);
+
   return (
-    <Theme>
-      <DropdownMenuRadix.Root open={isOpen} onOpenChange={setIsOpen} {...props}>
-        <DropdownMenuStyled
-          typography={typography}
-          fontWeight={fontWeight}
-          color={color}
-        >
-          <DropdownMenuRadix.Trigger>
-            <button aria-label={placeholder || "Filtrar"}>
-              <span>{placeholder || "Filtrar"}</span>
-              <FontAwesomeIcon
-                icon={isOpen ? faChevronUp : faChevronDown}
-                size="sm"
-                color={colors.dark600}
-              />
-            </button>
-          </DropdownMenuRadix.Trigger>
-          <DropdownMenuContentStyled
-            container={document.body}
-            avoidCollisions={false}
-            align="start"
-            alignOffset={-14}
-          >
-            <DropdownMenuRadix.Group>{children}</DropdownMenuRadix.Group>
-          </DropdownMenuContentStyled>
-        </DropdownMenuStyled>
-      </DropdownMenuRadix.Root>
-    </Theme>
+    <DropdownMenuStyled
+      ref={dropdownRef}
+      typography={typography}
+      fontWeight={fontWeight}
+      color={color}
+      {...props}
+    >
+      <button
+        aria-label={placeholder || "Filtrar"}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        onClick={handleToggle}
+        type="button"
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleToggle();
+          }
+        }}
+      >
+        <span>{placeholder || "Filtrar"}</span>
+        <FontAwesomeIcon
+          icon={isOpen ? faChevronUp : faChevronDown}
+          size="sm"
+          color={colors.dark600}
+        />
+      </button>
+
+      {isOpen && (
+        <DropdownMenuContentStyled role="listbox">
+          <DropdownMenuProvider onItemSelect={handleClose}>
+            {children}
+          </DropdownMenuProvider>
+        </DropdownMenuContentStyled>
+      )}
+    </DropdownMenuStyled>
+  );
+}
+
+const DropdownMenuContext = React.createContext<{
+  onItemSelect: () => void;
+} | null>(null);
+
+function DropdownMenuProvider({
+  children,
+  onItemSelect,
+}: {
+  children: ReactNode;
+  onItemSelect: () => void;
+}) {
+  return (
+    <DropdownMenuContext.Provider value={{ onItemSelect }}>
+      {children}
+    </DropdownMenuContext.Provider>
   );
 }
 
-/* Componente de item */
 export function DropdownMenuItem({
   children,
   typography,
   fontWeight,
+  value,
+  onSelect,
+  onClick,
   ...props
 }: DropdownMenuItemProps) {
+  const context = React.useContext(DropdownMenuContext);
+
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+    onClick?.(event);
+    onSelect?.(value);
+    context?.onItemSelect();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect?.(value);
+      context?.onItemSelect();
+    }
+  };
+
   return (
     <DropdownMenuItemStyled
       typography={typography}
       fontWeight={fontWeight}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="option"
       {...props}
     >
       {children}

package/src/components/FormFields/PhoneFormField.tsx

@@ -2,89 +2,89 @@ import { useController, useFormContext } from "react-hook-form";
 import { Flex } from "../Flex";
 import { FormLabel } from "./FormLabel";
 import { ErrorFormMessage } from "./ErrorFormMessage";
-import { PhoneInput, PhoneInputProps } from "react-international-phone";
+// import { PhoneInput, PhoneInputProps } from "react-international-phone";
 import { styled } from "../../styles";
 import { typographyValues } from "../../types/typographyValues";
-import "react-international-phone/style.css";
+// import "react-international-phone/style.css";
 
-export type PhoneFormFieldProps = PhoneInputProps & {
+export type PhoneFormFieldProps =  {
   name: string;
   label?: string;
   required?: boolean;
   defaultCountry?: string;
 };
-const PhoneFormInput = styled(PhoneInput, {
-  $$borderColor: "$colors$neutral300",
-  boxSizing: "border-box",
-  borderRadius: "$sm",
-  display: "flex",
-  flex: 1,
-  fontFamily: "$default",
-  color: "$dark500",
+// const PhoneFormInput = styled(PhoneInput, {
+//   $$borderColor: "$colors$neutral300",
+//   boxSizing: "border-box",
+//   borderRadius: "$sm",
+//   display: "flex",
+//   flex: 1,
+//   fontFamily: "$default",
+//   color: "$dark500",
 
-  img: {
-    width: "$18",
-    height: "$18",
-    marginLeft: "$8",
-  },
-  ul: {
-    border: "none",
-  },
-  input: {
-    height: "$40 !important",
-    flex: 1,
-    borderColor: "$$borderColor  !important",
-    borderTopRightRadius: "$sm !important",
-    borderBottomRightRadius: "$sm !important",
-    fontSize: "inherit !important",
-    "&:focus": {
-      $$borderColor: "$colors$brand300",
-    },
-  },
-  button: {
-    height: "$40 !important",
-    borderRight: "none",
-    borderTopLeftRadius: "$sm !important",
-    borderBottomLeftRadius: "$sm !important",
-    borderColor: "$$borderColor  !important",
-    marginRight: "0 !important",
-    "&:active": {
-      $$borderColor: "$colors$brand300",
-    },
-    div: {
-      padding: "auto $12",
-      gap: " $8px",
-    },
-  },
+//   img: {
+//     width: "$18",
+//     height: "$18",
+//     marginLeft: "$8",
+//   },
+//   ul: {
+//     border: "none",
+//   },
+//   input: {
+//     height: "$40 !important",
+//     flex: 1,
+//     borderColor: "$$borderColor  !important",
+//     borderTopRightRadius: "$sm !important",
+//     borderBottomRightRadius: "$sm !important",
+//     fontSize: "inherit !important",
+//     "&:focus": {
+//       $$borderColor: "$colors$brand300",
+//     },
+//   },
+//   button: {
+//     height: "$40 !important",
+//     borderRight: "none",
+//     borderTopLeftRadius: "$sm !important",
+//     borderBottomLeftRadius: "$sm !important",
+//     borderColor: "$$borderColor  !important",
+//     marginRight: "0 !important",
+//     "&:active": {
+//       $$borderColor: "$colors$brand300",
+//     },
+//     div: {
+//       padding: "auto $12",
+//       gap: " $8px",
+//     },
+//   },
 
-  "&:has(input:disabled)": {
-    backgroundColor: "$dark100",
-    color: "$dark400",
-    $$borderColor: "$colors$dark200",
-    cursor: "not-allowed",
-    img: {
-      opacity: 0.6,
-    },
-    button: {
-      $$borderColor: "$colors$dark200",
-    },
-  },
-  variants: {
-    typography: typographyValues,
-    color: {
-      default: {
-        $$borderColor: "$colors$neutral300",
-      },
-      error: {
-        $$borderColor: "$colors$error600",
-      },
-    },
-  },
-  defaultVariants: {
-    typography: "labelSmall",
-    color: "default",
-  },
-});
+//   "&:has(input:disabled)": {
+//     backgroundColor: "$dark100",
+//     color: "$dark400",
+//     $$borderColor: "$colors$dark200",
+//     cursor: "not-allowed",
+//     img: {
+//       opacity: 0.6,
+//     },
+//     button: {
+//       $$borderColor: "$colors$dark200",
+//     },
+//   },
+//   variants: {
+//     typography: typographyValues,
+//     color: {
+//       default: {
+//         $$borderColor: "$colors$neutral300",
+//       },
+//       error: {
+//         $$borderColor: "$colors$error600",
+//       },
+//     },
+//   },
+//   defaultVariants: {
+//     typography: "labelSmall",
+//     color: "default",
+//   },
+// });
 
 export const PhoneFormField = ({
   name,
@@ -115,7 +115,7 @@ export const PhoneFormField = ({
         required={required}
         haveError={haveError}
       />
-      <PhoneFormInput
+      {/* <PhoneFormInput
         {...register(name, { required })}
         defaultCountry={defaultCountry}
         value={watch(name)}
@@ -123,7 +123,7 @@ export const PhoneFormField = ({
         onChange={handlePhoneChange}
         {...props}
         aria-labelledby={`${name}-label`}
-      />
+      /> */}
       <ErrorFormMessage message={errorMsg} />
     </Flex>
   );