@sikka/hawa 0.31.15-next → 0.31.17-next

package/dist/layout/index.mjs

@@ -424,19 +424,18 @@ var AppLayout = ({
   };
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = useState2("");
-  const [size, setSize] = useState2(1200);
+  const [size, setSize] = useState2(
+    typeof window !== "undefined" && window.innerWidth || 1200
+  );
   const [openSideMenu, setOpenSideMenu] = useState2(true);
-  const handleClickOutside = () => {
-    setOpenSideMenu(false);
-  };
-  const doNothing = () => {
-  };
-  const ref = useOutsideClick_default(size > 600 ? doNothing : handleClickOutside);
-  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
+  const [keepDrawerOpen, setKeepDrawerOpen] = useState2(keepOpen);
   useEffect(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
+        if (window.innerWidth > 600) {
+          setKeepDrawerOpen(false);
+        }
       };
       resize();
       window.addEventListener("resize", resize);
@@ -445,9 +444,24 @@ var AppLayout = ({
       };
     }
   }, []);
+  useEffect(() => {
+    setKeepDrawerOpen(keepOpen);
+  }, [setKeepOpen]);
+  const handleClickOutside = () => {
+    if (typeof window !== "undefined") {
+      if (keepDrawerOpen)
+        return;
+      if (window.innerWidth < 600) {
+        setKeepDrawerOpen(false);
+        setOpenSideMenu(false);
+      }
+    }
+  };
+  const ref = useOutsideClick_default(handleClickOutside);
+  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] : 0;
   useEffect(() => {
     if (size > 600) {
-      setOpenSideMenu(keepOpen);
+      setOpenSideMenu(keepDrawerOpen);
     } else {
       setOpenSideMenu(false);
     }
@@ -468,16 +482,16 @@ var AppLayout = ({
           "dark:hawa-text-white",
           isRTL ? [
             size > 600 ? "hawa-mr-14" : "hawa-mr-2",
-            keepOpen ? "hawa-mr-40" : ""
+            keepDrawerOpen ? "hawa-mr-40" : ""
           ] : [
             size > 600 ? "hawa-ml-14" : "hawa-ml-2",
-            keepOpen ? "hawa-ml-40" : ""
+            keepDrawerOpen ? "hawa-ml-40" : ""
           ]
         ),
         style: isRTL ? {
-          marginRight: `${drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize]}px`
+          marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
         } : {
-          marginLeft: `${drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize]}px`
+          marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
         }
       },
       props.pageTitle
@@ -575,7 +589,7 @@ var AppLayout = ({
       },
       onMouseLeave: () => {
         if (size > 600) {
-          if (keepOpen) {
+          if (keepDrawerOpen) {
             setOpenSideMenu(true);
           } else {
             setOpenedSidebarItem("");
@@ -654,7 +668,7 @@ var AppLayout = ({
           selectedItem: currentPage,
           openedItem: openedSidebarItem,
           setOpenedItem: (e) => setOpenedSidebarItem(e),
-          isOpen: keepOpen || openSideMenu,
+          isOpen: keepDrawerOpen || openSideMenu,
           items: props.drawerItems,
           LinkComponent: DrawerLinkComponent
         }
@@ -677,7 +691,7 @@ var AppLayout = ({
         {
           side: "left",
           delayDuration: 500,
-          content: keepOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
+          content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
           triggerProps: { asChild: true }
         },
         /* @__PURE__ */ React5.createElement(
@@ -685,11 +699,11 @@ var AppLayout = ({
           {
             variant: "outline",
             onClick: () => {
-              const newKeepOpenState = !keepOpen;
+              const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
-              setKeepOpen(newKeepOpenState);
+              setKeepDrawerOpen(newKeepOpenState);
             },
             size: "smallIcon"
           },
@@ -698,7 +712,7 @@ var AppLayout = ({
             {
               className: cn(
                 "hawa-h-6 hawa-w-6 hawa-shrink-0 hawa-text-primary hawa-transition-all  disabled:hawa-bg-gray-200 ",
-                keepOpen ? isRTL ? "hawa--rotate-90" : "hawa-rotate-90" : isRTL ? "hawa-rotate-90" : "hawa--rotate-90"
+                keepDrawerOpen ? isRTL ? "hawa--rotate-90" : "hawa-rotate-90" : isRTL ? "hawa-rotate-90" : "hawa--rotate-90"
               ),
               fill: "currentColor",
               viewBox: "0 0 20 20"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.31.15-next",
+  "version": "0.31.17-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",