@ttoss/components 2.2.6 → 2.2.7

package/dist/Drawer/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
 import { BoxProps } from '@ttoss/ui';
+import * as React from 'react';
 import DrawerUi from 'react-modern-drawer';
 
 type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;

package/dist/esm/Drawer/index.js

@@ -2,51 +2,65 @@
 
 // src/components/Drawer/Drawer.tsx
 import { Box } from "@ttoss/ui";
-import { css as createClassName } from "@emotion/css";
 import DrawerUi from "react-modern-drawer";
 import { jsx } from "react/jsx-runtime";
-var reactModernDrawerClassName = createClassName(`
-.EZDrawer .EZDrawer__checkbox {
-    display: none;
-}
-.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
-    display: block;
-    opacity: 1;
-}
-.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
-    visibility: visible;
-    transform: translate3d(0, 0, 0) !important;
-}
-.EZDrawer .EZDrawer__overlay {
-    display: none;
-    height: 100vh;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-}
-.EZDrawer .EZDrawer__container {
-    position: fixed;
-    visibility: hidden;
-    background: white;
-    transition: all;
-    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
-}`);
 var Drawer = ({
   children,
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */jsx(DrawerUi, {
-    ...props,
-    className: reactModernDrawerClassName,
-    children: /* @__PURE__ */jsx(Box, {
-      sx: {
-        width: "100%",
-        height: "100%",
-        ...sx
+  return /* @__PURE__ */jsx(Box, {
+    "data-testid": "drawer-container",
+    sx: {
+      /**
+       * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
+       */
+      zIndex: "dropdown",
+      width: "100%",
+      height: "100%",
+      ".EZDrawer__checkbox": {
+        display: "none"
       },
-      children
+      ".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: "absolute",
+        top: "0",
+        width: "100%"
+      },
+      ".EZDrawer__container": {
+        position: "absolute",
+        visibility: "hidden",
+        backgroundColor: "navigation.background.muted.default",
+        transition: "all",
+        boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
+        paddingY: "6",
+        paddingX: "6",
+        overflowY: "auto",
+        "@media (max-width: 768px)": {
+          position: "sticky"
+        }
+      },
+      ...sx
+    },
+    children: /* @__PURE__ */jsx(DrawerUi, {
+      ...props,
+      children: /* @__PURE__ */jsx(Box, {
+        sx: {
+          width: "100%",
+          height: "100%"
+        },
+        children
+      })
     })
   });
 };

package/dist/esm/Menu/index.js

@@ -2263,51 +2263,65 @@ import { Box as Box2, Flex, Image, Text, useResponsiveValue } from "@ttoss/ui";
 
 // src/components/Drawer/Drawer.tsx
 import { Box } from "@ttoss/ui";
-import { css as createClassName } from "@emotion/css";
 import DrawerUi from "react-modern-drawer";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var reactModernDrawerClassName = createClassName(`
-.EZDrawer .EZDrawer__checkbox {
-    display: none;
-}
-.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
-    display: block;
-    opacity: 1;
-}
-.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
-    visibility: visible;
-    transform: translate3d(0, 0, 0) !important;
-}
-.EZDrawer .EZDrawer__overlay {
-    display: none;
-    height: 100vh;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-}
-.EZDrawer .EZDrawer__container {
-    position: fixed;
-    visibility: hidden;
-    background: white;
-    transition: all;
-    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
-}`);
 var Drawer = ({
   children,
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */jsx2(DrawerUi, {
-    ...props,
-    className: reactModernDrawerClassName,
-    children: /* @__PURE__ */jsx2(Box, {
-      sx: {
-        width: "100%",
-        height: "100%",
-        ...sx
+  return /* @__PURE__ */jsx2(Box, {
+    "data-testid": "drawer-container",
+    sx: {
+      /**
+       * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
+       */
+      zIndex: "dropdown",
+      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: "absolute",
+        top: "0",
+        width: "100%"
+      },
+      ".EZDrawer__container": {
+        position: "absolute",
+        visibility: "hidden",
+        backgroundColor: "navigation.background.muted.default",
+        transition: "all",
+        boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
+        paddingY: "6",
+        paddingX: "6",
+        overflowY: "auto",
+        "@media (max-width: 768px)": {
+          position: "sticky"
+        }
       },
-      children
+      ...sx
+    },
+    children: /* @__PURE__ */jsx2(DrawerUi, {
+      ...props,
+      children: /* @__PURE__ */jsx2(Box, {
+        sx: {
+          width: "100%",
+          height: "100%"
+        },
+        children
+      })
     })
   });
 };
@@ -2364,8 +2378,10 @@ var Menu = ({
               maxWidth: "200px",
               height: "44px",
               objectFit: "cover"
-            }
+            },
+            "data-testid": "img"
           }), /* @__PURE__ */jsx3(Text, {
+            "data-testid": "button",
             sx: {
               marginLeft: "auto",
               fontSize: "2xl",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -94,7 +94,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.0.10",
-    "@ttoss/ui": "^5.5.4"
+    "@ttoss/ui": "^5.5.5"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -103,11 +103,11 @@
     "react": "^19.0.0",
     "tsup": "^8.3.5",
     "tsx": "^4.19.2",
-    "@ttoss/react-icons": "^0.4.9",
     "@ttoss/config": "^1.35.2",
     "@ttoss/react-hooks": "^2.0.10",
+    "@ttoss/react-icons": "^0.4.9",
     "@ttoss/test-utils": "^2.1.22",
-    "@ttoss/ui": "^5.5.4"
+    "@ttoss/ui": "^5.5.5"
   },
   "keywords": [
     "React",