Skip to content

Allow to pass the strategy option to dropdown menu #243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions lib/ruby_ui/dropdown_menu/dropdown_menu.rb
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,20 @@ def view_template(&)

def default_attrs
{
class: [
"group/dropdown-menu",
(strategy == "absolute") ? "is-absolute" : "is-fixed"
],
data: {
controller: "ruby-ui--dropdown-menu",
action: "click@window->ruby-ui--dropdown-menu#onClickOutside",
ruby_ui__dropdown_menu_options_value: @options.to_json
}
}
end

def strategy
@_strategy ||= @options[:strategy] || "absolute"
end
end
end
17 changes: 16 additions & 1 deletion lib/ruby_ui/dropdown_menu/dropdown_menu_content.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
module RubyUI
class DropdownMenuContent < Base
def view_template(&block)
div(data: {ruby_ui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
div(**wrapper_attrs) do
div(**attrs, &block)
end
end
Expand All @@ -18,5 +18,20 @@ def default_attrs
class: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56"
}
end

def wrapper_attrs
{
class: [
"z-50 hidden group-[.is-absolute]/dropdown-menu:absolute",
"group-[.is-fixed]/dropdown-menu:fixed"
],
data: {ruby_ui__dropdown_menu_target: "content"},
style: {
width: "max-content",
top: "0",
left: "0"
}
}
end
end
end
57 changes: 43 additions & 14 deletions lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { Controller } from "@hotwired/stimulus";
import { computePosition, flip, shift, offset } from "@floating-ui/dom";
import {
computePosition,
flip,
shift,
offset,
autoUpdate,
} from "@floating-ui/dom";

export default class extends Controller {
static targets = ["trigger", "content", "menuItem"];
Expand All @@ -12,17 +18,34 @@ export default class extends Controller {
type: Object,
default: {},
},
}
};

connect() {
this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later
this.selectedIndex = -1;

this.#setupAutoUpdate();
}

disconnect() {
if (this.autoUpdateCleanup) {
this.autoUpdateCleanup();
}
}

#setupAutoUpdate() {
this.autoUpdateCleanup = autoUpdate(
this.triggerTarget,
this.contentTarget,
this.#computeTooltip.bind(this),
);
}

#computeTooltip() {
computePosition(this.triggerTarget, this.contentTarget, {
placement: this.optionsValue.placement || "top",
middleware: [flip(), shift(), offset(8)],
strategy: this.optionsValue.strategy || "absolute",
}).then(({ x, y }) => {
Object.assign(this.contentTarget.style, {
left: `${x}px`,
Expand All @@ -40,14 +63,16 @@ export default class extends Controller {
}

toggle() {
this.contentTarget.classList.contains("hidden") ? this.#open() : this.close();
this.contentTarget.classList.contains("hidden")
? this.#open()
: this.close();
}

#open() {
this.openValue = true;
this.#deselectAll();
this.#addEventListeners();
this.#computeTooltip()
this.#computeTooltip();
this.contentTarget.classList.remove("hidden");
}

Expand All @@ -59,15 +84,17 @@ export default class extends Controller {

#handleKeydown(e) {
// return if no menu items (one line fix for)
if (this.menuItemTargets.length === 0) { return; }
if (this.menuItemTargets.length === 0) {
return;
}

if (e.key === 'ArrowDown') {
if (e.key === "ArrowDown") {
e.preventDefault();
this.#updateSelectedItem(1);
} else if (e.key === 'ArrowUp') {
} else if (e.key === "ArrowUp") {
e.preventDefault();
this.#updateSelectedItem(-1);
} else if (e.key === 'Enter' && this.selectedIndex !== -1) {
} else if (e.key === "Enter" && this.selectedIndex !== -1) {
e.preventDefault();
this.menuItemTargets[this.selectedIndex].click();
}
Expand All @@ -76,7 +103,7 @@ export default class extends Controller {
#updateSelectedItem(direction) {
// Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
this.menuItemTargets.forEach((item, index) => {
if (item.getAttribute('aria-selected') === 'true') {
if (item.getAttribute("aria-selected") === "true") {
this.selectedIndex = index;
}
});
Expand All @@ -99,22 +126,24 @@ export default class extends Controller {
#toggleAriaSelected(element, isSelected) {
// Add or remove attribute
if (isSelected) {
element.setAttribute('aria-selected', 'true');
element.setAttribute("aria-selected", "true");
} else {
element.removeAttribute('aria-selected');
element.removeAttribute("aria-selected");
}
}

#deselectAll() {
this.menuItemTargets.forEach(item => this.#toggleAriaSelected(item, false));
this.menuItemTargets.forEach((item) =>
this.#toggleAriaSelected(item, false),
);
this.selectedIndex = -1;
}

#addEventListeners() {
document.addEventListener('keydown', this.boundHandleKeydown);
document.addEventListener("keydown", this.boundHandleKeydown);
}

#removeEventListeners() {
document.removeEventListener('keydown', this.boundHandleKeydown);
document.removeEventListener("keydown", this.boundHandleKeydown);
}
}
40 changes: 40 additions & 0 deletions test/ruby_ui/dropdown_menu_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,44 @@ def test_render_with_all_items

assert_match(/Open/, output)
end

def test_render_with_strategy_absolute
output = phlex do
RubyUI.DropdownMenu(options: {strategy: "absolute"}) do
RubyUI.DropdownMenuTrigger(class: "w-full") do
RubyUI.Button(variant: :outline) { "Open" }
end
RubyUI.DropdownMenuContent do
RubyUI.DropdownMenuLabel { "My Account" }
RubyUI.DropdownMenuSeparator
RubyUI.DropdownMenuItem(href: "#") { "Profile" }
RubyUI.DropdownMenuItem(href: "#") { "Billing" }
RubyUI.DropdownMenuItem(href: "#") { "Team" }
RubyUI.DropdownMenuItem(href: "#") { "Subscription" }
end
end
end

assert_match(/is-absolute/, output)
end

def test_render_with_strategy_fixed
output = phlex do
RubyUI.DropdownMenu(options: {strategy: "fixed"}) do
RubyUI.DropdownMenuTrigger(class: "w-full") do
RubyUI.Button(variant: :outline) { "Open" }
end
RubyUI.DropdownMenuContent do
RubyUI.DropdownMenuLabel { "My Account" }
RubyUI.DropdownMenuSeparator
RubyUI.DropdownMenuItem(href: "#") { "Profile" }
RubyUI.DropdownMenuItem(href: "#") { "Billing" }
RubyUI.DropdownMenuItem(href: "#") { "Team" }
RubyUI.DropdownMenuItem(href: "#") { "Subscription" }
end
end
end

assert_match(/is-fixed/, output)
end
end