Hover Card

# frozen_string_literal: true

module RubyUI
	class HoverCard < Base
		def initialize(option: {}, **attrs)
			@options = option
			@options[:delay] ||= [500, 250]
			@options[:trigger] ||= "mouseenter focus click"
			super(**attrs)
		end

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

		private

		def default_attrs
			{
				class: [
					"group/hover-card",
					(strategy == "fixed") ? "is-fixed" : "is-absolute"
				],
				data: {
					controller: "ruby-ui--hover-card",
					ruby_ui__hover_card_options_value: @options.to_json
				}
			}
		end

		# An ancestor with `overflow: hidden` clips an absolutely positioned card;
		# `strategy: "fixed"` positions it against the viewport instead.
		def strategy
			@_strategy ||= @options[:strategy] || "absolute"
		end
	end
end

# frozen_string_literal: true

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

		private

		def default_attrs
			{
				data: {
					ruby_ui__hover_card_target: "content",
					state: :closed
				},
				class: "hidden group-[.is-absolute]/hover-card:absolute group-[.is-fixed]/hover-card:fixed z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none 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-[state=closed]:fill-mode-forwards 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"
			}
		end
	end
end

# frozen_string_literal: true

class Views::Docs::HoverCard < Views::Base
	def view_template
		component = "HoverCard"

		div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
			render Docs::Header.new(title: "Hover Card", description: "For sighted users to preview content available behind a link.")

			Heading(level: 2) { "Usage" }

			render Docs::VisualCodeExample.new(title: "Example", context: self) do
				<<~RUBY
					HoverCard do
						HoverCardTrigger do
							Button(variant: :link) { "@joeldrapper" } # Make this a link in order to navigate somewhere
						end
						HoverCardContent do
							div(class: "flex justify-between space-x-4") do
								Avatar do
									AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
									AvatarFallback { "JD" }
								end
								div(class: "space-y-1") do
									h4(class: "text-sm font-medium") { "@joeldrapper" }
									p(class: "text-sm") do
										"Creator of Phlex Components. Ruby on Rails developer."
									end
									div(class: "flex items-center pt-2") do
										svg(
											width: "15",
											height: "15",
											viewbox: "0 0 15 15",
											fill: "none",
											xmlns: "http://www.w3.org/2000/svg",
											class: "mr-2 h-4 w-4 opacity-70"
										) do |s|
											s.path(
												d:
													"M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z",
												fill: "currentColor",
												fill_rule: "evenodd",
												clip_rule: "evenodd"
											)
										end
										span(class: "text-xs text-muted-foreground") { "Joined December 2021" }
									end
								end
							end
						end
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "Escaping a clipping ancestor", description: "The card is positioned absolutely by default, so a positioned ancestor that hides its overflow — a scroll area, a table cell, a truncating container — clips it. The fixed strategy positions the card against the viewport instead, so it escapes.", context: self) do
				<<~RUBY
					div(class: "relative h-24 w-64 overflow-hidden rounded-md border p-4") do
						HoverCard(option: {strategy: "fixed"}) do
							HoverCardTrigger do
								Button(variant: :link) { "@joeldrapper" }
							end
							HoverCardContent do
								p(class: "text-sm") { "Not clipped by the container above." }
							end
						end
					end
				RUBY
			end

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

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

	private

	# def components
	#   [
	#     Docs::ComponentStruct.new(name: "PopoverController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/popover_controller.js", built_using: :stimulus),
	#     Docs::ComponentStruct.new(name: "HoverCard", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card.rb", built_using: :phlex),
	#     Docs::ComponentStruct.new(name: "HoverCardTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/trigger.rb", built_using: :phlex),
	#     Docs::ComponentStruct.new(name: "HoverCardContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/content.rb", built_using: :phlex)
	#   ]
	# end
end

# frozen_string_literal: true

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

		private

		def default_attrs
			{
				data: {
					ruby_ui__hover_card_target: "trigger"
				},
				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: {} },
    // make content width match the trigger element (true/false)
    matchWidth: { type: Boolean, default: false },
  };

  connect() {
    this.openDelay = this.delayAt(0, 500);
    this.closeDelay = this.delayAt(1, 250);
    this.openTimeout = null;
    this.closeTimeout = null;
    this.cleanup = null;
    this.selectedIndex = -1;
    this.boundHandleKeydown = this.handleKeydown.bind(this);
    this.addEventListeners();
  }

  // Teardown that cannot fail comes first: a missing target throws, and Stimulus skips the rest.
  disconnect() {
    this.clearTimers();
    document.removeEventListener("keydown", this.boundHandleKeydown);
    if (this.cleanup) {
      this.cleanup();
      this.cleanup = null;
    }
    this.removeEventListeners();
    // Nothing is left to wait for the exit animation, so apply the pending hide now.
    if (this.hasContentTarget) this.settleExit(this.contentTarget);
  }

  // Supports the tippy-style `delay` option: a number or a [open, close] tuple.
  delayAt(index, fallback) {
    const delay = this.optionsValue.delay;
    if (Array.isArray(delay)) return delay[index] ?? fallback;
    if (typeof delay === "number") return delay;
    return fallback;
  }

  addEventListeners() {
    this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
    this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
    this.triggerTarget.addEventListener("focusin", this.handleMouseEnter);
    this.triggerTarget.addEventListener("focusout", this.handleMouseLeave);
    this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
    this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
    this.contentTarget.addEventListener("focusin", this.handleMouseEnter);
    this.contentTarget.addEventListener("focusout", this.handleMouseLeave);
  }

  removeEventListeners() {
    if (this.hasTriggerTarget) {
      this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
      this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
      this.triggerTarget.removeEventListener("focusin", this.handleMouseEnter);
      this.triggerTarget.removeEventListener("focusout", this.handleMouseLeave);
    }

    if (this.hasContentTarget) {
      this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
      this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
      this.contentTarget.removeEventListener("focusin", this.handleMouseEnter);
      this.contentTarget.removeEventListener("focusout", this.handleMouseLeave);
    }
  }

  handleMouseEnter = () => {
    this.clearTimers();
    this.openTimeout = setTimeout(() => this.show(), this.openDelay);
  };

  handleMouseLeave = () => {
    this.clearTimers();
    this.closeTimeout = setTimeout(() => this.hide(), this.closeDelay);
  };

  clearTimers() {
    clearTimeout(this.openTimeout);
    clearTimeout(this.closeTimeout);
  }

  show() {
    this.openValue = true;
    this.contentTarget.classList.remove("hidden");
    this.contentTarget.dataset.state = "open";
    if (this.matchWidthValue) {
      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
    }
    document.addEventListener("keydown", this.boundHandleKeydown);
    this.updatePosition();
  }

  hide() {
    this.openValue = false;
    document.removeEventListener("keydown", this.boundHandleKeydown);
    this.deselectAll();
    if (this.cleanup) {
      this.cleanup();
      this.cleanup = null;
    }

    if (!this.hasContentTarget) return;

    this.contentTarget.dataset.state = "closed";
    this.hideAfterExitAnimation(this.contentTarget);
  }

  afterExit(content) {
    content.classList.add("hidden");
  }

  // Overlay exit — the same block in every overlay controller, so keep them in sync.
  exitAnimationNames = new WeakMap();

  hideAfterExitAnimation(animated) {
    const exitAnimations = animated
      .getAnimations()
      .filter((animation) => animation instanceof CSSAnimation);

    // No exit animation, or no box to run it in: animationend would never fire.
    if (exitAnimations.length === 0) {
      this.settleExit(animated);
      return;
    }

    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));
    animated.addEventListener("animationend", this.handleExitAnimationEnd);
    animated.addEventListener("animationcancel", this.handleExitAnimationEnd);
  }

  handleExitAnimationEnd = (event) => {
    // animationend bubbles — an animated child must not hide its container.
    if (event.target !== event.currentTarget) return;
    // Closing mid-open cancels the enter animation; only the exit run settles this.
    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;

    this.settleExit(event.currentTarget);
  };

  settleExit(animated) {
    animated.removeEventListener("animationend", this.handleExitAnimationEnd);
    animated.removeEventListener("animationcancel", this.handleExitAnimationEnd);
    // Reopened mid-exit: it is on its way back in, leave it visible.
    if (animated.dataset.state !== "closed") return;

    this.afterExit(animated);
  }

  updatePosition() {
    if (this.cleanup) this.cleanup();

    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
      computePosition(this.triggerTarget, this.contentTarget, {
        placement: this.optionsValue.placement || "bottom",
        middleware: [offset(4), flip(), shift({ padding: 8 })],
        // `fixed` positions against the viewport, so an ancestor with
        // `overflow: hidden` no longer clips the card.
        strategy: this.optionsValue.strategy || "absolute",
      }).then(({ x, y, placement }) => {
        Object.assign(this.contentTarget.style, {
          left: `${x}px`,
          top: `${y}px`,
        });
        this.contentTarget.dataset.side = placement.split("-")[0];
      });
    });
  }

  handleKeydown(e) {
    if (e.key === "Escape") {
      this.hide();
      return;
    }

    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) {
    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) {
    if (isSelected) {
      element.setAttribute("aria-selected", "true");
    } else {
      element.removeAttribute("aria-selected");
    }
  }

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

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