@orsetra/shared-ui 1.5.25 → 1.5.27

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

@@ -21,6 +21,7 @@ import {
 import { Menu } from "lucide-react"
 import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
+import { SidebarFlyout } from "./sidebar-flyout"
 import { Skeleton } from "../skeleton"
 
 const SIDEBAR_STORAGE_KEY = "sidebar:state"
@@ -72,21 +73,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 +154,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,13 +194,17 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
     || []
 
   const isCollapsed = state === "collapsed"
+  const [flyoutMenu, setFlyoutMenu] = React.useState<string | null>(null)
 
   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])
+    return mainMenuItems.filter((item) => {
+      if (item.id === currentMenu || navIds.has(item.id)) return false
+      const hasSubItems = (sidebarMenus[item.id]?.length ?? 0) > 0
+      return hasSubItems || !!item.href
+    })
+  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu, sidebarMenus])
 
   return (
     <div
@@ -295,35 +299,56 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           return linkEl
         })}
 
-        {/* Main menu items — only in collapsed mode, below secondary items, neutral color */}
+        {/* Main menu items — only in collapsed mode, below secondary items */}
         {filteredMainItems.length > 0 && (
           <>
             <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://')) {
-                  e.preventDefault()
-                  window.location.href = new URL(href).pathname
-                }
-          }  
-              const linkEl = (
+              const subItems = sidebarMenus[item.id] ?? []
+              const hasSubItems = subItems.length > 0
+
+              const iconBtn = (
                 <Link
-                  key={item.id}
-                  href={ item.href}
-                  className="flex items-center justify-center p-2 transition-colors border-l-4 border-transparent hover:bg-ui-background"
+                  href={hasSubItems ? "#" : (item.href ?? "#")}
+                  onClick={(e) => {
+                    if (hasSubItems) { e.preventDefault(); return }
+                    const href = item.href ?? ""
+                    if (href.startsWith("http://") || href.startsWith("https://")) {
+                      e.preventDefault()
+                      window.location.href = new URL(href).pathname
+                    }
+                  }}
+                  className="flex items-center justify-center p-2 transition-colors border-l-4 border-transparent hover:bg-ui-background w-full"
                 >
-                  <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 (
-                <Tooltip key={item.id}>
-                  <TooltipTrigger asChild>{linkEl}</TooltipTrigger>
-                  <TooltipContent side="right" align="center">{item.label}</TooltipContent>
-                </Tooltip>
+                <div
+                  key={item.id}
+                  className="relative"
+                  onMouseEnter={() => { if (hasSubItems) setFlyoutMenu(item.id) }}
+                  onMouseLeave={() => setFlyoutMenu(null)}
+                >
+                  {hasSubItems ? (
+                    iconBtn
+                  ) : (
+                    <Tooltip>
+                      <TooltipTrigger asChild>{iconBtn}</TooltipTrigger>
+                      <TooltipContent side="right" align="center">{item.label}</TooltipContent>
+                    </Tooltip>
+                  )}
+
+                  {/* Flyout panel */}
+                  {hasSubItems && flyoutMenu === item.id && (
+                    <SidebarFlyout
+                      label={item.label}
+                      subItems={subItems}
+                      onClose={() => setFlyoutMenu(null)}
+                    />
+                  )}
+                </div>
               )
             })}
           </>

package/components/ui/detail-page-header.tsx

@@ -25,6 +25,8 @@ export interface DetailPageHeaderProps {
   backHref?: string
   /** Back breadcrumb label */
   backLabel?: string
+  /** Callback used instead of backHref when you want router.back() behaviour */
+  backAction?: () => void
   /** Optional icon rendered in a blue square container */
   icon?: ReactNode
   /** Page title – truncated to one line */
@@ -50,6 +52,7 @@ export interface DetailPageHeaderProps {
 export function DetailPageHeader({
   backHref,
   backLabel,
+  backAction,
   icon,
   title,
   titleNode,
@@ -61,16 +64,20 @@ export function DetailPageHeader({
   enableTabs = true,
   className,
 }: DetailPageHeaderProps) {
+  const backCls = "inline-flex items-center gap-1.5 text-xs text-ibm-gray-50 hover:text-ibm-blue-60 transition-colors mb-3"
   return (
     <div className={cn("border-ibm-gray-20", className)}>
       <div className="px-4 sm:px-2 pt-1 pb-0">
 
         {/* Breadcrumb */}
-        {backHref && backLabel && (
-          <Link
-            href={backHref}
-            className="inline-flex items-center gap-1.5 text-xs text-ibm-gray-50 hover:text-ibm-blue-60 transition-colors mb-3"
-          >
+        {backAction && backLabel && (
+          <button type="button" onClick={backAction} className={backCls}>
+            <ArrowLeft className="h-3 w-3" />
+            {backLabel}
+          </button>
+        )}
+        {!backAction && backHref && backLabel && (
+          <Link href={backHref} className={backCls}>
             <ArrowLeft className="h-3 w-3" />
             {backLabel}
           </Link>

package/package.json

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