@ttoss/components 2.4.5 → 2.5.0

package/dist/Menu/index.d.ts

@@ -1,32 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IconifyIcon } from '@ttoss/react-icons';
-import { BoxProps } from '@ttoss/ui';
 import * as React from 'react';
 
 type MenuProps = {
-    onClose: () => void;
-    onOpen: () => void;
-    isOpen: boolean;
     children: React.ReactNode;
-    srcLogo?: string;
-    sx?: BoxProps['sx'];
-    /**
-     * Default direction: `left`
-     */
-    direction?: 'left' | 'right';
-    /**
-     * Default size: `100%`
-     */
-    sizeOnMobile?: string | number;
-    /**
-     * Default size: `300px`
-     */
-    sizeOnDesktop?: string | number;
-    /**
-     * Default icon: `menu-open`
-     */
-    menuIcon?: IconifyIcon | string;
+    sx?: Record<string, unknown>;
+    menuIcon?: string;
 };
-declare const Menu: ({ children, srcLogo, onClose, onOpen, isOpen, sx, direction, sizeOnDesktop, sizeOnMobile, menuIcon, }: MenuProps) => react_jsx_runtime.JSX.Element;
+declare const Menu: ({ children, sx, menuIcon }: MenuProps) => react_jsx_runtime.JSX.Element;
 
 export { Menu, type MenuProps };

package/dist/esm/Menu/index.js

@@ -3,135 +3,129 @@ import { Icon } from "../chunk-AZTAV4VC.js";
 import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Menu/Menu.tsx
-import { Box as Box2, Flex, Image, Text, useResponsiveValue } from "@ttoss/ui";
-import * as React2 from "react";
-
-// src/components/Drawer/Drawer.tsx
-import { Box } from "@ttoss/ui";
+import { Box, Flex } from "@ttoss/ui";
 import * as React from "react";
-import DrawerUi from "react-modern-drawer";
-var Drawer = /* @__PURE__ */__name(({
-  children,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */React.createElement(Box, {
-    "data-testid": "drawer-container",
-    sx: {
-      /**
-      * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
-      */
-      zIndex: "overlay",
-      width: "100%",
-      height: "100%",
-      ".EZDrawer__checkbox": {
-        display: "none"
-      },
-      ".EZDrawer__checkbox:checked ~ .EZDrawer__overlay": {
-        display: "block",
-        opacity: 1
-      },
-      ".EZDrawer__checkbox:checked ~ .EZDrawer__container": {
-        visibility: "visible",
-        transform: "translate3d(0, 0, 0) !important"
-      },
-      ".EZDrawer__overlay ": {
-        display: "none",
-        height: "100vh",
-        left: "0",
-        position: "fixed",
-        top: "0",
-        width: "100%"
-      },
-      ".EZDrawer__container": {
-        position: "fixed",
-        visibility: "hidden",
-        backgroundColor: "navigation.background.muted.default",
-        transition: "all",
-        boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
-        paddingX: "6",
-        overflowY: "auto"
-      },
-      ...sx
-    }
-  }, /* @__PURE__ */React.createElement(DrawerUi, props, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      width: "100%",
-      height: "100%"
-    }
-  }, children)));
-}, "Drawer");
-
-// src/components/Menu/Menu.tsx
 var Menu = /* @__PURE__ */__name(({
   children,
-  srcLogo,
-  onClose,
-  onOpen,
-  isOpen,
   sx,
-  direction = "left",
-  sizeOnDesktop = "300px",
-  sizeOnMobile = "100%",
   menuIcon = "menu-open"
 }) => {
-  const responsiveSize = useResponsiveValue([sizeOnMobile, sizeOnDesktop]);
-  return /* @__PURE__ */React2.createElement(React2.Fragment, null, /* @__PURE__ */React2.createElement(Text, {
-    sx: {
-      cursor: "pointer"
-    },
-    onClick: onOpen
-  }, /* @__PURE__ */React2.createElement(Icon, {
-    icon: menuIcon
-  })), /* @__PURE__ */React2.createElement(Drawer, {
-    size: responsiveSize,
-    direction,
-    open: isOpen
-  }, /* @__PURE__ */React2.createElement(Box2, {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [stylePos, setStylePos] = React.useState({});
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const toggle = /* @__PURE__ */__name(() => {
+    return setIsOpen(v => {
+      return !v;
+    });
+  }, "toggle");
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const onDocClick = /* @__PURE__ */__name(e => {
+      const t = e.target;
+      if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) {
+        setIsOpen(false);
+      }
+    }, "onDocClick");
+    document.addEventListener("mousedown", onDocClick);
+    return () => {
+      return document.removeEventListener("mousedown", onDocClick);
+    };
+  }, [isOpen]);
+  React.useLayoutEffect(() => {
+    if (!isOpen) return;
+    let rafId = 0;
+    const getWidth = /* @__PURE__ */__name(() => {
+      const w = sx?.width ?? sx?.maxWidth ?? sx?.minWidth;
+      return Array.isArray(w) ? w[w.length - 1] : w;
+    }, "getWidth");
+    const compute = /* @__PURE__ */__name(() => {
+      const trigger = triggerRef.current;
+      const panel2 = panelRef.current;
+      if (!trigger || !panel2) return;
+      const width = getWidth();
+      if (width) panel2.style.width = typeof width === "number" ? `${width}px` : String(width);
+      const tr = trigger.getBoundingClientRect();
+      const pr = panel2.getBoundingClientRect();
+      const vw = window.innerWidth,
+        vh = window.innerHeight,
+        m = 8;
+      if (pr.width === 0) {
+        rafId = requestAnimationFrame(compute);
+        return;
+      }
+      const left = Math.max(m, Math.min(tr.left + tr.width / 2 - pr.width / 2, vw - pr.width - m));
+      const top = vh - tr.bottom < pr.height + m ? Math.max(m, tr.top - pr.height - m) : tr.bottom + m;
+      setStylePos({
+        position: "fixed",
+        left: `${left}px`,
+        top: `${top}px`,
+        zIndex: 9999,
+        ...(width && {
+          width: typeof width === "number" ? `${width}px` : String(width)
+        })
+      });
+    }, "compute");
+    rafId = requestAnimationFrame(compute);
+    const onResizeScroll = /* @__PURE__ */__name(() => {
+      return rafId = requestAnimationFrame(compute);
+    }, "onResizeScroll");
+    window.addEventListener("resize", onResizeScroll);
+    window.addEventListener("scroll", onResizeScroll, true);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", onResizeScroll);
+      window.removeEventListener("scroll", onResizeScroll, true);
+    };
+  }, [isOpen, children, sx]);
+  const panel = isOpen ? /* @__PURE__ */React.createElement(Flex, {
+    ref: panelRef,
     sx: {
-      position: "fixed",
-      height: "100%",
-      backgroundColor: "background",
-      width: "100%",
-      maxWidth: "2",
-      right: 0,
-      boxShadow: "4",
-      paddingX: "5",
-      paddingTop: "4",
-      paddingBottom: "6",
+      width: ["280px", "320px"],
+      maxHeight: "400px",
+      flexDirection: "column",
+      gap: "3",
+      padding: "3",
+      backgroundColor: "input.background.muted.default",
+      borderRadius: "xl",
+      boxShadow: "xl",
+      overflowY: "auto",
+      border: "md",
+      borderColor: "display.border.muted.default",
       ...sx
+    },
+    style: {
+      pointerEvents: "auto",
+      ...stylePos
     }
-  }, /* @__PURE__ */React2.createElement(Flex, {
+  }, /* @__PURE__ */React.createElement(Box, {
+    as: "nav"
+  }, children)) : null;
+  return /* @__PURE__ */React.createElement(Flex, {
     sx: {
-      justifyContent: "space-between"
+      position: "relative",
+      display: "inline-block"
     }
-  }, /* @__PURE__ */React2.createElement(Image, {
-    src: srcLogo,
-    sx: {
-      maxWidth: "200px",
-      height: "44px",
-      objectFit: "cover"
-    },
-    "data-testid": "img"
-  }), /* @__PURE__ */React2.createElement(Text, {
-    "data-testid": "button",
+  }, /* @__PURE__ */React.createElement(Box, {
     sx: {
-      marginLeft: "auto",
-      fontSize: "2xl",
-      alignSelf: "center",
-      flexShrink: 0,
+      position: "relative"
+    }
+  }, /* @__PURE__ */React.createElement("button", {
+    ref: triggerRef,
+    onClick: toggle,
+    "aria-haspopup": "true",
+    "aria-expanded": isOpen,
+    style: {
+      background: "transparent",
+      border: 0,
+      padding: 4,
       cursor: "pointer",
-      lineHeight: 0
-    },
-    role: "button",
-    onClick: onClose
-  }, /* @__PURE__ */React2.createElement(Icon, {
-    icon: "close"
-  }))), /* @__PURE__ */React2.createElement(Box2, {
-    sx: {
-      paddingTop: "6"
-    },
-    as: "nav"
-  }, children))));
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: menuIcon
+  })), isOpen && panel));
 }, "Menu");
 export { Menu };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -101,9 +101,9 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.18",
     "@ttoss/react-hooks": "^2.1.4",
-    "@ttoss/ui": "^5.10.2"
+    "@ttoss/ui": "^5.10.2",
+    "@ttoss/react-i18n": "^2.0.18"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -112,13 +112,13 @@
     "react": "^19.1.0",
     "tsup": "^8.5.0",
     "tsx": "^4.19.2",
-    "@ttoss/i18n-cli": "^0.7.34",
     "@ttoss/config": "^1.35.8",
-    "@ttoss/react-i18n": "^2.0.18",
-    "@ttoss/ui": "^5.10.2",
+    "@ttoss/i18n-cli": "^0.7.34",
+    "@ttoss/react-hooks": "^2.1.4",
     "@ttoss/react-icons": "^0.4.17",
+    "@ttoss/ui": "^5.10.2",
     "@ttoss/test-utils": "^2.1.28",
-    "@ttoss/react-hooks": "^2.1.4"
+    "@ttoss/react-i18n": "^2.0.18"
   },
   "keywords": [
     "React",