@sikka/hawa 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/hooks/index.ts

@@ -2,3 +2,12 @@ export * from "./useDiscloser"
 export * from "./useHover"
 export * from "./useToast"
 export * from "./useCarousel"
+export * from "./useClipboard"
+export * from "./useBreakpoint"
+export * from "./useFocusWithin"
+export * from "./useMediaQuery"
+export * from "./useScrollPosition"
+export * from "./useTable"
+export * from "./useTabs"
+export * from "./useWindowEvent"
+export * from "./useWindowScroll"

package/src/hooks/useTabs.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react"
+
+function useTabs(initialTab = "") {
+  const [activeTab, setActiveTab] = useState(initialTab)
+
+  // Listen to hash changes in the URL
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.substring(1)
+      setActiveTab(hash || initialTab)
+    }
+
+    window.addEventListener("hashchange", handleHashChange)
+
+    // Initialize the tab based on the initial hash
+    handleHashChange()
+
+    return () => {
+      // Remove the event listener when the component unmounts
+      window.removeEventListener("hashchange", handleHashChange)
+    }
+  }, [initialTab])
+
+  const handleTabChange = (index) => {
+    setActiveTab(index)
+
+    // Update the URL hash when the tab changes
+    window.location.hash = index
+  }
+
+  return {
+    activeTab,
+    handleTabChange,
+  }
+}
+
+export { useTabs }

package/src/layout/AppLayout.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
-import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
 import { Button, DropdownMenu, MenuItemType, Tooltip } from "../elements"
 import { SidebarGroup } from "./Sidebar"
@@ -27,6 +26,7 @@ type AppLayoutTypes = {
   profileMenuWidth: "default" | "sm" | "lg" | "parent"
   onSettingsClick?: () => void
   onDrawerExpand?: (e) => void
+  keepDrawerOpen?: boolean
   DrawerFooterActions?: any
   clickedItem?: any
   texts?: {
@@ -85,7 +85,15 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
   } else {
     size = 1200
   }
-  const [keepOpen, setKeepOpen] = useState(size > 600 ? true : false)
+  const [keepOpen, setKeepOpen] = useState(() => {
+    if (size > 600) {
+      // If size is larger than 600, use prop.isDrawerOpen if it exists, or default to true.
+      return props.keepDrawerOpen !== undefined ? props.keepDrawerOpen : true
+    } else {
+      // If size is less than or equal to 600, set keepOpen to false.
+      return false
+    }
+  })
   const [openSideMenu, setOpenSideMenu] = useState(size > 600 ? true : false)
 
   let drawerSizeCondition =