ボタンを押すとパネルが開く動作を提供するプリミティブコンポーネントです。DropdownMenuButton/FilterDropdown/SortDropdownで実現できない独自のドロップダウンUIを提供するときに使います。
大きく分けるとパネルを開くための引き金となるDropdownTriggerとパネル自体を指すDropdownContentから構成されます。
import
import { DropdownTrigger, DropdownContent, DropdownCloser, Dropdown } from 'smarthr-ui'
Props
DropdownTrigger
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| tooltip | { message: ReactNode; show?: boolean; } | - | - | - |
DropdownContent
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| controllable | boolean | false | - | true のとき、ドロップダウン内のコンテンツをクリックしてもドロップダウンが閉じなくなる。。 この場合は、 DropdownCloser を用いてドロップダウンを閉じることができる。 |
DropdownCloser
（固有 Props なし）
Dropdown
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| onOpen | () => void | - | - | - |
| onClose | () => void | - | - | - |
実装ルール
a11y-trigger-has-button
DropdownTriggerやDialogTrigger, DisclosureTrigger内にbutton要素を設置することを強制するルールです。
❌ NG:
// Triggerの子はbutton要素である必要がある
<DropdownTrigger>
<Xxx />
</DropdownTrigger>
✅ OK:
<DropdownTrigger>
<Button />
</DropdownTrigger>
詳細は eslint-plugin-smarthr の各ルール README を参照してください。
使い方チェックリスト
使い方チェックリスト（Layer 3）は設定されていません。