phlex_kit 0.6.1 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74f3d49a1a6adfab950d193db75d0cce12c02308c10fe69566d7a62ea0a835e3
-  data.tar.gz: 0b673ba98ab594e4f2783a32c83b792e849605cd43fb1033d2bd258dece4c789
+  metadata.gz: 924514c45499b5f5d021cc5ec5416246c38ccfc0cb40bef9f65a9592e12960b3
+  data.tar.gz: 9531c44809a4b586547c41a45e2274acf24618436f10ca6d54f368f975ad199e
 SHA512:
-  metadata.gz: d0e680e98ac74f15fa085a2828e7aa86041d67fa58ec82dd07d9f2912bc06c063ef58b5fcdcba5c44b037cc7b4070b01869b891da449ad8bcbb9ce4eb62facf4
-  data.tar.gz: ddea978e8b26eaf08dcb373df2c59bec15405f0c043ca349c8c6f6e1c20194f75712281d526f70bc0fc234fcb2aeb41a79f42386182494a6a597af3bb9868fe3
+  metadata.gz: edbe03d8c7b0eafca03b08f4da7e28b0f220be45e3725e18fcc82972d9737341180be65617bcfee479d67a150e3876da29551bf39a46d52459b9a0f794d1672f
+  data.tar.gz: a25b1d74ac3d5cfb12dfd0f72a20bf1fcf92b115a7f25602cb62dfd0c19c77987db2ee02ee6fd4efd97548306b75d70e188eea2c56bbb4564cb2503d41f592bb

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.css

@@ -20,6 +20,16 @@
   position-try-fallbacks: flip-block;
 }
 .pk-dropdown-menu-content-up { position-area: block-start span-inline-end; margin: 0 0 4px; }
+.pk-dropdown-menu-content-right {
+  position-area: inline-end span-block-end;
+  margin: 0 0 0 4px;
+  position-try-fallbacks: flip-inline;
+}
+.pk-dropdown-menu-content-left {
+  position-area: inline-start span-block-end;
+  margin: 0 4px 0 0;
+  position-try-fallbacks: flip-inline;
+}
 .pk-dropdown-menu-viewport {
   min-width: 10rem;
   border-radius: calc(var(--pk-radius) - 2px);

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_content.rb

@@ -1,9 +1,12 @@
 module PhlexKit
   # The dropdown panel — a native [popover=manual] the trigger toggles,
   # anchor-positioned with viewport-edge flipping. `side:` is :bottom
-  # (default, opens below) or :top (opens above — for triggers near the bottom of
-  # the viewport, e.g. the sidebar footer). See dropdown_menu.rb.
+  # (default, opens below), :top (opens above — for triggers near the bottom
+  # of the viewport, e.g. the sidebar footer), :right or :left (opens beside
+  # the trigger — shadcn's side prop). See dropdown_menu.rb.
   class DropdownMenuContent < BaseComponent
+    SIDES = { bottom: nil, top: "pk-dropdown-menu-content-up", left: "pk-dropdown-menu-content-left", right: "pk-dropdown-menu-content-right" }.freeze
+
     def initialize(side: :bottom, **attrs)
       @side = side.to_sym
       @attrs = attrs
@@ -18,7 +21,7 @@ module PhlexKit
     private
 
     def wrapper_classes
-      [ "pk-dropdown-menu-content", ("pk-dropdown-menu-content-up" if @side == :top) ].compact.join(" ")
+      [ "pk-dropdown-menu-content", fetch_option(SIDES, @side, :side) ].compact.join(" ")
     end
   end
 end

data/app/components/phlex_kit/menubar/menubar_controller.js

@@ -18,6 +18,10 @@ export default class extends Controller {
     this.openMenu = null
   }
 
+  disconnect() {
+    clearTimeout(this.graceTimer)
+  }
+
   toggle(e) {
     const menu = e.currentTarget.closest("[data-phlex-kit--menubar-target=\"menu\"]")
     this.openMenu === menu ? this.close() : this.show(menu, true)
@@ -26,11 +30,28 @@ export default class extends Controller {
   // Hover: switches between menus while one is open (menubar), or opens
   // directly when the bar declares data-hover-open (navigation menu).
   switch(e) {
+    clearTimeout(this.graceTimer)
     const menu = e.currentTarget.closest("[data-phlex-kit--menubar-target=\"menu\"]")
-    if (this.element.dataset.hoverOpen !== undefined) return this.show(menu)
+    if (this.element.dataset.hoverOpen !== undefined) {
+      if (!menu || !this.panel(menu)) return this.closeSoon() // link, no panel
+      return this.show(menu)
+    }
+    if (!menu) return this.close()
     if (this.openMenu && this.openMenu !== menu) this.show(menu)
   }
 
+  // Hover closes go through a short grace period so a diagonal pointer path
+  // that clips a sibling link (or briefly exits the nav) on its way to the
+  // panel doesn't slam it shut; reaching the panel or a trigger cancels.
+  closeSoon() {
+    clearTimeout(this.graceTimer)
+    this.graceTimer = setTimeout(() => this.close(), 150)
+  }
+
+  cancelClose() {
+    clearTimeout(this.graceTimer)
+  }
+
   show(menu, focus = false) {
     if (this.openMenu !== menu) {
       this.close()
@@ -42,6 +63,7 @@ export default class extends Controller {
   }
 
   close(opts = {}) {
+    clearTimeout(this.graceTimer)
     const menu = this.openMenu
     if (!menu) return
     const panel = this.panel(menu)

data/app/components/phlex_kit/navigation_menu/navigation_menu.rb

@@ -15,7 +15,7 @@ module PhlexKit
         data: {
           controller: "phlex-kit--menubar",
           hover_open: true,
-          action: "click@window->phlex-kit--menubar#onClickOutside keydown.esc->phlex-kit--menubar#close mouseleave->phlex-kit--menubar#close"
+          action: "click@window->phlex-kit--menubar#onClickOutside keydown.esc->phlex-kit--menubar#close mouseleave->phlex-kit--menubar#closeSoon"
         }
       }, @attrs), &)
     end

data/app/components/phlex_kit/navigation_menu/navigation_menu_content.rb

@@ -5,7 +5,7 @@ module PhlexKit
     def view_template(&)
       # No role="menu" here — the panel holds plain links, not menuitems
       # (Radix/shadcn ship no menu role on NavigationMenu content either).
-      div(**mix({ class: "pk-navigation-menu-content", popover: "manual" }, @attrs), &)
+      div(**mix({ class: "pk-navigation-menu-content", popover: "manual", data: { action: "mouseenter->phlex-kit--menubar#cancelClose" } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/navigation_menu/navigation_menu_link.rb

@@ -1,5 +1,9 @@
 module PhlexKit
-  # Plain link item (top-level or inside a panel). See navigation_menu.rb.
+  # Plain link item (top-level or inside a panel). Hover fires #switch like a
+  # trigger: for a TOP-LEVEL link the closest menu item has no panel, so an
+  # open sibling panel closes; for a link INSIDE a panel the closest item IS
+  # the open menu, so switch is a no-op and the panel stays. See
+  # navigation_menu.rb.
   class NavigationMenuLink < BaseComponent
     def initialize(href: "#", **attrs)
       @href = href
@@ -7,7 +11,7 @@ module PhlexKit
     end
 
     def view_template(&)
-      a(**mix({ class: "pk-navigation-menu-link", href: @href }, @attrs), &)
+      a(**mix({ class: "pk-navigation-menu-link", href: @href, data: { action: "mouseenter->phlex-kit--menubar#switch" } }, @attrs), &)
     end
   end
 end

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.6.1"
+  VERSION = "0.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.7.0
 platform: ruby
 authors:
 - Matt Kennedy