@orsetra/shared-ui 1.5.26 → 1.5.28

package/components/layout/sidebar/sidebar-flyout.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { type SubMenuItem } from "./data"
+
+interface SidebarFlyoutProps {
+  label: string
+  subItems: SubMenuItem[]
+  onClose: () => void
+}
+
+export function SidebarFlyout({ label, subItems, onClose }: SidebarFlyoutProps) {
+  return (
+    <div
+      className="absolute left-full top-0 ml-1 w-52 bg-white shadow-lg border border-ui-border z-50"
+      onMouseEnter={(e) => e.stopPropagation()}
+      onMouseLeave={onClose}
+    >
+      <div className="px-3 py-2 text-[11px] font-semibold text-text-secondary uppercase tracking-wide border-b border-ui-border">
+        {label}
+      </div>
+      {subItems.map((subItem) => (
+        <Link
+          key={subItem.id}
+          href={subItem.href}
+          onClick={(e) => {
+            if (subItem.href.startsWith("http://") || subItem.href.startsWith("https://")) {
+              e.preventDefault()
+              window.location.href = new URL(subItem.href).pathname
+            }
+            onClose()
+          }}
+          className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors"
+        >
+          <subItem.icon className="h-4 w-4 flex-shrink-0" />
+          {subItem.name}
+        </Link>
+      ))}
+    </div>
+  )
+}

package/components/layout/sidebar/sidebar.tsx

@@ -72,21 +72,19 @@ const SidebarProvider = React.forwardRef<
     const isMobile = useIsMobile()
     const [openMobile, setOpenMobile] = React.useState(false)
 
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    // Initialize from defaultOpen (SSR-safe); sync from localStorage after mount.
-    const [_open, _setOpen] = React.useState(defaultOpen)
+    // Read from localStorage synchronously on first client render to avoid flash.
+    // Falls back to defaultOpen during SSR (typeof window === 'undefined').
+    const [_open, _setOpen] = React.useState(() => {
+      if (typeof window !== "undefined") {
+        try {
+          const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
+          if (stored !== null) return stored === "true"
+        } catch {}
+      }
+      return defaultOpen
+    })
     const open = openProp ?? _open
 
-    // Hydrate from localStorage on first client render (avoids SSR mismatch).
-    React.useEffect(() => {
-      try {
-        const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
-        if (stored !== null) _setOpen(stored === "true")
-      } catch {}
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
         const openState = typeof value === "function" ? value(open) : value
@@ -155,6 +153,7 @@ const SidebarProvider = React.forwardRef<
                 ...style,
               } as React.CSSProperties
             }
+            suppressHydrationWarning
             className={cn(
               "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
               className
@@ -194,10 +193,8 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
     || []
 
   const isCollapsed = state === "collapsed"
-
   const filteredMainItems = React.useMemo(() => {
     if (!isCollapsed || mainMenuItems.length === 0) return []
-    // Exclude items that match the current menu context OR appear in the secondary nav OR have no href
     const navIds = new Set(currentNavigation.map((n) => n.id))
     return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id) && !!item.href)
   }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu])
@@ -301,22 +298,20 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
             <div className="border-t border-ui-border mx-1 my-2" />
             {filteredMainItems.map((item) => {
               const handleClick = (e: React.MouseEvent) => {
-                const href = item.href
-                if (href.startsWith('http://') || href.startsWith('https://')) {
+                const href = item.href ?? ""
+                if (href.startsWith("http://") || href.startsWith("https://")) {
                   e.preventDefault()
                   window.location.href = new URL(href).pathname
                 }
-          }  
+              }
               const linkEl = (
                 <Link
                   key={item.id}
-                  href={ item.href}
+                  href={item.href ?? "#"}
+                  onClick={handleClick}
                   className="flex items-center justify-center p-2 transition-colors border-l-4 border-transparent hover:bg-ui-background"
                 >
-                  <item.icon
-                    className="h-4 w-4 flex-shrink-0"
-                    style={{ color: '#8d8d8d' }}
-                  />
+                  <item.icon className="h-4 w-4 flex-shrink-0" style={{ color: "#8d8d8d" }} />
                 </Link>
               )
               return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.5.26",
+  "version": "1.5.28",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",