arco-clone-react 1.3.1 → 1.5.0

package/dist/index.mjs

@@ -9160,12 +9160,141 @@ var Carousel = ({
   );
 };
 Carousel.displayName = "Carousel";
+
+// src/components/Drawer/Drawer.tsx
+import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3 } from "react";
+
+// src/components/Drawer/Drawer.module.css
+var Drawer_default = {};
+
+// src/components/Drawer/Drawer.tsx
+import { jsx as jsx265, jsxs as jsxs7 } from "react/jsx-runtime";
+var Drawer = ({
+  open,
+  onClose,
+  title,
+  children,
+  placement = "right",
+  size = "medium",
+  showCloseButton = true,
+  showOverlay = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  footer,
+  className = "",
+  headerClassName = "",
+  bodyClassName = "",
+  footerClassName = "",
+  overlayClassName = "",
+  zIndex = 1e3,
+  lockBodyScroll = true,
+  ...rest
+}) => {
+  const drawerRef = useRef3(null);
+  const previousActiveElement = useRef3(null);
+  useEffect3(() => {
+    if (!open || !closeOnEscape) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, closeOnEscape, onClose]);
+  useEffect3(() => {
+    if (!open || !lockBodyScroll) return;
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [open, lockBodyScroll]);
+  useEffect3(() => {
+    if (open) {
+      previousActiveElement.current = document.activeElement;
+      drawerRef.current?.focus();
+    } else {
+      previousActiveElement.current?.focus();
+    }
+  }, [open]);
+  const handleOverlayClick = useCallback3(
+    (e) => {
+      if (closeOnOverlayClick && e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [closeOnOverlayClick, onClose]
+  );
+  if (!open) return null;
+  const drawerClasses = [Drawer_default.drawer, Drawer_default[placement], Drawer_default[size], className].filter(Boolean).join(" ");
+  const overlayClasses = [Drawer_default.overlay, overlayClassName].filter(Boolean).join(" ");
+  const headerClasses = [Drawer_default.header, headerClassName].filter(Boolean).join(" ");
+  const bodyClasses = [Drawer_default.body, bodyClassName].filter(Boolean).join(" ");
+  const footerClasses = [Drawer_default.footer, footerClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7("div", { className: Drawer_default.drawerContainer, style: { zIndex }, role: "presentation", children: [
+    showOverlay && /* @__PURE__ */ jsx265("div", { className: overlayClasses, onClick: handleOverlayClick, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: drawerRef,
+        className: drawerClasses,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": typeof title === "string" ? title : void 0,
+        tabIndex: -1,
+        ...rest,
+        children: [
+          (title || showCloseButton) && /* @__PURE__ */ jsxs7("div", { className: headerClasses, children: [
+            title && /* @__PURE__ */ jsx265("h2", { className: Drawer_default.title, children: title }),
+            showCloseButton && /* @__PURE__ */ jsx265(
+              "button",
+              {
+                type: "button",
+                className: Drawer_default.closeButton,
+                onClick: onClose,
+                "aria-label": "Close drawer",
+                children: /* @__PURE__ */ jsxs7(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx265("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx265("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx265("div", { className: bodyClasses, children }),
+          footer && /* @__PURE__ */ jsx265("div", { className: footerClasses, children: footer })
+        ]
+      }
+    )
+  ] });
+};
+Drawer.displayName = "Drawer";
 export {
   Badge,
   Button,
   Carousel,
   Collapse,
   Container,
+  Drawer,
   Flex,
   Grid,
   GridItem,