# LivaDropdownBox
Package: @dataliva/livalib
Description: @dataliva/livalib gömülü liste, tablo veya ağaç içeren açılır kutu bileşeni.

Açılır panelin içinde düz liste, DataGrid veya TreeList barındıran seçim
kutusu. `renderMode` prop'u panelin nasıl çizileceğini belirler; veri kaynağı
yerel bir dizi ya da uzak bir store yapılandırması olabilir.

```tsx
import { LivaDropdownBox } from "@dataliva/livalib";
```

## Düz liste

`renderMode="plain"` panelde basit bir liste gösterir. Örnekte `id` / `name`
alanlı küçük bir dizi kullanılıyor.

**Örnek — Düz liste (plain):**

```tsx
<LivaDropdownBox
  renderMode="plain"
  label="Şehir"
  dataSource={sehirler}
  valueExpr="id"
  displayExpr="name"
  value={value}
  onValueChanged={(e) => setValue(e.value ?? null)}
  width={300}
/>
```

## Veri tablosu

`renderMode="datagrid"` (varsayılan mod) panelde kolon tanımlı bir DataGrid
açar; arama ve filtreleme tablodan gelir.

**Örnek — Veri tablosu (datagrid):**

```tsx
<LivaDropdownBox
  renderMode="datagrid"
  label="Personel"
  dataSource={personel}
  valueExpr="id"
  displayExpr="name"
  columns={[
    { dataField: "name", caption: "Ad" },
    { dataField: "department", caption: "Departman" },
  ]}
  contentHeight={250}
  width={320}
/>
```

## Ağaç görünümü

`renderMode="treelist"` hiyerarşik veriyi ağaç olarak gösterir. Düz veride
üst kayıt `parentIdExpr` alanıyla, kök düzey `rootValue` ile belirlenir.

**Örnek — Ağaç görünümü (treelist):**

```tsx
<LivaDropdownBox
  renderMode="treelist"
  label="Birim"
  dataSource={birimler}
  valueExpr="id"
  displayExpr="name"
  parentIdExpr="parentId"
  rootValue={0}
  dataStructure="plain"
  columns={[{ dataField: "name", caption: "Birim" }]}
  contentHeight={250}
  width={320}
/>
```

## Çoklu seçim

`selectionMode="multiple"` onay kutulu çoklu seçim açar; `value` bir dizi
olarak yönetilir.

**Örnek — Çoklu seçim:**

```tsx
<LivaDropdownBox
  renderMode="datagrid"
  selectionMode="multiple"
  label="Personel"
  dataSource={personel}
  valueExpr="id"
  displayExpr="name"
  columns={[
    { dataField: "name", caption: "Ad" },
    { dataField: "department", caption: "Departman" },
  ]}
  value={selected}
  onValueChanged={(e) => setSelected(e.value ?? [])}
  contentHeight={250}
  width={320}
/>
<p>{selected.length} kişi seçildi</p>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `renderMode` | `'plain' \| 'datagrid' \| 'treelist'` | `'datagrid'` |
| `dataSource` | `any[] \| StoreDataSourceConfig` | — |
| `value` | `any \| any[]` | — |
| `valueExpr` | `string` | `'id'` |
| `displayExpr` | `string \| ((item: any) => string)` | `'name'` |
| `keyExpr` | `string` | `valueExpr` |
| `columns` | `IColumnProps[]` | `[]` |
| `selectionMode` | `'single' \| 'multiple'` | `'single'` |
| `contentHeight` | `number \| string` | `400` |
| `parentIdExpr` | `string` | `'parentId'` |
| `rootValue` | `any` | `null` |
| `dataStructure` | `'plain' \| 'tree'` | `'plain'` |
| `label` | `string` | — |
| `onValueChanged` | `(e: ValueChangedEvent) => void` | — |
| `onSelectionChanged` | `(e: LivaDropdownBoxSelectionChangedEvent) => void` | — |

Ayrıca DevExtreme `IDropDownBoxOptions`'tan gelen tüm prop'lar kullanılabilir
(ör. `placeholder`, `width`, `disabled`).