@sikka/hawa 0.31.14-next → 0.31.16-next

package/dist/index.js

@@ -9101,19 +9101,18 @@ var AppLayout = ({
   };
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = (0, import_react55.useState)("");
-  const [size, setSize] = (0, import_react55.useState)(1200);
+  const [size, setSize] = (0, import_react55.useState)(
+    typeof window !== "undefined" && window.innerWidth || 1200
+  );
   const [openSideMenu, setOpenSideMenu] = (0, import_react55.useState)(true);
-  const handleClickOutside = () => {
-    if (size < 600 && keepOpen === false) {
-      setOpenSideMenu(false);
-    }
-  };
-  const ref = useOutsideClick_default(handleClickOutside);
-  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
+  const [keepDrawerOpen, setKeepDrawerOpen] = (0, import_react55.useState)(keepOpen);
   (0, import_react55.useEffect)(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
+        if (window.innerWidth > 600) {
+          setKeepDrawerOpen(false);
+        }
       };
       resize();
       window.addEventListener("resize", resize);
@@ -9122,9 +9121,24 @@ var AppLayout = ({
       };
     }
   }, []);
+  (0, import_react55.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;
   (0, import_react55.useEffect)(() => {
     if (size > 600) {
-      setOpenSideMenu(keepOpen);
+      setOpenSideMenu(keepDrawerOpen);
     } else {
       setOpenSideMenu(false);
     }
@@ -9145,16 +9159,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
@@ -9252,7 +9266,7 @@ var AppLayout = ({
       },
       onMouseLeave: () => {
         if (size > 600) {
-          if (keepOpen) {
+          if (keepDrawerOpen) {
             setOpenSideMenu(true);
           } else {
             setOpenedSidebarItem("");
@@ -9331,7 +9345,7 @@ var AppLayout = ({
           selectedItem: currentPage,
           openedItem: openedSidebarItem,
           setOpenedItem: (e) => setOpenedSidebarItem(e),
-          isOpen: keepOpen || openSideMenu,
+          isOpen: keepDrawerOpen || openSideMenu,
           items: props.drawerItems,
           LinkComponent: DrawerLinkComponent
         }
@@ -9354,7 +9368,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__ */ import_react55.default.createElement(
@@ -9362,11 +9376,11 @@ var AppLayout = ({
           {
             variant: "outline",
             onClick: () => {
-              const newKeepOpenState = !keepOpen;
+              const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
-              setKeepOpen(newKeepOpenState);
+              setKeepDrawerOpen(newKeepOpenState);
             },
             size: "smallIcon"
           },
@@ -9375,7 +9389,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/dist/index.mjs

@@ -8878,19 +8878,18 @@ var AppLayout = ({
   };
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = useState36("");
-  const [size, setSize] = useState36(1200);
+  const [size, setSize] = useState36(
+    typeof window !== "undefined" && window.innerWidth || 1200
+  );
   const [openSideMenu, setOpenSideMenu] = useState36(true);
-  const handleClickOutside = () => {
-    if (size < 600 && keepOpen === false) {
-      setOpenSideMenu(false);
-    }
-  };
-  const ref = useOutsideClick_default(handleClickOutside);
-  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
+  const [keepDrawerOpen, setKeepDrawerOpen] = useState36(keepOpen);
   useEffect28(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
+        if (window.innerWidth > 600) {
+          setKeepDrawerOpen(false);
+        }
       };
       resize();
       window.addEventListener("resize", resize);
@@ -8899,9 +8898,24 @@ var AppLayout = ({
       };
     }
   }, []);
+  useEffect28(() => {
+    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;
   useEffect28(() => {
     if (size > 600) {
-      setOpenSideMenu(keepOpen);
+      setOpenSideMenu(keepDrawerOpen);
     } else {
       setOpenSideMenu(false);
     }
@@ -8922,16 +8936,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
@@ -9029,7 +9043,7 @@ var AppLayout = ({
       },
       onMouseLeave: () => {
         if (size > 600) {
-          if (keepOpen) {
+          if (keepDrawerOpen) {
             setOpenSideMenu(true);
           } else {
             setOpenedSidebarItem("");
@@ -9108,7 +9122,7 @@ var AppLayout = ({
           selectedItem: currentPage,
           openedItem: openedSidebarItem,
           setOpenedItem: (e) => setOpenedSidebarItem(e),
-          isOpen: keepOpen || openSideMenu,
+          isOpen: keepDrawerOpen || openSideMenu,
           items: props.drawerItems,
           LinkComponent: DrawerLinkComponent
         }
@@ -9131,7 +9145,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__ */ React76.createElement(
@@ -9139,11 +9153,11 @@ var AppLayout = ({
           {
             variant: "outline",
             onClick: () => {
-              const newKeepOpenState = !keepOpen;
+              const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
-              setKeepOpen(newKeepOpenState);
+              setKeepDrawerOpen(newKeepOpenState);
             },
             size: "smallIcon"
           },
@@ -9152,7 +9166,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/dist/layout/index.js

@@ -1437,19 +1437,18 @@ var AppLayout = ({
   };
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = (0, import_react9.useState)("");
-  const [size, setSize] = (0, import_react9.useState)(1200);
+  const [size, setSize] = (0, import_react9.useState)(
+    typeof window !== "undefined" && window.innerWidth || 1200
+  );
   const [openSideMenu, setOpenSideMenu] = (0, import_react9.useState)(true);
-  const handleClickOutside = () => {
-    if (size < 600 && keepOpen === false) {
-      setOpenSideMenu(false);
-    }
-  };
-  const ref = useOutsideClick_default(handleClickOutside);
-  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
+  const [keepDrawerOpen, setKeepDrawerOpen] = (0, import_react9.useState)(keepOpen);
   (0, import_react9.useEffect)(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
+        if (window.innerWidth > 600) {
+          setKeepDrawerOpen(false);
+        }
       };
       resize();
       window.addEventListener("resize", resize);
@@ -1458,9 +1457,24 @@ var AppLayout = ({
       };
     }
   }, []);
+  (0, import_react9.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;
   (0, import_react9.useEffect)(() => {
     if (size > 600) {
-      setOpenSideMenu(keepOpen);
+      setOpenSideMenu(keepDrawerOpen);
     } else {
       setOpenSideMenu(false);
     }
@@ -1481,16 +1495,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
@@ -1588,7 +1602,7 @@ var AppLayout = ({
       },
       onMouseLeave: () => {
         if (size > 600) {
-          if (keepOpen) {
+          if (keepDrawerOpen) {
             setOpenSideMenu(true);
           } else {
             setOpenedSidebarItem("");
@@ -1667,7 +1681,7 @@ var AppLayout = ({
           selectedItem: currentPage,
           openedItem: openedSidebarItem,
           setOpenedItem: (e) => setOpenedSidebarItem(e),
-          isOpen: keepOpen || openSideMenu,
+          isOpen: keepDrawerOpen || openSideMenu,
           items: props.drawerItems,
           LinkComponent: DrawerLinkComponent
         }
@@ -1690,7 +1704,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__ */ import_react9.default.createElement(
@@ -1698,11 +1712,11 @@ var AppLayout = ({
           {
             variant: "outline",
             onClick: () => {
-              const newKeepOpenState = !keepOpen;
+              const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
-              setKeepOpen(newKeepOpenState);
+              setKeepDrawerOpen(newKeepOpenState);
             },
             size: "smallIcon"
           },
@@ -1711,7 +1725,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/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 = () => {
-    if (size < 600 && keepOpen === false) {
-      setOpenSideMenu(false);
-    }
-  };
-  const ref = useOutsideClick_default(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.14-next",
+  "version": "0.31.16-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",