# LivaTagBox
Package: @dataliva/livalib
Description: @dataliva/livalib çoklu seçim (etiket) kutusu bileşeni.

DevExtreme'in TagBox bileşeni üzerine kurulu çoklu seçim kutusu. Arama
(`searchEnabled`), onay kutulu liste (`showSelectionControls`) ve butonla
uygulama (`applyValueMode="useButtons"`) varsayılan olarak açık gelir.

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

## Çoklu seçim

Dizi tabanlı `dataSource` ile birlikte `displayExpr` ve `valueExpr`
kullanılır; `defaultValue` başlangıç seçimini belirler.

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

```tsx
const urunler = [
  { id: 1, ad: "Klavye" },
  { id: 2, ad: "Mouse" },
  { id: 3, ad: "Monitör" },
  { id: 4, ad: "Kulaklık" },
  { id: 5, ad: "Webcam" },
  { id: 6, ad: "Mikrofon" },
];

<LivaTagBox
  dataSource={urunler}
  displayExpr="ad"
  valueExpr="id"
  label="Ürünler"
  placeholder="Ürün seçin"
  defaultValue={[1, 3]}
  width={320}
/>
```

## Kontrollü değer

`value` ve `onValueChanged` ile seçilen değer dizisi React state'inde tutulur.

**Örnek — Kontrollü değer:**

```tsx
const [value, setValue] = useState<number[]>([2]);

<LivaTagBox
  dataSource={urunler}
  displayExpr="ad"
  valueExpr="id"
  label="Ürünler"
  value={value}
  onValueChanged={(e) => setValue(e.value ?? [])}
  width={320}
/>
<span>{value.length} ürün seçildi</span>
```

## Seçim davranışı

`applyValueMode="instantly"` seçimleri butonsuz anında uygular;
`showSelectionControls={false}` onay kutularını gizler, `hideSelectedItems`
seçilenleri listeden çıkarır.

**Örnek — Seçim davranışı:**

```tsx
<LivaTagBox
  dataSource={urunler}
  displayExpr="ad"
  valueExpr="id"
  label="Anında uygula"
  applyValueMode="instantly"
  width={300}
/>
<LivaTagBox
  dataSource={urunler}
  displayExpr="ad"
  valueExpr="id"
  label="Sade liste"
  showSelectionControls={false}
  hideSelectedItems
  width={300}
/>
```

## Durumlar

**Örnek — Durumlar:**

```tsx
<LivaTagBox
  dataSource={urunler}
  displayExpr="ad"
  valueExpr="id"
  label="Devre dışı"
  defaultValue={[1, 2]}
  disabled
  width={300}
/>
<LivaTagBox
  dataSource={urunler}
  displayExpr="ad"
  valueExpr="id"
  label="Salt okunur"
  defaultValue={[4]}
  readOnly
  width={300}
/>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `dataSource` | `any[] \| { loadUrl, key?, pageSize?, paginate? }` | — |
| `value` | `any[]` | — |
| `defaultValue` | `any[]` | — |
| `displayExpr` | `string` | — |
| `valueExpr` | `string` | — |
| `onValueChanged` | `(e) => void` | — |
| `placeholder` | `string` | — |
| `label` | `string` | — |
| `variant` | `'standard' \| 'outlined' \| 'filled'` | `'standard'` |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `searchEnabled` | `boolean` | `true` |
| `showSelectionControls` | `boolean` | `true` |
| `applyValueMode` | `'useButtons' \| 'instantly'` | `'useButtons'` |
| `disabled` | `boolean` | `false` |
| `readOnly` | `boolean` | `false` |

Ayrıca DevExtreme `ITagBoxOptions`'tan gelen tüm prop'lar (ör.
`maxDisplayedTags`, `hideSelectedItems`, `selectAllMode`).