共有モーダルShareModalExperimental
公開リンクの有効化、URLコピー、共有状態の確認をまとめて扱うモーダルです。
プレビュー
状態とバリエーション
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| isOpen | boolean | - | 共有モーダルの表示状態です。 |
| item | ShareableItem | - | 共有状態を持つ対象アイテムです。 |
| onUpdate | (id, updates) => void | - | 共有情報が変わった時に親 state を更新します。 |
| onToggleShare | (id, enable) => ShareData | Promise<ShareData> | - | 共有の有効/無効をアプリ側で処理します。未指定時は apiEndpoint に POST します。 |
| onCopyShareUrl | (url) => void | Promise<void> | - | 共有 URL のコピー処理を上位で差し替えます。トーストなどのフィードバックをここで出せます。 |
| onOpenShareUrl | (url) => void | Promise<void> | - | 共有 URL を開く操作を上位で差し替えます。docs プレビューでは遷移せずトーストを出します。 |
| portalContainer | HTMLElement | null | - | docs preview やアプリ内フレームに overlay を閉じ込めるための任意コンテナです。 |
設計の判断
- 公開リンクの入り切りだけを持つ。資料は権限の段階（閲覧者・編集者・コメント可）とメールでの招待を核に挙げています。GUNJO の
ShareModalはそこまで持たず、「リンクを知っている人が見られるかどうか」の1つのスイッチと、そのURLのコピーと開くだけを扱います。誰に何を許すかはアプリの権限の設計そのもので、部品の側では決められないためです。 - コピーできたことは2秒だけ形で見せる。資料は「コピー成功を2秒間表示する」を挙げています。GUNJO も2秒で戻す作りで、アイコンをチェックに替えると同時に、吹き出しの文言も
copiedのラベルに差し替えます。クリップボードが使えない環境向けの古い手順への切り替えも部品の中にあります。資料が求めるaria-liveでの読み上げは、まだ入っていません。 - フォーカスの囲い込みと Escape は入っていません。閉じる手段は背景のクリックと右上のボタンの2つで、
roleとaria-modalとaria-labelledbyは付けてあります。ただし資料が求める Tab の囲い込みと Escape キーはこの部品には無く、ここは記事に対して足りていない箇所です。囲い込みが要る使い方をするなら、いまはSheetやDialogに載せ替えるのが確実です。
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。