BjDropdown

import { BjDropdown } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjDropdown trigger={<button type="button" className="bj-btn">Menu</button>}>
      <li className="bj-dropdown__item" role="menuitem">Action 1</li>
      <li className="bj-dropdown__item" role="menuitem">Action 2</li>
      <li className="bj-dropdown__item" role="menuitem">Action 3</li>
    </BjDropdown>
  )
}

/* align="left" direction="down" size="md" — rien à passer */
<BjDropdown trigger={<button type="button" className="bj-btn">Défauts</button>}>
  <li className="bj-dropdown__item" role="menuitem">Item</li>
</BjDropdown>

<BjDropdown align="left" trigger={<button type="button" className="bj-btn">Gauche</button>}>
  <li className="bj-dropdown__item" role="menuitem">A</li>
</BjDropdown>

<BjDropdown align="right" trigger={<button type="button" className="bj-btn">Droite</button>}>
  <li className="bj-dropdown__item" role="menuitem">A</li>
</BjDropdown>

<BjDropdown direction="down" trigger={<button type="button" className="bj-btn">Vers le bas</button>}>
  <li className="bj-dropdown__item" role="menuitem">A</li>
</BjDropdown>

<BjDropdown direction="up" trigger={<button type="button" className="bj-btn">Vers le haut</button>}>
  <li className="bj-dropdown__item" role="menuitem">A</li>
</BjDropdown>

<BjDropdown size="md" trigger={<button type="button" className="bj-btn">Taille MD</button>}>
  <li className="bj-dropdown__item" role="menuitem">A</li>
</BjDropdown>

<BjDropdown size="sm" trigger={<button type="button" className="bj-btn bj-btn--sm">Taille SM</button>}>
  <li className="bj-dropdown__item" role="menuitem">A</li>
</BjDropdown>

<BjDropdown align="right" direction="up" size="sm" trigger={<button type="button" className="bj-btn bj-btn--sm">Menu</button>}>
  <li className="bj-dropdown__item" role="menuitem">Action</li>
</BjDropdown>

import { BjDropdown } from '@flrxnt/dsbj/react'

export function Triggers() {
  return (
    <>
      <BjDropdown trigger={<button type="button" className="bj-btn">Bouton</button>}>
        <li className="bj-dropdown__item" role="menuitem">Un</li>
      </BjDropdown>
      <BjDropdown
        trigger={
          <span className="bj-link" role="button" tabIndex={0}>
            Lien factice
          </span>
        }
      >
        <li className="bj-dropdown__item" role="menuitem">Deux</li>
      </BjDropdown>
    </>
  )
}

import { BjDropdown } from '@flrxnt/dsbj/react'

/** Exemples de toutes les combinaisons align × direction × size (2×2×2) */
export function DropdownMatrix() {
  const align = ['left', 'right'] as const
  const direction = ['down', 'up'] as const
  const size = ['md', 'sm'] as const
  return (
    <>
      {align.map((a) =>
        direction.map((d) =>
          size.map((s) => (
            <BjDropdown
              key={`${a}-${d}-${s}`}
              align={a}
              direction={d}
              size={s}
              trigger={
                <button type="button" className="bj-btn">
                  {a} / {d} / {s}
                </button>
              }
            >
              <li className="bj-dropdown__item" role="menuitem">Action</li>
            </BjDropdown>
          )),
        ),
      )}
    </>
  )
}

import { BjDropdown } from '@flrxnt/dsbj/react'

export function MenuItems() {
  return (
    <BjDropdown trigger={<button type="button" className="bj-btn">Options</button>}>
      <li className="bj-dropdown__item" role="menuitem">
        <button type="button" className="bj-dropdown__item-btn">Sous-action</button>
      </li>
      <li className="bj-dropdown__item" role="menuitem">Texte seul</li>
    </BjDropdown>
  )
}