@lets-events/react 12.10.10 → 12.10.12

package/src/components/Dropdown.tsx

@@ -1,302 +1,302 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  ElementType,
-  ReactNode,
-  KeyboardEvent,
-  MouseEvent,
-} from "react";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
-import { typographyLabelValues } from "../types/typographyValues";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { colors } from "@lets-events/tokens";
-import { styled } from "../styles";
-
-const DropdownMenuItemStyled = styled("div", {
-  fontFamily: "$default",
-  color: "$dark600",
-  letterSpacing: "0px",
-  padding: "$8 $16",
-  cursor: "pointer",
-  "&:hover, &:focus": {
-    backgroundColor: "$dark100",
-    border: "none",
-    outline: "none",
-  },
-  variants: {
-    typography: typographyLabelValues,
-    fontWeight: {
-      regular: { fontWeight: "$regular" },
-      medium: { fontWeight: "$medium" },
-      semibold: { fontWeight: "$semibold" },
-      bold: { fontWeight: "$bold" },
-    },
-  },
-});
-
-const DropdownMenuStyled = styled("div", {
-  boxSizing: "border-box",
-  fontFamily: "$default",
-  color: "$dark600",
-  letterSpacing: "0px",
-  cursor: "pointer",
-  border: "1px solid $dark300",
-  borderRadius: "$xs",
-  maxWidth: "100%",
-  display: "flex",
-  position: "relative",
-  button: {
-    boxSizing: "border-box",
-    fontFamily: "$default",
-    color: "$dark600",
-    letterSpacing: "0px",
-    backgroundColor: "transparent",
-    border: "none",
-    width: "100%",
-    outline: "none",
-    display: "flex",
-    alignItems: "center",
-    gap: "$8",
-    padding: "$8 $12",
-    cursor: "pointer",
-    svg: {
-      marginLeft: "auto",
-    },
-  },
-  variants: {
-    typography: {
-      labelLarge: {
-        button: {
-          fontSize: "$labelLarge",
-          lineHeight: "$labelLarge",
-        },
-      },
-      labelMedium: {
-        button: {
-          fontSize: "$labelMedium",
-          lineHeight: "$labelMedium",
-        },
-      },
-      labelSmall: {
-        button: {
-          fontSize: "$labelSmall",
-          lineHeight: "$labelSmall",
-        },
-      },
-      labelExtraSmall: {
-        button: {
-          fontSize: "$labelExtraSmall",
-          lineHeight: "$labelExtraSmall",
-        },
-      },
-    },
-    fontWeight: {
-      regular: { button: { fontWeight: "$regular" } },
-      medium: { button: { fontWeight: "$medium" } },
-      semibold: { button: { fontWeight: "$semibold" } },
-      bold: { button: { fontWeight: "$bold" } },
-    },
-    color: {
-      default: {
-        border: "1px solid $dark300",
-      },
-      error: {
-        border: "1px solid $error400",
-      },
-    },
-  },
-});
-
-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)",
-  marginTop: "3px",
-  maxHeight: "400px",
-  overflow: "auto",
-  zIndex: 9999999999,
-});
-
-export type DropdownMenuProps = {
-  as?: ElementType;
-  placeholder?: string;
-  fontWeight: "regular" | "medium" | "semibold" | "bold";
-  typography: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
-  children: ReactNode;
-  color?: "default" | "error";
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  defaultOpen?: boolean;
-};
-
-export type DropdownMenuItemProps = {
-  as?: ElementType;
-  value: string;
-  typography: DropdownMenuProps["typography"];
-  fontWeight: DropdownMenuProps["fontWeight"];
-  children: ReactNode;
-  onSelect?: (value: string) => void;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-};
-
-export function DropdownMenu({
-  children,
-  placeholder,
-  typography,
-  color = "default",
-  fontWeight,
-  open: controlledOpen,
-  onOpenChange,
-  defaultOpen = false,
-  ...props
-}: DropdownMenuProps) {
-  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 (
-    <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>
-  );
-}
-
-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}
-    </DropdownMenuItemStyled>
-  );
-}
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  ElementType,
+  ReactNode,
+  KeyboardEvent,
+  MouseEvent,
+} from "react";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { typographyLabelValues } from "../types/typographyValues";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { colors } from "@lets-events/tokens";
+import { styled } from "../styles";
+
+const DropdownMenuItemStyled = styled("div", {
+  fontFamily: "$default",
+  color: "$dark600",
+  letterSpacing: "0px",
+  padding: "$8 $16",
+  cursor: "pointer",
+  "&:hover, &:focus": {
+    backgroundColor: "$dark100",
+    border: "none",
+    outline: "none",
+  },
+  variants: {
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
+    },
+  },
+});
+
+const DropdownMenuStyled = styled("div", {
+  boxSizing: "border-box",
+  fontFamily: "$default",
+  color: "$dark600",
+  letterSpacing: "0px",
+  cursor: "pointer",
+  border: "1px solid $dark300",
+  borderRadius: "$xs",
+  maxWidth: "100%",
+  display: "flex",
+  position: "relative",
+  button: {
+    boxSizing: "border-box",
+    fontFamily: "$default",
+    color: "$dark600",
+    letterSpacing: "0px",
+    backgroundColor: "transparent",
+    border: "none",
+    width: "100%",
+    outline: "none",
+    display: "flex",
+    alignItems: "center",
+    gap: "$8",
+    padding: "$8 $12",
+    cursor: "pointer",
+    svg: {
+      marginLeft: "auto",
+    },
+  },
+  variants: {
+    typography: {
+      labelLarge: {
+        button: {
+          fontSize: "$labelLarge",
+          lineHeight: "$labelLarge",
+        },
+      },
+      labelMedium: {
+        button: {
+          fontSize: "$labelMedium",
+          lineHeight: "$labelMedium",
+        },
+      },
+      labelSmall: {
+        button: {
+          fontSize: "$labelSmall",
+          lineHeight: "$labelSmall",
+        },
+      },
+      labelExtraSmall: {
+        button: {
+          fontSize: "$labelExtraSmall",
+          lineHeight: "$labelExtraSmall",
+        },
+      },
+    },
+    fontWeight: {
+      regular: { button: { fontWeight: "$regular" } },
+      medium: { button: { fontWeight: "$medium" } },
+      semibold: { button: { fontWeight: "$semibold" } },
+      bold: { button: { fontWeight: "$bold" } },
+    },
+    color: {
+      default: {
+        border: "1px solid $dark300",
+      },
+      error: {
+        border: "1px solid $error400",
+      },
+    },
+  },
+});
+
+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)",
+  marginTop: "3px",
+  maxHeight: "400px",
+  overflow: "auto",
+  zIndex: 9999999999,
+});
+
+export type DropdownMenuProps = {
+  as?: ElementType;
+  placeholder?: string;
+  fontWeight: "regular" | "medium" | "semibold" | "bold";
+  typography: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
+  children: ReactNode;
+  color?: "default" | "error";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+};
+
+export type DropdownMenuItemProps = {
+  as?: ElementType;
+  value: string;
+  typography: DropdownMenuProps["typography"];
+  fontWeight: DropdownMenuProps["fontWeight"];
+  children: ReactNode;
+  onSelect?: (value: string) => void;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+};
+
+export function DropdownMenu({
+  children,
+  placeholder,
+  typography,
+  color = "default",
+  fontWeight,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  ...props
+}: DropdownMenuProps) {
+  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 (
+    <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>
+  );
+}
+
+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}
+    </DropdownMenuItemStyled>
+  );
+}