@orsetra/shared-ui 1.1.27 → 1.1.29

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

@@ -35,14 +35,16 @@ export function MainSidebar({
 }: 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 closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
   React.useEffect(() => {
     return () => { if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current) }
   }, [])
 
-  const handleFlyoutMouseEnter = (menuId: string) => {
+  const handleFlyoutMouseEnter = (menuId: string, rect?: DOMRect) => {
     if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
+    if (rect) setFlyoutPos({ top: rect.top, left: rect.right + 8 })
     setHoveredMenu(menuId)
   }
 
@@ -79,12 +81,6 @@ export function MainSidebar({
 
   return (
     <>
-      {isOpen && !isMinimized && !hoveredMenu && (
-        <div
-          className="fixed inset-0 bg-black/50 z-40"
-          onClick={onToggle}
-        />
-      )}
 
       <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",
@@ -124,7 +120,7 @@ export function MainSidebar({
                 <div
                   key={item.id}
                   className="relative"
-                  onMouseEnter={() => hasSubMenu && handleFlyoutMouseEnter(item.id)}
+                  onMouseEnter={(e) => hasSubMenu && handleFlyoutMouseEnter(item.id, e.currentTarget.getBoundingClientRect())}
                   onMouseLeave={() => hasSubMenu && handleFlyoutMouseLeave()}
                 >
                   <button
@@ -146,38 +142,43 @@ export function MainSidebar({
                     )} />
                     {!isMinimized && <span className="text-base">{item.label}</span>}
                   </button>
-
-                  {hoveredMenu === item.id && hasSubMenu && (
-                    <div
-                      className="absolute left-full top-0 ml-2 bg-white border border-ui-border rounded-lg shadow-xl z-50 min-w-[200px] py-2"
-                      onMouseEnter={() => handleFlyoutMouseEnter(item.id)}
-                      onMouseLeave={handleFlyoutMouseLeave}
-                    >
-                      {/* Arrow pointing left toward hovered item */}
-                      <div className="absolute -left-[5px] top-[18px] 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">
-                        <h3 className="text-sm font-semibold text-text-primary">{item.label}</h3>
-                      </div>
-                      <div className="py-1">
-                        {sidebarMenus[item.id].map((subItem) => (
-                          <a
-                            key={subItem.id}
-                            href={subItem.href}
-                            onClick={(e) => handleSubMenuClick(e, 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"
-                          >
-                            <subItem.icon className="h-4 w-4" />
-                            {subItem.name}
-                          </a>
-                        ))}
-                      </div>
-                    </div>
-                  )}
                 </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 rounded-lg shadow-xl z-[9999] min-w-[200px] py-2"
+              style={{ top: flyoutPos.top, left: flyoutPos.left }}
+              onMouseEnter={() => handleFlyoutMouseEnter(hoveredMenu)}
+              onMouseLeave={handleFlyoutMouseLeave}
+            >
+              <div className="absolute -left-[5px] top-[18px] 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">
+                <h3 className="text-sm font-semibold text-text-primary">{activeItem.label}</h3>
+              </div>
+              <div className="py-1">
+                {sidebarMenus[hoveredMenu].map((subItem) => (
+                  <a
+                    key={subItem.id}
+                    href={subItem.href}
+                    onClick={(e) => handleSubMenuClick(e, 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"
+                  >
+                    <subItem.icon className="h-4 w-4" />
+                    {subItem.name}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )
+        })()}
       </div>
     </>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.27",
+  "version": "1.1.29",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -106,4 +106,4 @@
     "next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}