controller.js

// src/controllers/clipboard_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu"];
  static classes = ['entering', 'enteringTo', 'enteringFrom', 'leaving', 'leavingTo', 'leavingFrom']
  static values = {
    enterTimeout: { type: Number, default: 1000 },
    leaveTimeout: { type: Number, default: 1000 },
    hidden: Boolean
  }

  close() {
    this._hide()
    this.menuTarget.remove()
  }

  _show() {
    this.menuTarget.classList.add(...this.enteringClasses)

    requestAnimationFrame(() => {
      this.menuTarget.classList.add(...this.enteringToClasses)
      this.menuTarget.classList.remove(...this.enteringFromClasses)
      setTimeout(() => {
        this.menuTarget.classList.remove(...this.enteringClasses)
      }, this.enterTimeoutValue)
    })
  }

  _hide() {
    this.menuTarget.classList.add(...this.leavingToClasses)
    this.menuTarget.classList.remove(...this.leavingFromClasses)
    this.menuTarget.classList.add(...this.leavingClasses)

    setTimeout(() => {
      this.menuTarget.classList.remove(...this.leavingClasses)
    }, this.leaveTimeoutValue)
  }

  toggle() {
    this.hiddenValue == true ? this._show() : this._hide();

    this.hiddenValue = !this.hiddenValue
  }
}