@orsetra/shared-ui 1.5.0 → 1.5.2

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

@@ -34,41 +34,23 @@ export function MainSidebar({
   mainMenuItems = [],
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
-  const [hoveredMenu, setHoveredMenu] = React.useState<string | null>(null)
-  const [flyoutPos, setFlyoutPos] = React.useState<{ top: number; left: number } | null>(null)
   const [expandedMenu, setExpandedMenu] = React.useState<string | null>(null)
-  const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
-  React.useEffect(() => {
-    return () => { if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current) }
-  }, [])
-
-  // Reset expanded menu when sidebar closes
+  // Reset accordion when sidebar closes
   React.useEffect(() => {
     if (!isOpen) setExpandedMenu(null)
   }, [isOpen])
 
-  const handleFlyoutMouseEnter = (menuId: string, rect?: DOMRect) => {
-    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
-    if (rect) setFlyoutPos({ top: rect.top, left: rect.right + 8 })
-    setHoveredMenu(menuId)
-  }
-
-  const handleFlyoutMouseLeave = () => {
-    closeTimeoutRef.current = setTimeout(() => setHoveredMenu(null), 150)
-  }
-
   const handleMenuClick = (menuId: string) => {
     const hasSubMenu = (sidebarMenus[menuId]?.length ?? 0) > 0
 
-    // In mobile overlay mode (not minimized, overlay open): expand inline instead of navigating
-    if (!isMinimized && isOpen && hasSubMenu) {
+    // Accordion: expand/collapse inline for any non-minimized mode
+    if (!isMinimized && hasSubMenu) {
       setExpandedMenu((prev) => (prev === menuId ? null : menuId))
       return
     }
 
     onMenuSelect(menuId)
-
     if (!isMinimized && onSecondarySidebarOpen) {
       onSecondarySidebarOpen()
     }
@@ -98,7 +80,7 @@ export function MainSidebar({
   const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string) => {
     e.preventDefault()
     window.location.href = buildSubItemHref(menuId, href)
-    setHoveredMenu(null)
+    setExpandedMenu(null)
   }
 
   return (
@@ -111,14 +93,14 @@ export function MainSidebar({
       )}
 
       <div className={cn(
-        "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out",
+        "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out overflow-y-auto",
         isMinimized ? "w-16" : "w-64 shadow-xl",
         isMinimized
           ? "translate-x-0"
           : (isOpen ? "translate-x-0" : "-translate-x-full")
       )}>
         <div className={cn(
-          "flex items-center h-16 border-b border-ui-border bg-white",
+          "flex items-center h-16 border-b border-ui-border bg-white sticky top-0 z-10",
           isMinimized ? "justify-center px-2" : "justify-between px-4"
         )}>
           {!isMinimized && <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />}
@@ -136,99 +118,62 @@ export function MainSidebar({
           )}
         </div>
 
-        <div className={cn(
-          "overflow-y-auto h-full",
-          isMinimized ? "p-2" : "p-3"
-        )}>
-          <nav className="space-y-1">
-            {mainMenuItems.map((item) => {
-              const Icon = item.icon
-              const hasSubMenu = sidebarMenus[item.id]?.length > 0
-              const isActive = currentMenu === item.id
-              return (
-                <div
-                  key={item.id}
-                  className="relative"
-                  onMouseEnter={(e) => hasSubMenu && handleFlyoutMouseEnter(item.id, e.currentTarget.getBoundingClientRect())}
-                  onMouseLeave={() => hasSubMenu && handleFlyoutMouseLeave()}
+        <nav className={cn("space-y-1", isMinimized ? "p-2" : "p-3")}>
+          {mainMenuItems.map((item) => {
+            const Icon = item.icon
+            const hasSubMenu = (sidebarMenus[item.id]?.length ?? 0) > 0
+            const isActive = currentMenu === item.id
+            const isExpanded = expandedMenu === item.id
+
+            return (
+              <div key={item.id}>
+                <button
+                  onClick={() => handleMenuClick(item.id)}
+                  className={cn(
+                    "w-full flex items-center text-left transition-all duration-150 font-medium",
+                    isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
+                    isActive
+                      ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
+                      : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
+                  )}
+                  title={isMinimized ? item.label : undefined}
                 >
-                  <button
-                    onClick={() => handleMenuClick(item.id)}
-                    className={cn(
-                      "w-full flex items-center text-left transition-all duration-150 font-medium",
-                      isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
-                      isActive
-                        ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
-                        : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
-                    )}
-                    title={isMinimized ? item.label : undefined}
-                  >
-                    <Icon className={cn(
-                      "h-5 w-5 flex-shrink-0",
-                      isActive ? "text-interactive" : "text-text-secondary"
-                    )} />
-                    {!isMinimized && <span className="text-base flex-1">{item.label}</span>}
-                    {!isMinimized && hasSubMenu && isOpen && (
-                      expandedMenu === item.id
-                        ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                        : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                    )}
-                  </button>
-
-                  {/* Inline accordion sub-items — shown on mobile (overlay open, not minimized) */}
-                  {!isMinimized && isOpen && expandedMenu === item.id && hasSubMenu && (
-                    <div className="pl-4 pb-1">
-                      {sidebarMenus[item.id].map((subItem) => (
-                        <a
-                          key={subItem.id}
-                          href={buildSubItemHref(item.id, subItem.href)}
-                          onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
-                          className="flex items-center gap-3 px-3 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
-                        >
-                          <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
-                          {subItem.name}
-                        </a>
-                      ))}
-                    </div>
+                  <Icon className={cn(
+                    "h-5 w-5 flex-shrink-0",
+                    isActive ? "text-interactive" : "text-text-secondary"
+                  )} />
+                  {!isMinimized && (
+                    <>
+                      <span className="text-base flex-1">{item.label}</span>
+                      {hasSubMenu && (
+                        isExpanded
+                          ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                          : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                      )}
+                    </>
                   )}
-                </div>
-              )
-            })}
-          </nav>
-        </div>
-
-        {/* Flyout en position fixed : échappe overflow-y-auto et tout contexte d'empilement */}
-        {hoveredMenu && flyoutPos && sidebarMenus[hoveredMenu]?.length > 0 && (() => {
-          const activeItem = mainMenuItems.find(i => i.id === hoveredMenu)
-          if (!activeItem) return null
-          return (
-            <div
-              className="fixed bg-white border border-ui-border shadow-lg z-[9999] min-w-[220px] py-1"
-              style={{ top: flyoutPos.top, left: flyoutPos.left }}
-              onMouseEnter={() => handleFlyoutMouseEnter(hoveredMenu)}
-              onMouseLeave={handleFlyoutMouseLeave}
-            >
-              {/* Arrow pointing left */}
-              <div className="absolute -left-[5px] top-[14px] w-[10px] h-[10px] bg-white border-l border-t border-ui-border -rotate-45" />
-              <div className="px-4 py-2 border-b border-ui-border">
-                <p className="text-xs font-semibold text-text-primary uppercase tracking-wide">{activeItem.label}</p>
-              </div>
-              <div>
-                {sidebarMenus[hoveredMenu].map((subItem) => (
-                  <a
-                    key={subItem.id}
-                    href={buildSubItemHref(hoveredMenu, subItem.href)}
-                    onClick={(e) => handleSubMenuClick(e, hoveredMenu, subItem.href)}
-                    className="flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-4 border-transparent hover:border-interactive"
-                  >
-                    <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
-                    {subItem.name}
-                  </a>
-                ))}
+                </button>
+
+                {/* Inline accordion sub-items */}
+                {!isMinimized && isExpanded && hasSubMenu && (
+                  <div className="pl-4 pb-1">
+                    {sidebarMenus[item.id].map((subItem) => (
+                      <a
+                        key={subItem.id}
+                        href={buildSubItemHref(item.id, subItem.href)}
+                        onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
+                        className="flex items-center gap-3 px-3 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
+                      >
+                        <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
+                        {subItem.name}
+                      </a>
+                    ))}
+                  </div>
+                )}
               </div>
-            </div>
-          )
-        })()}
+            )
+          })}
+        </nav>
       </div>
     </>
   )

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

@@ -19,9 +19,9 @@ export interface DetailPageHeaderTab {
 
 export interface DetailPageHeaderProps {
   /** Back breadcrumb link destination */
-  backHref: string
+  backHref?: string
   /** Back breadcrumb label */
-  backLabel: string
+  backLabel?: string
   /** Optional icon rendered in a blue square container */
   icon?: ReactNode
   /** Page title – truncated to one line */
@@ -57,13 +57,15 @@ export function DetailPageHeader({
       <div className="px-4 sm:px-2 pt-1 pb-0">
 
         {/* Breadcrumb */}
-        <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"
-        >
-          <ArrowLeft className="h-3 w-3" />
-          {backLabel}
-        </Link>
+        {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"
+          >
+            <ArrowLeft className="h-3 w-3" />
+            {backLabel}
+          </Link>
+        )}
 
         {/* Title row */}
         <div className="flex items-center justify-between gap-4 pb-4">

package/package.json

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