Popover

alternative.html.erb

<div data-controller="popover">
  <button class="btn" popovertarget="popover" data-popover-target="button">
    Open popover
  </button>

  <div popover id="popover" class="popover" data-popover-target="menu" data-action="beforetoggle->popover#update">
    <%= render "dimensions_form" %>
  </div>
</div>

popover.css

.popover {
  background-color: var(--color-bg);
  border-width: var(--border);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  inline-size: var(--popover-width, var(--size-72));
  margin-block: var(--size-1);
  padding: var(--size-4);

  /* Anchor position */
  inset-area: block-end;
  position-anchor: var(--popover-anchor);
  position-try-options: flip-block, flip-inline, flip-block flip-inline;

  /* Setup animation */
  opacity: 0;
  transform: var(--scale-95);
  transition-behavior: allow-discrete;
  transition-duration: var(--time-150);
  transition-property: display, overlay, opacity, transform;

  /* In animation */
  &:popover-open {
    opacity: 1; transform: var(--scale-100);
  }

  /* Out animation */
  @starting-style {
    &:popover-open {
      opacity: 0; transform: var(--scale-95);
    }
  }
}

.popover--bottom-start {
  inset-area: block-end span-inline-end;
}

.popover--bottom-end {
  inset-area: block-end span-inline-start;
}

.popover--top-center {
  inset-area: block-start;
}

.popover--top-start {
  inset-area: block-start span-inline-end;
}

.popover--top-end {
  inset-area: block-start span-inline-start;
}

popover.html

<button popovertarget="my_popover" class="btn btn--outline" style="anchor-name: --my-popover-toggle;">
  Open popover
</button>

<div popover id="my_popover" class="popover popover--bottom-start" style="--popover-anchor: --my-popover-toggle; --popover-width: 20rem;">
  <div class="grid gap">
      <div class="flex flex-col gap-sm">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-subtle">Set the dimensions for the layer.</p>
      </div>
      <div class="grid gap-sm">
        <div class="grid grid-cols-3 items-center gap">
          <label for="width" class="text-sm font-medium">Width</label>
          <input type="text" id="width" value="100%" class="input col-span-2" style="block-size: 2rem;" />
        </div>
        <div class="grid grid-cols-3 items-center gap">
          <label for="maxWidth" class="text-sm font-medium">Max. width</label>
          <input type="text" id="maxWidth" value="300px" class="input col-span-2" style="block-size: 2rem;" />
        </div>
        <div class="grid grid-cols-3 items-center gap">
          <label for="height" class="text-sm font-medium">Height</label>
          <input type="text" id="height" value="25px" class="input col-span-2" style="block-size: 2rem;" />
        </div>
        <div class="grid grid-cols-3 items-center gap">
          <label for="maxHeight" class="text-sm font-medium">Max. height</label>
          <input type="text" id="maxHeight" value="none" class="input col-span-2" style="block-size: 2rem;" />
        </div>
      </div>
    </div>
</div>

popover_controller.js

import { Controller } from "@hotwired/stimulus"
import { computePosition, flip, shift, offset, autoUpdate } from "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm";

export default class extends Controller {
  static targets = [ "button", "menu" ]
  static values  = { placement: { type: String, default: "bottom" } }
  
  initialize() {
    this.update = this.update.bind(this)
  }
  
  connect() {
    this.cleanup = autoUpdate(this.buttonTarget, this.menuTarget, this.update)
  }

  disconnect() {
    this.cleanup()
  }

  update() {
    computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
      Object.assign(this.menuTarget.style, { left: `${x}px`, top: `${y}px`})
    })
  }
  
  get #options() {
    return { placement: this.placementValue, middleware: [offset(4), flip(), shift({padding: 4})] }
  }
}