@lets-events/react 12.2.9 → 12.2.11

package/src/components/Drawer/index.tsx

@@ -1,138 +1,148 @@
-import { ComponentProps, ReactNode, useRef } from "react";
-import { colors, Colors } from "@lets-events/tokens";
-import Icon from "../Icon";
-import {
-  DrawerOverlayStyled,
-  DrawerContainerStyled,
-  DrawerHeaderDiv,
-  DrawerHeaderTitle,
-  DrawerHeaderCloseButton,
-  GoBackButtonStyled,
-} from "./styledComponents";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
-import { Flex } from "../Flex";
-
-export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
-  isOpen: boolean;
-  onClose: () => void;
-  width?: string;
-  backgroundColor?: keyof Colors;
-  title: string;
-  children?: ReactNode;
-  goBackIcon?: ReactNode;
-  goBackAction?: () => void;
-};
-
-export function Drawer({
-  isOpen,
-  onClose,
-  width,
-  backgroundColor,
-  title,
-  children,
-  goBackIcon,
-  goBackAction
-}: DrawerProps) {
-  if (!isOpen) return null;
-  const drawerContainerRef = useRef<HTMLDivElement>(null);
-
-  useOnClickOutside(drawerContainerRef, (event?: MouseEvent | TouchEvent) => {
-    if (!event || !drawerContainerRef.current) {
-      return;
-    }
-
-    let target = event.target as Element;
-
-    if (target.tagName === "HTML" || target.tagName === "BODY") {
-      if (event instanceof MouseEvent) {
-        const actualElement = document.elementFromPoint(
-          event.clientX,
-          event.clientY
-        );
-        if (actualElement) {
-          target = actualElement;
-        }
-      }
-    }
-
-    let currentElement: Element | null = target;
-    let hierarchy = [];
-    while (currentElement && currentElement !== document.body) {
-      hierarchy.push({
-        tagName: currentElement.tagName,
-        className: currentElement.className,
-        id: currentElement.id,
-        attributes: Array.from(currentElement.attributes || []).map((attr) => ({
-          name: attr.name,
-          value: attr.value,
-        })),
-      });
-      currentElement = currentElement.parentElement;
-    }
-
-    if (drawerContainerRef.current?.contains(target)) {
-      return;
-    }
-    const isDropdownOpen =
-      target.closest("[data-radix-popper-content-wrapper]") ||
-      target.closest('[role="dialog"]') ||
-      target.closest('[data-state="open"]') ||
-      target.closest("[data-radix-dropdown-menu-content]") ||
-      target.closest("[data-radix-dropdown-menu-root]") ||
-      target.closest("[data-radix-dropdown-menu-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-portal]") ||
-      target.closest("[data-radix-dropdown-menu-item]") ||
-      target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
-      target.closest("[data-radix-dropdown-menu-radio-item]") ||
-      target.closest("[data-radix-dropdown-menu-separator]") ||
-      target.closest("[data-radix-dropdown-menu-label]") ||
-      target.closest("[data-radix-dropdown-menu-group]") ||
-      target.closest("[data-radix-dropdown-menu-sub]") ||
-      target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-sub-content]") ||
-      target.closest("[data-radix-dropdown-menu-radio-group]");
-
-    const shouldPreventClose =
-      isDropdownOpen ||
-      target.closest("[data-radix-dropdown-menu-root]") ||
-      target.closest("[data-radix-dropdown-menu-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-content]") ||
-      target.closest("[data-radix-dropdown-menu-portal]") ||
-      target.closest("[data-radix-dropdown-menu-item]") ||
-      target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
-      target.closest("[data-radix-dropdown-menu-radio-item]") ||
-      target.closest("[data-radix-dropdown-menu-separator]") ||
-      target.closest("[data-radix-dropdown-menu-label]") ||
-      target.closest("[data-radix-dropdown-menu-group]") ||
-      target.closest("[data-radix-dropdown-menu-sub]") ||
-      target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-sub-content]") ||
-      target.closest("[data-radix-dropdown-menu-radio-group]");
-
-    if (!shouldPreventClose) {
-      onClose();
-    }
-  });
-  return (
-    <DrawerOverlayStyled>
-      <DrawerContainerStyled
-        ref={drawerContainerRef}
-        style={{
-          width: width ?? "34.25rem",
-          backgroundColor: colors[backgroundColor ?? "neutral50"],
-        }}
-      >
-        <DrawerHeaderDiv>
-          <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>
-        </DrawerHeaderDiv>
-        {children}
-      </DrawerContainerStyled>
-    </DrawerOverlayStyled>
-  );
-}
+import { ComponentProps, ReactNode, useRef } from "react";
+import { colors, Colors } from "@lets-events/tokens";
+import Icon from "../Icon";
+import {
+  DrawerOverlayStyled,
+  DrawerContainerStyled,
+  DrawerHeaderDiv,
+  DrawerHeaderTitle,
+  DrawerHeaderCloseButton,
+  GoBackButtonStyled,
+} from "./styledComponents";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { Flex } from "../Flex";
+
+export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
+  isOpen: boolean;
+  onClose: () => void;
+  width?: string;
+  backgroundColor?: keyof Colors;
+  title: string;
+  children?: ReactNode;
+  goBackIcon?: ReactNode;
+  goBackAction?: () => void;
+  zIndex?: number;
+};
+
+export function Drawer({
+  isOpen,
+  onClose,
+  width,
+  backgroundColor,
+  title,
+  children,
+  goBackIcon,
+  goBackAction,
+  zIndex,
+}: DrawerProps) {
+  if (!isOpen) return null;
+  const drawerContainerRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(drawerContainerRef, (event?: MouseEvent | TouchEvent) => {
+    if (!event || !drawerContainerRef.current) {
+      return;
+    }
+
+    let target = event.target as Element;
+
+    if (target.tagName === "HTML" || target.tagName === "BODY") {
+      if (event instanceof MouseEvent) {
+        const actualElement = document.elementFromPoint(
+          event.clientX,
+          event.clientY
+        );
+        if (actualElement) {
+          target = actualElement;
+        }
+      }
+    }
+
+    let currentElement: Element | null = target;
+    let hierarchy = [];
+    while (currentElement && currentElement !== document.body) {
+      hierarchy.push({
+        tagName: currentElement.tagName,
+        className: currentElement.className,
+        id: currentElement.id,
+        attributes: Array.from(currentElement.attributes || []).map((attr) => ({
+          name: attr.name,
+          value: attr.value,
+        })),
+      });
+      currentElement = currentElement.parentElement;
+    }
+
+    if (drawerContainerRef.current?.contains(target)) {
+      return;
+    }
+    const isDropdownOpen =
+      target.closest("[data-radix-popper-content-wrapper]") ||
+      target.closest('[role="dialog"]') ||
+      target.closest('[data-state="open"]') ||
+      target.closest("[data-radix-dropdown-menu-content]") ||
+      target.closest("[data-radix-dropdown-menu-root]") ||
+      target.closest("[data-radix-dropdown-menu-trigger]") ||
+      target.closest("[data-radix-dropdown-menu-portal]") ||
+      target.closest("[data-radix-dropdown-menu-item]") ||
+      target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
+      target.closest("[data-radix-dropdown-menu-radio-item]") ||
+      target.closest("[data-radix-dropdown-menu-separator]") ||
+      target.closest("[data-radix-dropdown-menu-label]") ||
+      target.closest("[data-radix-dropdown-menu-group]") ||
+      target.closest("[data-radix-dropdown-menu-sub]") ||
+      target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
+      target.closest("[data-radix-dropdown-menu-sub-content]") ||
+      target.closest("[data-radix-dropdown-menu-radio-group]");
+
+    const shouldPreventClose =
+      isDropdownOpen ||
+      target.closest("[data-radix-dropdown-menu-root]") ||
+      target.closest("[data-radix-dropdown-menu-trigger]") ||
+      target.closest("[data-radix-dropdown-menu-content]") ||
+      target.closest("[data-radix-dropdown-menu-portal]") ||
+      target.closest("[data-radix-dropdown-menu-item]") ||
+      target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
+      target.closest("[data-radix-dropdown-menu-radio-item]") ||
+      target.closest("[data-radix-dropdown-menu-separator]") ||
+      target.closest("[data-radix-dropdown-menu-label]") ||
+      target.closest("[data-radix-dropdown-menu-group]") ||
+      target.closest("[data-radix-dropdown-menu-sub]") ||
+      target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
+      target.closest("[data-radix-dropdown-menu-sub-content]") ||
+      target.closest("[data-radix-dropdown-menu-radio-group]");
+
+    if (!shouldPreventClose) {
+      onClose?.();
+    }
+  });
+  return (
+    <DrawerOverlayStyled
+      css={{
+        zIndex,
+      }}
+    >
+      <DrawerContainerStyled
+        ref={drawerContainerRef}
+        style={{
+          width: width ?? "34.25rem",
+          backgroundColor: colors[backgroundColor ?? "neutral50"],
+        }}
+      >
+        <DrawerHeaderDiv>
+          <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>
+        </DrawerHeaderDiv>
+        {children}
+      </DrawerContainerStyled>
+    </DrawerOverlayStyled>
+  );
+}

package/src/components/Drawer/styledComponents.ts

@@ -1,52 +1,52 @@
-import { styled } from "../../styles";
-
-export const DrawerOverlayStyled = styled("div", {
-  position: "fixed",
-  top: 0,
-  right: 0,
-  width: "100vw",
-  height: "100vh",
-  background: "rgba(0, 0, 0, 0.4)",
-  zIndex: 1000,
-});
-
-export const DrawerContainerStyled = styled("div", {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  maxWidth: "calc(100% - 2rem)",
-  height: "100%",
-  background: "$neutral50",
-  display: "flex",
-  flexDirection: "column",
-  boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
-  padding: "1.5rem 0",
-  overflowY: "auto",
-});
-
-export const DrawerHeaderDiv = styled("div", {
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  borderBottom: "1px solid $neutral300",
-  padding: "0 1.5rem 1rem",
-  position: "relative",
-});
-export const DrawerHeaderTitle = styled("h2", {
-  fontSize: "1.125rem",
-  fontWeight: "400",
-  fontFamily: "Work Sans",
-  color: "$dark800",
-  margin: "0",
-});
-export const DrawerHeaderCloseButton = styled("button", {
-  background: "none",
-  border: "none",
-  cursor: "pointer",
-});
-export const GoBackButtonStyled = styled("button", {
-  background: "none",
-  padding: "0",
-  border: "none",
-  cursor: "pointer",
-});
+import { styled } from "../../styles";
+
+export const DrawerOverlayStyled = styled("div", {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  width: "100vw",
+  height: "100vh",
+  background: "rgba(0, 0, 0, 0.4)",
+  zIndex: 1000,
+});
+
+export const DrawerContainerStyled = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  maxWidth: "calc(100% - 2rem)",
+  height: "100%",
+  background: "$neutral50",
+  display: "flex",
+  flexDirection: "column",
+  boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
+  padding: "1.5rem 0",
+  overflowY: "auto",
+});
+
+export const DrawerHeaderDiv = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderBottom: "1px solid $neutral300",
+  padding: "0 1.5rem 1rem",
+  position: "relative",
+});
+export const DrawerHeaderTitle = styled("h2", {
+  fontSize: "1.125rem",
+  fontWeight: "400",
+  fontFamily: "Work Sans",
+  color: "$dark800",
+  margin: "0",
+});
+export const DrawerHeaderCloseButton = styled("button", {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+});
+export const GoBackButtonStyled = styled("button", {
+  background: "none",
+  padding: "0",
+  border: "none",
+  cursor: "pointer",
+});