コンテキストメニュー

hc-context-menu は、ユーザーが右クリックした場所にメニューを表示します — shadcn の ContextMenu に相当します。メニューの面を丸ごと再利用します — 同じ .hc-menu マークアップ、項目、セパレータ、ラベル、menuitemcheckbox / menuitemradio — なので新しい CSS はありません。違いは開き方だけです: トリガーボタンにアンカーされる代わりに、contextmenu イベント経由でポインタ位置に開きます。

ビヘイビアは installContextMenu にあります。

別名: 右クリックメニュー。

基本の HTML

右クリックでカスタムメニューを表示すべき領域に data-hc-context-menu="<menu-id>" を足し、.hc-menu ポップオーバーを指させます。

Right-click (or focus + Shift+F10) inside this box.

<div data-hc-context-menu="file-ctx">…right-clickable region…</div>

<div class="hc-menu" id="file-ctx" popover role="menu" aria-label="File actions">
  <button class="hc-menu__item" role="menuitem" type="button">Open</button>
  <button class="hc-menu__item" role="menuitem" type="button">Rename</button>
  <button class="hc-menu__item" role="menuitemcheckbox" aria-checked="false" type="button">Bookmark</button>
  <hr class="hc-menu__separator">
  <button class="hc-menu__item" role="menuitem" type="button" data-variant="error">Delete</button>
</div>

メニューの面はドロップダウンのメニューと同一なので、そちらでドキュメントされているすべて — menuitemcheckbox / menuitemradio、グループラベル、破壊的な data-variant="error" 項目 — がここでも機能します。

JavaScript

import { installContextMenu } from '@hypermedia-components/core';
installContextMenu(); // idempotent; returns an uninstaller

ゼロ設定の @hypermedia-components/core/behaviors エントリは自動でインストールします。

開き方とキーボード

右クリック(およびタッチの長押し、キーボードの Menu キー)は contextmenu イベントを発火します。ビヘイビアは preventDefault() でネイティブメニューをキャンセルし、ビューポート内に収まるようクランプしてポインタ位置にポップオーバーを開きます。
Shift+F10 はフォーカス中の要素の位置でメニューを開きます。 Shift+F10 は contextmenu イベントを発火しないため、別途処理されています。ビヘイビアに届くには、領域(またはフォーカス可能な子孫)がフォーカスを保持できる必要があります — 汎用の領域には tabindex="0" を足すか、中のフォーカス可能な行 / コントロールに頼ってください。

開いた後のナビゲーションは標準のメニューキーボード契約です: ↓ / ↑ が項目間を移動、Home / End が最初 / 最後の有効な項目へジャンプ、頭文字のタイプアヘッド、Tab と Escape が閉じる。無効な項目はスキップされます。Escape / 外側クリックの解散とフォーカス復元はネイティブの popover から来ます。

選択イベント

項目を選ぶと、ドロップダウンメニューと同じバブリングする hc:menuselect イベントが、contextTarget — 右クリックされた要素 — を加えて発火します:

menu.addEventListener('hc:menuselect', (e) => {
  const { item, contextTarget, checked } = e.detail;
  // contextTarget is the element the menu was opened on — e.g. the row
  // or file the action applies to.
});

素の menuitem は選択後にメニューを閉じます。 menuitemcheckbox / menuitemradio は複数トグルできるよう開いたままにします。

サブメニュー

コンテキストメニューはドロップダウンのサブメニューサポートを共有します: menuitem に、入れ子の .hc-menu を指す data-hc-submenu="<id>" を与えます。ホバーまたは → で開き、← / Esc で閉じ、末端を選ぶとツリー全体が閉じます。完全なマークアップとインタラクションモデルはメニュー → サブメニューを参照してください。

htmx での利用

hc:menuselect から直接リクエストを配線し、右クリックされた要素でアクションをスコープします:

<ul id="files">
  <li data-hc-context-menu="row-ctx" data-id="42">report.pdf</li>
  …
</ul>

<div class="hc-menu" id="row-ctx" popover role="menu" aria-label="Row actions"
     data-hx-post="/files/delete"
     data-hx-trigger="hc:menuselect"
     data-hx-include="this">
  <button class="hc-menu__item" role="menuitem" type="button" data-variant="error">Delete</button>
</div>

htmx:configRequest ハンドラで event.detail.contextTarget.dataset.id を読み、対象行の id をリクエストに添付してください。

Hyperscript

右クリックされた行にインラインで作用します — detail.contextTarget はメニューが開かれた要素です:

<div class="hc-menu" id="row-ctx" popover role="menu" aria-label="Row actions"
     _="on hc:menuselect call rowAction(event.detail.item.dataset.action, event.detail.contextTarget)">
  …
</div>

さらなるパターン: Hyperscript → コンポーネントイベントへの反応。

アクセシビリティ

ポップアップは menuitem の子を持つ role="menu" を使います — ドロップダウンと同じ WAI-ARIA APG メニューパターンです。
キーボードの経路を用意してください: Menu キーは contextmenu イベント経由で機能し、Shift+F10 は明示的に処理されます — ただし領域がフォーカスを受けられる場合だけです。領域かその行をフォーカス可能にしてください。
コンテキストメニューをアクションへの唯一の経路にしないでください。破壊的 / 重要なアクションは、見えるコントロールやドロップダウンメニューにも重ねてください。

テーマ用トークン

独自のものはありません — メニューの面を描画するため、menu.* トークン(と --hc-menu-* 変数)が見た目を駆動します。

CSS 変数

独自のものはありません — 面は hc-menu なので、 --hc-menu-* 変数がそのまま適用されます。