@ttoss/layouts 0.4.15 → 0.4.17

package/dist/esm/index.js

@@ -2275,8 +2275,8 @@ var Icon2 = React2.forwardRef((props, ref) => {
 Icon2.displayName = "Icon";
 
 // src/components/Header.tsx
-import { Box as Box3, Flex, IconButton } from "@ttoss/ui";
-import * as React4 from "react";
+import { Box as Box3, Flex as Flex2, IconButton as IconButton2 } from "@ttoss/ui";
+import * as React5 from "react";
 
 // src/components/LayoutProvider.tsx
 import * as React3 from "react";
@@ -2285,7 +2285,7 @@ import * as React3 from "react";
 import { useBreakpointIndex } from "@ttoss/ui";
 var useIsDesktop = () => {
   const breakpointIndex = useBreakpointIndex();
-  const isDesktop = breakpointIndex >= 1;
+  const isDesktop = breakpointIndex >= 2;
   return {
     isDesktop
   };
@@ -2332,10 +2332,16 @@ var useLayout = () => {
 
 // src/components/Sidebar.tsx
 import { Drawer } from "@ttoss/components/Drawer";
-import { Box as Box2 } from "@ttoss/ui";
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { Box as Box2, Flex, IconButton } from "@ttoss/ui";
+import * as React4 from "react";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var SIDEBAR_WIDTH = "2xs";
-var Sidebar = props => {
+var Sidebar = ({
+  drawerSlot,
+  showSidebarButtonInDrawer,
+  children,
+  ...boxProps
+}) => {
   const {
     isSidebarOpen,
     toggleSidebar
@@ -2343,6 +2349,48 @@ var Sidebar = props => {
   const {
     isDesktop
   } = useIsDesktop();
+  const sidebarButtonInDrawer = React4.useMemo(() => {
+    if (!showSidebarButtonInDrawer) {
+      return null;
+    }
+    return /* @__PURE__ */jsx4(IconButton, {
+      "aria-label": isSidebarOpen ? "Close sidebar" : "Open sidebar",
+      "aria-expanded": isSidebarOpen,
+      "aria-controls": "sidebar",
+      sx: {
+        cursor: "pointer",
+        fontSize: ["xl", "2xl"]
+      },
+      "data-testid": "sidebar-button",
+      children: /* @__PURE__ */jsx4(Icon2, {
+        icon: isSidebarOpen ? "sidebar-close" : "sidebar-open"
+      })
+    });
+  }, [isSidebarOpen, showSidebarButtonInDrawer]);
+  const memoizedDrawerSlot = React4.useMemo(() => {
+    if (!drawerSlot) {
+      return /* @__PURE__ */jsx4(Fragment, {
+        children: sidebarButtonInDrawer
+      });
+    }
+    return /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        width: "full",
+        paddingY: "3",
+        borderBottom: "sm",
+        borderColor: "display.border.muted.default",
+        alignItems: "center",
+        gap: "2"
+      },
+      children: [sidebarButtonInDrawer, /* @__PURE__ */jsx4(Flex, {
+        sx: {
+          minWidth: SIDEBAR_WIDTH,
+          width: SIDEBAR_WIDTH
+        },
+        children: drawerSlot
+      })]
+    });
+  }, [drawerSlot, sidebarButtonInDrawer]);
   return /* @__PURE__ */jsx4(Fragment, {
     children: isDesktop ? /* @__PURE__ */jsx4(Box2, {
       role: "complementary",
@@ -2350,7 +2398,7 @@ var Sidebar = props => {
       "aria-hidden": !isSidebarOpen,
       sx: {
         position: "relative",
-        zIndex: "dropdown",
+        zIndex: "overlay",
         height: "full",
         minHeight: isSidebarOpen ? "full" : "0",
         width: isSidebarOpen ? SIDEBAR_WIDTH : "0",
@@ -2360,19 +2408,23 @@ var Sidebar = props => {
         borderRight: isSidebarOpen ? "sm" : "none",
         borderColor: "display.border.muted.default",
         backgroundColor: "navigation.background.muted.default",
-        paddingX: isSidebarOpen ? "3" : "0",
-        paddingY: isSidebarOpen ? "10" : "0",
-        ...props.sx
+        paddingX: isSidebarOpen ? "6" : "0",
+        paddingY: isSidebarOpen ? "6" : "0",
+        overflowY: "auto",
+        ...boxProps.sx
       },
-      children: isSidebarOpen ? props.children : null
+      children: isSidebarOpen ? children : null
     }) : /* @__PURE__ */jsx4(Box2, {
       role: "complementary",
       "aria-label": "Sidebar",
       "aria-hidden": !isSidebarOpen,
       sx: {
+        position: "fixed",
+        zIndex: "overlay",
         border: "none",
-        width: "full",
-        ...props.sx
+        width: isSidebarOpen ? "full" : "0",
+        height: isSidebarOpen ? "full" : "0",
+        ...boxProps.sx
       },
       onClick: () => {
         if (isSidebarOpen) {
@@ -2382,8 +2434,17 @@ var Sidebar = props => {
       children: /* @__PURE__ */jsx4(Drawer, {
         open: isSidebarOpen,
         direction: "left",
-        size: "min",
-        children: isSidebarOpen ? props.children : null
+        size: "100%",
+        enableOverlay: false,
+        children: /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            width: "full",
+            height: "full",
+            gap: "6",
+            flexDirection: "column"
+          },
+          children: [memoizedDrawerSlot, isSidebarOpen ? children : null]
+        })
       })
     })
   });
@@ -2391,7 +2452,7 @@ var Sidebar = props => {
 Sidebar.displayName = "Sidebar";
 
 // src/components/Header.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var paddingSx = {
   paddingX: "4",
   paddingY: "3"
@@ -2406,11 +2467,11 @@ var Header = ({
     isSidebarOpen,
     toggleSidebar
   } = useLayout();
-  const sidebarButton = React4.useMemo(() => {
+  const sidebarButton = React5.useMemo(() => {
     if (!showSidebarButton) {
       return null;
     }
-    return /* @__PURE__ */jsx5(IconButton, {
+    return /* @__PURE__ */jsx5(IconButton2, {
       "aria-label": isSidebarOpen ? "Close sidebar" : "Open sidebar",
       "aria-expanded": isSidebarOpen,
       "aria-controls": "sidebar",
@@ -2425,13 +2486,13 @@ var Header = ({
       })
     });
   }, [isSidebarOpen, showSidebarButton, toggleSidebar]);
-  const memoizedSidebarSlot = React4.useMemo(() => {
+  const memoizedSidebarSlot = React5.useMemo(() => {
     if (!sidebarSlot) {
       return /* @__PURE__ */jsx5(Fragment2, {
         children: sidebarButton
       });
     }
-    return /* @__PURE__ */jsxs(Flex, {
+    return /* @__PURE__ */jsxs2(Flex2, {
       sx: {
         minWidth: SIDEBAR_WIDTH,
         width: SIDEBAR_WIDTH,
@@ -2444,7 +2505,7 @@ var Header = ({
       children: [sidebarButton, sidebarSlot]
     });
   }, [sidebarButton, sidebarSlot]);
-  return /* @__PURE__ */jsxs(Flex, {
+  return /* @__PURE__ */jsxs2(Flex2, {
     variant: "layout.header",
     ...boxProps,
     as: "header",
@@ -2507,10 +2568,10 @@ Layout.Footer = Footer;
 Layout.Container = Container;
 
 // src/components/SidebarCollapseLayout.tsx
-import { Flex as Flex2, Stack } from "@ttoss/ui";
+import { Flex as Flex3, Stack } from "@ttoss/ui";
 
 // src/getSemanticElements.ts
-import * as React5 from "react";
+import * as React6 from "react";
 var semanticComponents = {
   Header: "header",
   Sidebar: "sidebar",
@@ -2521,7 +2582,7 @@ var getSematicElements = ({
   children
 }) => {
   const semanticElements = {};
-  React5.Children.forEach(children, child => {
+  React6.Children.forEach(children, child => {
     const displayName = child?.type?.displayName;
     if (!displayName) {
       return;
@@ -2534,7 +2595,7 @@ var getSematicElements = ({
 };
 
 // src/components/SidebarCollapseLayout.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var SidebarCollapseLayout = ({
   children,
   ...props
@@ -2547,7 +2608,7 @@ var SidebarCollapseLayout = ({
     children
   });
   return /* @__PURE__ */jsx8(LayoutProvider, {
-    children: /* @__PURE__ */jsxs2(Stack, {
+    children: /* @__PURE__ */jsxs3(Stack, {
       ...props,
       sx: {
         height: ["100vh"],
@@ -2555,12 +2616,12 @@ var SidebarCollapseLayout = ({
         overflow: "hidden",
         ...props.sx
       },
-      children: [header, /* @__PURE__ */jsxs2(Flex2, {
+      children: [header, /* @__PURE__ */jsxs3(Flex3, {
         sx: {
           width: "full",
           flex: 1,
           overflow: "hidden",
-          flexDirection: ["column", "row", "row"]
+          flexDirection: ["row"]
         },
         children: [sidebar, main]
       })]
@@ -2570,7 +2631,7 @@ var SidebarCollapseLayout = ({
 
 // src/components/StackedLayout.tsx
 import { Stack as Stack2 } from "@ttoss/ui";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var StackedLayout = ({
   children,
   ...props
@@ -2583,13 +2644,13 @@ var StackedLayout = ({
     children
   });
   return /* @__PURE__ */jsx9(LayoutProvider, {
-    children: /* @__PURE__ */jsxs3(Stack2, {
+    children: /* @__PURE__ */jsxs4(Stack2, {
       ...props,
       children: [header, main, footer]
     })
   });
 };
-export { Layout, SidebarCollapseLayout, StackedLayout };
+export { Layout, SidebarCollapseLayout, StackedLayout, useIsDesktop };
 /*! Bundled license information:
 
 iconify-icon/dist/iconify-icon.mjs:

package/dist/index.d.ts

@@ -12,7 +12,10 @@ declare const Layout: {
         displayName: string;
     };
     Sidebar: {
-        (props: BoxProps): react_jsx_runtime.JSX.Element;
+        ({ drawerSlot, showSidebarButtonInDrawer, children, ...boxProps }: BoxProps & {
+            showSidebarButtonInDrawer?: boolean;
+            drawerSlot?: React.ReactNode;
+        }): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Main: {
@@ -30,4 +33,8 @@ declare const SidebarCollapseLayout: ({ children, ...props }: React.PropsWithChi
 
 declare const StackedLayout: ({ children, ...props }: react.PropsWithChildren<StackProps>) => react_jsx_runtime.JSX.Element;
 
-export { Layout, SidebarCollapseLayout, StackedLayout };
+declare const useIsDesktop: () => {
+    isDesktop: boolean;
+};
+
+export { Layout, SidebarCollapseLayout, StackedLayout, useIsDesktop };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.4.15",
+  "version": "0.4.17",
   "description": "Layout components for React",
   "license": "MIT",
   "author": "ttoss",
@@ -25,8 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.2.7",
-    "@ttoss/ui": "^5.5.5"
+    "@ttoss/ui": "^5.5.5",
+    "@ttoss/components": "^2.2.9"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -34,11 +34,11 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/components": "^2.2.7",
-    "@ttoss/config": "^1.35.2",
     "@ttoss/react-icons": "^0.4.9",
     "@ttoss/test-utils": "^2.1.22",
-    "@ttoss/ui": "^5.5.5"
+    "@ttoss/config": "^1.35.2",
+    "@ttoss/ui": "^5.5.5",
+    "@ttoss/components": "^2.2.9"
   },
   "keywords": [
     "React"