spree_admin 5.2.0.rc2 → 5.2.0

data/app/javascript/spree/admin/controllers/dropdown_controller.js

@@ -9,24 +9,44 @@ import {
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["menu", "toggle"]
   static values = {
     placement: { type: String, default: "bottom-start" },
     offset: { type: Number, default: 4 },
+    portal: { type: Boolean, default: true },
   }
 
   connect() {
+    // Find menu and toggle elements by CSS class instead of Stimulus target
+    // Try both .dropdown-menu and .dropdown-container for backward compatibility
+    this.menu = this.element.querySelector('.dropdown-menu') ||
+                this.element.querySelector('.dropdown-container')
+    this.toggleBtn = this.element.querySelector('.dropdown-toggle')
+
+    // Early return if no menu element exists
+    if (!this.menu) {
+      return
+    }
+
     this._cleanup = null
     this.boundUpdate = this.update.bind(this)
     this._isOpen = false
     this._toggleElement = null
+    this._originalParent = null
+    this._originalNextSibling = null
+    this._movedToBody = false
   }
 
   disconnect() {
+    if (!this.menu) return
     this.stopAutoUpdate()
+    this.restoreMenuPosition()
   }
 
   toggle(event) {
+    if (!this.menu) {
+      return
+    }
+
     event.preventDefault()
     event.stopPropagation()
 
@@ -41,9 +61,19 @@ export default class extends Controller {
   }
 
   open() {
-    if (this._isOpen) return
+    if (!this.menu || this._isOpen) {
+      return
+    }
 
-    this.menuTarget.classList.remove("hidden")
+    // Move menu to body on first open to prevent clipping by sidebar overflow
+    // Skip if portal is disabled or if inside bulk panel (to preserve Stimulus controller context)
+    if (!this._movedToBody && this.shouldPortalToBody()) {
+      this.moveMenuToBody()
+      this._movedToBody = true
+    }
+
+    this.menu.classList.remove("hidden")
+    this.menu.style.display = "block"
     this._isOpen = true
 
     // Start automatic positioning
@@ -59,9 +89,10 @@ export default class extends Controller {
   }
 
   close() {
-    if (!this._isOpen) return
+    if (!this.menu || !this._isOpen) return
 
-    this.menuTarget.classList.add("hidden")
+    this.menu.classList.add("hidden")
+    this.menu.style.display = ""
     this._isOpen = false
 
     // Stop automatic positioning
@@ -101,11 +132,11 @@ export default class extends Controller {
   }
 
   startAutoUpdate() {
-    if (!this._cleanup) {
-      const referenceElement = this.hasToggleTarget ? this.toggleTarget : (this._toggleElement || this.element)
+    if (!this._cleanup && this.menu) {
+      const referenceElement = this.toggleBtn || this._toggleElement || this.element
       this._cleanup = autoUpdate(
         referenceElement,
-        this.menuTarget,
+        this.menu,
         this.boundUpdate,
       )
     }
@@ -119,10 +150,12 @@ export default class extends Controller {
   }
 
   update() {
-    // Use the toggle target if available, or the stored toggle element, or fall back to the controller element
-    const referenceElement = this.hasToggleTarget ? this.toggleTarget : (this._toggleElement || this.element)
+    if (!this.menu) return
+
+    // Use the toggle button if available, or the stored toggle element, or fall back to the controller element
+    const referenceElement = this.toggleBtn || this._toggleElement || this.element
 
-    computePosition(referenceElement, this.menuTarget, {
+    computePosition(referenceElement, this.menu, {
       placement: this.placementValue,
       middleware: [
         offset(this.offsetValue),
@@ -133,9 +166,18 @@ export default class extends Controller {
         shift({ padding: 8 }),
         size({
           apply({ availableWidth, availableHeight, elements }) {
-            // Ensure dropdown doesn't exceed viewport
+            // Get the element's computed max-width
+            const computedStyle = window.getComputedStyle(elements.floating)
+            const originalMaxWidth = parseFloat(computedStyle.maxWidth)
+
+            // Use the smaller of availableWidth or original max-width
+            const maxWidth = originalMaxWidth && !isNaN(originalMaxWidth)
+              ? Math.min(availableWidth, originalMaxWidth)
+              : availableWidth
+
+            // Ensure dropdown doesn't exceed viewport or original constraints
             Object.assign(elements.floating.style, {
-              maxWidth: `${availableWidth}px`,
+              maxWidth: `${maxWidth}px`,
               maxHeight: `${availableHeight}px`,
               overflow: "auto",
             })
@@ -144,11 +186,40 @@ export default class extends Controller {
         }),
       ],
     }).then(({ x, y }) => {
-      Object.assign(this.menuTarget.style, {
+      Object.assign(this.menu.style, {
         left: `${x}px`,
         top: `${y}px`,
         position: "absolute",
       })
     })
   }
+
+  shouldPortalToBody() {
+    // Don't portal if explicitly disabled via data attribute
+    return this.portalValue
+  }
+
+  moveMenuToBody() {
+    if (this.menu && this.menu.parentNode !== document.body) {
+      // Save original position for restoration
+      this._originalParent = this.menu.parentNode
+      this._originalNextSibling = this.menu.nextSibling
+
+      // Move menu to body to prevent clipping by sidebar overflow
+      document.body.appendChild(this.menu)
+    }
+  }
+
+  restoreMenuPosition() {
+    if (this.menu && this._originalParent) {
+      // Restore menu to original position
+      if (this._originalNextSibling) {
+        this._originalParent.insertBefore(this.menu, this._originalNextSibling)
+      } else {
+        this._originalParent.appendChild(this.menu)
+      }
+      this._originalParent = null
+      this._originalNextSibling = null
+    }
+  }
 }

data/app/javascript/spree/admin/controllers/sidebar_controller.js

@@ -0,0 +1,231 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["desktop", "mobile"];
+
+  static values = {
+    storageKey: { type: String, default: "spree_admin_sidebar_open" },
+  };
+
+  connect() {
+    // Initialize dropdown tracking
+    this.activeDropdown = null
+    this.dropdownCleanup = null
+    this.submenuHoverHandlers = new Map()
+    this.hideTimeout = null
+
+    // Disable transitions during initial load to prevent animation flash
+    this.element.classList.add("sidebar-no-transition");
+
+    // Restore saved state for desktop sidebar (default is open/expanded)
+    const savedState = localStorage.getItem(this.storageKeyValue);
+
+    // Only collapse if explicitly saved as false
+    if (savedState === "false") {
+      this.element.classList.add("sidebar-collapsed");
+      this.setupCollapsedSubmenuHandlers();
+    } else {
+      // Explicitly ensure it's not collapsed (default is expanded)
+      this.element.classList.remove("sidebar-collapsed");
+    }
+
+    // Re-enable transitions after initial state is set
+    requestAnimationFrame(() => {
+      this.element.classList.remove("sidebar-no-transition");
+    });
+  }
+
+  disconnect() {
+    // Clear any pending hide timeout
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+
+    this.cleanupSubmenuHandlers();
+    if (this.dropdownCleanup) {
+      this.dropdownCleanup();
+      this.dropdownCleanup = null;
+    }
+  }
+
+  toggle() {
+    this.element.classList.toggle("sidebar-collapsed");
+    const isCollapsed = this.element.classList.contains("sidebar-collapsed");
+    localStorage.setItem(this.storageKeyValue, String(!isCollapsed));
+
+    // Setup or cleanup submenu handlers based on state
+    if (isCollapsed) {
+      this.setupCollapsedSubmenuHandlers();
+    } else {
+      this.cleanupSubmenuHandlers();
+    }
+  }
+
+  openMobile() {
+    if (this.hasMobileTarget) {
+      this.mobileTarget.classList.add("sidebar-mobile-open");
+    }
+  }
+
+  closeMobile() {
+    if (this.hasMobileTarget) {
+      this.mobileTarget.classList.remove("sidebar-mobile-open");
+    }
+  }
+
+  setupCollapsedSubmenuHandlers() {
+    const sidebar = document.querySelector('#main-sidebar');
+    if (!sidebar) return;
+
+    // Find all dropdown submenus
+    const dropdowns = sidebar.querySelectorAll('.nav-submenu-dropdown');
+
+    dropdowns.forEach(dropdown => {
+      // Find the associated nav-item (previous sibling, skipping the regular nav-submenu)
+      let navItem = dropdown.previousElementSibling;
+
+      // Skip over the regular .nav-submenu to get to the .nav-item
+      while (navItem && navItem.classList.contains('nav-submenu')) {
+        navItem = navItem.previousElementSibling;
+      }
+
+      if (!navItem || !navItem.classList.contains('nav-item')) return;
+
+      const showHandler = () => this.showSubmenuFloating(navItem, dropdown);
+      const hideHandler = () => this.scheduleHideSubmenu();
+
+      navItem.addEventListener('mouseenter', showHandler);
+      navItem.addEventListener('mouseleave', hideHandler);
+      dropdown.addEventListener('mouseenter', showHandler);
+      dropdown.addEventListener('mouseleave', hideHandler);
+
+      this.submenuHoverHandlers.set(navItem, { showHandler, hideHandler, dropdown });
+    });
+  }
+
+  cleanupSubmenuHandlers() {
+    this.submenuHoverHandlers.forEach(({ showHandler, hideHandler, dropdown }, navItem) => {
+      navItem.removeEventListener('mouseenter', showHandler);
+      navItem.removeEventListener('mouseleave', hideHandler);
+      dropdown.removeEventListener('mouseenter', showHandler);
+      dropdown.removeEventListener('mouseleave', hideHandler);
+    });
+    this.submenuHoverHandlers.clear();
+
+    // Hide active dropdown if any
+    if (this.activeDropdown) {
+      this.hideSubmenuFloating();
+    }
+  }
+
+  showSubmenuFloating(navItem, dropdown) {
+    // Cancel any pending hide
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+
+    // If showing same dropdown, return
+    if (this.activeDropdown === dropdown) {
+      return;
+    }
+
+    // Hide any currently active dropdown
+    if (this.activeDropdown) {
+      this.hideSubmenuFloating();
+    }
+
+    // Store reference
+    this.activeDropdown = dropdown;
+
+    // Move dropdown to body for proper positioning (to avoid sidebar overflow clipping)
+    if (dropdown.parentNode !== document.body) {
+      dropdown._originalParent = dropdown.parentNode;
+      dropdown._originalNextSibling = dropdown.nextSibling;
+      document.body.appendChild(dropdown);
+    }
+
+    // Show dropdown
+    dropdown.classList.remove('d-none');
+
+    // Style dropdown items
+    dropdown.querySelectorAll('.nav-link').forEach((item, index) => {
+      item.classList.add('dropdown-item');
+      if (index > 0) {
+        item.classList.add('mt-1');
+      }
+    });
+
+    // Position using Floating UI
+    if (this.dropdownCleanup) {
+      this.dropdownCleanup();
+    }
+
+    this.dropdownCleanup = autoUpdate(navItem, dropdown, () => {
+      computePosition(navItem, dropdown, {
+        placement: 'right-start',
+        middleware: [
+          offset(8),
+          flip(),
+          shift({ padding: 8 }),
+        ],
+      }).then(({ x, y }) => {
+        Object.assign(dropdown.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  scheduleHideSubmenu() {
+    // Clear any existing timeout
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+
+    // Schedule hide with delay to allow mouse to move to submenu
+    this.hideTimeout = setTimeout(() => {
+      this.hideSubmenuFloating();
+      this.hideTimeout = null;
+    }, 150); // 150ms grace period
+  }
+
+  hideSubmenuFloating() {
+    if (!this.activeDropdown) return;
+
+    // Stop auto-update
+    if (this.dropdownCleanup) {
+      this.dropdownCleanup();
+      this.dropdownCleanup = null;
+    }
+
+    // Hide dropdown
+    this.activeDropdown.classList.add('d-none');
+
+    // Restore dropdown to original position in sidebar
+    if (this.activeDropdown._originalParent) {
+      if (this.activeDropdown._originalNextSibling) {
+        this.activeDropdown._originalParent.insertBefore(
+          this.activeDropdown,
+          this.activeDropdown._originalNextSibling
+        );
+      } else {
+        this.activeDropdown._originalParent.appendChild(this.activeDropdown);
+      }
+      this.activeDropdown._originalParent = null;
+      this.activeDropdown._originalNextSibling = null;
+    }
+
+    // Clear reference
+    this.activeDropdown = null;
+  }
+}

data/app/javascript/spree/admin/controllers/tooltip_controller.js

@@ -8,7 +8,6 @@ import {
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["tooltip"]
   static values = {
     placement: { type: String, default: "top" },
     offset: { type: Number, default: 10 },
@@ -17,18 +16,34 @@ export default class extends Controller {
   }
 
   connect() {
+    // Find tooltip element by CSS class instead of Stimulus target
+    this.tooltip = this.element.querySelector('.tooltip-container')
+
+    // Early return if no tooltip element exists
+    if (!this.tooltip) {
+      return
+    }
+
     this._cleanup = null
     this.boundUpdate = this.update.bind(this)
     this._originalWidth = null
     this._isShown = false
+    this._originalParent = null
+    this._originalNextSibling = null
+    this._movedToBody = false
     this.startAutoUpdate()
     this.addEventListeners()
     this.prepareTooltip()
   }
 
   disconnect() {
+    if (!this.tooltip) {
+      return
+    }
+
     this.removeEventListeners()
     this.stopAutoUpdate()
+    this.restoreTooltipPosition()
     this.resetTooltip()
   }
 
@@ -44,43 +59,75 @@ export default class extends Controller {
 
   prepareTooltip() {
     // Ensure tooltip is rendered offscreen but measurable
-    if (this.tooltipTarget) {
+    if (this.tooltip) {
       // Save original display
-      this._originalDisplay = this.tooltipTarget.style.display
+      this._originalDisplay = this.tooltip.style.display
       // Temporarily show tooltip offscreen to measure size
-      this.tooltipTarget.style.visibility = "hidden"
-      this.tooltipTarget.style.display = "block"
-      this.tooltipTarget.style.left = "-9999px"
-      this.tooltipTarget.style.top = "-9999px"
+      this.tooltip.style.visibility = "hidden"
+      this.tooltip.style.display = "block"
+      this.tooltip.style.left = "-9999px"
+      this.tooltip.style.top = "-9999px"
       // Force reflow and measure
-      this._originalWidth = this.tooltipTarget.offsetWidth + 10
+      this._originalWidth = this.tooltip.offsetWidth + 10
       // Height is now dynamic, so we do not set or store it
-      this.tooltipTarget.style.width = `${this._originalWidth}px`
-      this.tooltipTarget.style.height = "" // Remove any fixed height
+      this.tooltip.style.width = `${this._originalWidth}px`
+      this.tooltip.style.height = "" // Remove any fixed height
       // Hide again
-      this.tooltipTarget.style.display = "none"
-      this.tooltipTarget.style.visibility = ""
-      this.tooltipTarget.style.left = ""
-      this.tooltipTarget.style.top = ""
+      this.tooltip.style.display = "none"
+      this.tooltip.style.visibility = ""
+      this.tooltip.style.left = ""
+      this.tooltip.style.top = ""
     }
   }
 
   resetTooltip() {
-    if (this.tooltipTarget) {
-      this.tooltipTarget.style.width = ""
-      this.tooltipTarget.style.height = ""
-      this.tooltipTarget.style.display = this._originalDisplay || ""
+    if (this.tooltip) {
+      this.tooltip.style.width = ""
+      this.tooltip.style.height = ""
+      this.tooltip.style.display = this._originalDisplay || ""
+    }
+  }
+
+  moveTooltipToBody() {
+    if (this.tooltip && this.tooltip.parentNode !== document.body) {
+      // Save original position for restoration
+      this._originalParent = this.tooltip.parentNode
+      this._originalNextSibling = this.tooltip.nextSibling
+
+      // Move tooltip to body to prevent clipping by sidebar overflow
+      document.body.appendChild(this.tooltip)
+    }
+  }
+
+  restoreTooltipPosition() {
+    if (this.tooltip && this._originalParent) {
+      // Restore tooltip to original position
+      if (this._originalNextSibling) {
+        this._originalParent.insertBefore(this.tooltip, this._originalNextSibling)
+      } else {
+        this._originalParent.appendChild(this.tooltip)
+      }
+      this._originalParent = null
+      this._originalNextSibling = null
     }
   }
 
   show = () => {
+    if (!this.tooltip) return
+
     if (!this._isShown) {
-      this.tooltipTarget.style.display = "block"
-      this.tooltipTarget.style.visibility = "visible"
+      // Move to body on first show
+      if (!this._movedToBody) {
+        this.moveTooltipToBody()
+        this._movedToBody = true
+      }
+
+      this.tooltip.style.display = "block"
+      this.tooltip.style.visibility = "visible"
       // Set explicit width, but let height be dynamic
       if (this._originalWidth) {
-        this.tooltipTarget.style.width = `${this._originalWidth}px`
-        this.tooltipTarget.style.height = ""
+        this.tooltip.style.width = `${this._originalWidth}px`
+        this.tooltip.style.height = ""
       }
       this.update() // Ensure immediate update when shown
       this._isShown = true
@@ -88,19 +135,21 @@ export default class extends Controller {
   }
 
   hide = () => {
+    if (!this.tooltip) return
+
     if (this._isShown) {
-      this.tooltipTarget.style.display = "none"
-      this.tooltipTarget.style.visibility = ""
+      this.tooltip.style.display = "none"
+      this.tooltip.style.visibility = ""
       // Keep width set to prevent flicker if quickly re-hovered
       this._isShown = false
     }
   }
 
   startAutoUpdate() {
-    if (!this._cleanup) {
+    if (!this._cleanup && this.tooltip) {
       this._cleanup = autoUpdate(
         this.element,
-        this.tooltipTarget,
+        this.tooltip,
         this.boundUpdate,
       )
     }
@@ -114,8 +163,10 @@ export default class extends Controller {
   }
 
   update() {
+    if (!this.tooltip) return
+
     // Update position even if not visible, to ensure correct positioning when shown
-    computePosition(this.element, this.tooltipTarget, {
+    computePosition(this.element, this.tooltip, {
       placement: this.placementValue,
       middleware: [
         offset({
@@ -127,10 +178,12 @@ export default class extends Controller {
         shift({ padding: 5 }),
       ],
     }).then(({ x, y }) => {
-      Object.assign(this.tooltipTarget.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
+      if (this.tooltip) {
+        Object.assign(this.tooltip.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        })
+      }
     })
   }
 }