Dropdown Menu

# frozen_string_literal: true

module RubyUI
	class DropdownMenu < Base
		def initialize(options: {}, **attrs)
			@options = options
			super(**attrs)
		end

		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				class: [
					"z-50",
					"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

# frozen_string_literal: true

module RubyUI
	class DropdownMenuContent < Base
		def view_template(&block)
			div(**wrapper_attrs) do
				div(**attrs, &block)
			end
		end

		private

		def default_attrs
			{
				data: {
					state: :open
				},
				class: "z-50 min-w-[8rem] 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

# frozen_string_literal: true

class Views::Docs::DropdownMenu < Views::Base
	def view_template
		component = "DropdownMenu"
		div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
			render Docs::Header.new(title: "Dropdown Menu", description: "Displays a menu to the user — such as a set of actions or functions — triggered by a button.")

			Heading(level: 2) { "Usage" }

			render Docs::VisualCodeExample.new(title: "Example", context: self) do
				<<~RUBY
					DropdownMenu do
						DropdownMenuTrigger(class: 'w-full') do
							Button(variant: :outline) { "Open" }
						end
						DropdownMenuContent do
							DropdownMenuLabel { "My Account" }
							DropdownMenuSeparator
							DropdownMenuItem(href: '#') { "Profile" }
							DropdownMenuItem(href: '#') { "Billing" }
							DropdownMenuItem(href: '#') { "Team" }
							DropdownMenuItem(href: '#') { "Subscription" }
						end
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "Placement", description: "If the DropdownMenu conflicts with edge, it will auto-adjust it's placement", context: self) do
				<<~RUBY
					div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do
						# -- TOP --
						DropdownMenu(options: { placement: 'top' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'top' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'top-start' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'top-end' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						# -- BOTTOM --
						DropdownMenu(options: { placement: 'bottom' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'bottom-start' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'bottom-end' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						# -- LEFT --
						DropdownMenu(options: { placement: 'left' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'left' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'left-start' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'left-end' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						# -- RIGHT --
						DropdownMenu(options: { placement: 'right' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'right' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'right-start' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end

						DropdownMenu(options: { placement: 'right-end' }) do
							DropdownMenuTrigger(class: 'w-full') do
								Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }
							end
							DropdownMenuContent do
								DropdownMenuLabel { "My Account" }
								DropdownMenuSeparator
								DropdownMenuItem(href: '#') { "Profile" }
								DropdownMenuItem(href: '#') { "Billing" }
								DropdownMenuItem(href: '#') { "Team" }
								DropdownMenuItem(href: '#') { "Subscription" }
							end
						end
					end
				RUBY
			end

			render Components::ComponentSetup::Tabs.new(component_name: component)

			render Docs::ComponentsTable.new(component_files(component))
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class DropdownMenuItem < Base
		def initialize(as: :a, href: "#", **attrs)
			@as = as
			@href = href
			super(**attrs)
		end

		def view_template(&)
			if @as == :div
				div(**attrs, &)
			else
				a(**attrs, &)
			end
		end

		private

		def default_attrs
			base = {
				role: "menuitem",
				class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
				data_action: "click->ruby-ui--dropdown-menu#close",
				data_ruby_ui__dropdown_menu_target: "menuItem",
				tabindex: "-1",
				data_orientation: "vertical"
			}
			base[:href] = @href unless @as == :div
			base
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class DropdownMenuLabel < Base
		def view_template(&)
			h3(**attrs, &)
		end

		private

		def default_attrs
			{
				class: "px-2 py-1.5 text-sm font-semibold"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class DropdownMenuSeparator < Base
		def view_template
			div(**attrs)
		end

		private

		def default_attrs
			{
				role: "separator",
				aria_orientation: "horizontal",
				class: "-mx-1 my-1 h-px bg-muted"
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class DropdownMenuTrigger < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				data: {ruby_ui__dropdown_menu_target: "trigger", action: "click->ruby-ui--dropdown-menu#toggle"},
				class: "inline-block"
			}
		end
	end
end

import { Controller } from "@hotwired/stimulus";
import {
  computePosition,
  flip,
  shift,
  offset,
  autoUpdate,
} from "@floating-ui/dom";

export default class extends Controller {
  static targets = ["trigger", "content", "menuItem"];
  static values = {
    open: {
      type: Boolean,
      default: false,
    },
    options: {
      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`,
        top: `${y}px`,
      });
    });
  }

  onClickOutside(event) {
    if (!this.openValue) return;
    if (this.element.contains(event.target)) return;

    event.preventDefault();
    this.close();
  }

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

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

  close() {
    this.openValue = false;
    this.#removeEventListeners();
    this.contentTarget.classList.add("hidden");
  }

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

    if (e.key === "ArrowDown") {
      e.preventDefault();
      this.#updateSelectedItem(1);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      this.#updateSelectedItem(-1);
    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
      e.preventDefault();
      this.menuItemTargets[this.selectedIndex].click();
    }
  }

  #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") {
        this.selectedIndex = index;
      }
    });

    if (this.selectedIndex >= 0) {
      this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
    }

    this.selectedIndex += direction;

    if (this.selectedIndex < 0) {
      this.selectedIndex = this.menuItemTargets.length - 1;
    } else if (this.selectedIndex >= this.menuItemTargets.length) {
      this.selectedIndex = 0;
    }

    this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
  }

  #toggleAriaSelected(element, isSelected) {
    // Add or remove attribute
    if (isSelected) {
      element.setAttribute("aria-selected", "true");
    } else {
      element.removeAttribute("aria-selected");
    }
  }

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

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

  #removeEventListeners() {
    document.removeEventListener("keydown", this.boundHandleKeydown);
  }
}

rake stimulus:manifest:update

// with yarn
yarn add @floating-ui/dom
// with npm
npm install @floating-ui/dom
// with importmaps
bin/importmap pin @floating-ui/dom