# ListVirtual

A searchable dropdown component with server-side filtering, infinite scrolling, and support for both single and multiple selection.

## Features

* Server-side search
* Infinite scrolling
* Single select mode
* Multiple select mode
* Custom request headers via `ApiProvider`
* Default value support
* Material UI integration

---

## Installation

```bash
npm install your-library-name
```

## Import

```jsx
import { ApiProvider, ListVirtual } from "your-library-name";
```

---

## Setup

Wrap your application or component with `ApiProvider` to provide API headers.

```jsx
<ApiProvider
  headers={{
    Authorization: `Bearer ${token}`,
  }}
>
  <ListVirtual
    id="company-select"
    label="Company"
    name="name"
    url="/company"
  />
</ApiProvider>
```

---

## Single Selection

```jsx
const [company, setCompany] = useState(null);

<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  getData={(row) => {
    setCompany(row);
  }}
/>
```

### Selected Value

```js
{
  id: 123,
  name: "My Company"
}
```

---

## Multiple Selection

```jsx
const [companies, setCompanies] = useState([]);

<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  multiple
  getData={(rows) => {
    setCompanies(rows);
  }}
/>
```

### Selected Value

```js
[
  {
    id: 1,
    name: "Company A"
  },
  {
    id: 2,
    name: "Company B"
  }
]
```

---

## Using Default Value

### Single Selection

```jsx
<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  defaultValue={{
    id: 123,
    name: "My Company"
  }}
/>
```

### Multiple Selection

```jsx
<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  multiple
  defaultValue={[
    {
      id: 1,
      name: "Company A"
    },
    {
      id: 2,
      name: "Company B"
    }
  ]}
/>
```

---

## Props

| Prop         | Type           | Default   | Description                               |
| ------------ | -------------- | --------- | ----------------------------------------- |
| id           | string         | -         | Unique component identifier               |
| label        | string         | -         | TextField label                           |
| name         | string         | -         | Property name used for display            |
| url          | string         | -         | API endpoint used to fetch data           |
| getData      | function       | undefined | Callback triggered when selection changes |
| defaultValue | object | array | undefined | Initial selected value                    |
| multiple     | boolean        | false     | Enable multiple selection mode            |
| disabled     | boolean        | false     | Disable the component                     |
| required     | boolean        | false     | Mark field as required                    |
| error        | boolean        | false     | Error state                               |
| helperText   | string         | undefined | Helper text displayed below the field     |
| size         | string         | "medium"  | TextField size (`small` or `medium`)      |
| lengthData   | number         | 100       | Number of records fetched per request     |
| filter       | array          | []        | Additional API filters                    |
| isApiGo      | boolean        | false     | Use Go API request mode                   |

---

## Custom Filters

```jsx
<ListVirtual
  id="company-select"
  label="Company"
  name="name"
  url="/company"
  filter={[
    {
      name: "status",
      value: 1,
      logic_operator: "="
    }
  ]}
/>
```

---

## API Response Format

The component expects the API response to have the following structure:

```json
{
  "data": [
    {
      "id": 1,
      "name": "Company A"
    }
  ],
  "totalRecord": 100
}
```

---

## Notes

* The property specified in the `name` prop is used as the displayed label.
* Infinite scrolling automatically loads additional records when the user reaches the bottom of the list.
* In multiple mode, the `getData` callback returns an array of selected objects.
* In single mode, the `getData` callback returns a single selected object.