ポップオーバーPopoverExperimental

状態とバリエーション

プロパティ

• 既定の幅を288pxに決め打ちした。資料は「3から5項目の設定やフィルターなら Popover、それ以上なら Modal に上げる」と書いています。GUNJO の PopoverContent は幅を288pxに固定し、高さも画面に収まる分で頭打ちにしました（--radix-popper-available-height と画面の高さから2rem引いた値の、小さいほう）。中身を増やすと先に窮屈になるので、Modal へ上げる判断が画面を見た時点で付きます。
• フォーカスの囲い込みはしない。資料は「Popover にフォーカストラップを付けると Modal と同じ重さになる」を禁止として挙げています。GUNJO は土台の Radix の Popover をそのまま使っており、開いたときのフォーカス移動と Escape と外側のクリックは受け持ちますが、Tab の囲い込みはしません。囲い込みが要るほど重い操作なら、最初から Modal を使う側の判断です。
• 画面端の逃げ方だけ既定を変えた。collisionPadding の既定を16にしてあります。0のままだと画面の端にぴったり貼り付いて読みにくいためです。portalContainer を渡すと、画面全体ではなくその要素の中に描きます。docs の埋め込みプレビューのように、画面いっぱいに出しては困る枠の中で使うために要ります。

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。