---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.5
  - property: og:type
    content: article
  - property: article:section
    content: Платформа плагинов
  - property: og:title
    content: QueueSelect
  - property: article:tag
    content: Техническая инструкция
alternate:
  - https://yandex.ru/support/tracker/en/plugins/components/queue-select.md
  - https://yandex.ru/support/tracker/ru/plugins/components/queue-select.md
  - href: ru/plugins/components/queue-select.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tracker/ru/llms.txt

[← К списку компонентов](https://yandex.ru/support/tracker/ru/plugins/components/index.md)

# QueueSelect {#queue-select}

Выпадающий список для выбора очереди Трекера. Поддерживает статический список очередей, асинхронный поиск/саджест, иконки, состояние загрузки и диалог подтверждения перед сменой выбора.

## Базовое использование {#usage}

```tsx
import {QueueSelect} from '@weavix/tracker-components';
import type {QueueInfo} from '@weavix/tracker-components';

const queues: QueueInfo[] = [
    {key: 'DEV', display: 'Development'},
    {key: 'DESIGN', display: 'Design'},
];

<QueueSelect
    queues={queues}
    defaultQueue={queues[0]}
    onChange={(queue) => console.log(queue)}
/>;
```

## Использование с Tracker API (статический список + асинхронный саджест) {#tracker-api}

Загружает очереди один раз при монтировании и переключается на саджест-эндпоинт, как только пользователь начинает вводить текст.

```tsx
import React, {useEffect, useState} from 'react';
import {CancellablePromise} from '@gravity-ui/sdk';
import {QueueSelect} from '@weavix/tracker-components';
import type {QueueInfo} from '@weavix/tracker-components';

interface Props {
    trackerApi: TrackerApi;
    onChange: (queue: QueueInfo) => void;
}

export const QueueSelectWithApi: React.FC<Props> = ({trackerApi, onChange}) => {
    const [queues, setQueues] = useState<QueueInfo[]>([]);
    const [loading, setLoading] = useState(true);

    // Загрузка всех очередей при монтировании
    useEffect(() => {
        trackerApi.v3
            .get['/queues']()
            .then((result) => setQueues(result.data))
            .finally(() => setLoading(false));
    }, [trackerApi]);

    // Саджест при вводе пользователя
    const handleSearch = (text: string): CancellablePromise<QueueInfo[]> => {
        const promise = trackerApi.v3
            .get['/queues/_suggest']({queryParams: {input: text, fields: []}})
            .then((result) => result.data);

        return new CancellablePromise(promise, () => {});
    };

    return (
        <QueueSelect
            queues={queues}
            loading={loading}
            onSearch={handleSearch}
            onChange={onChange}
            placeholder="Выберите очередь"
        />
    );
};
```

## Основные свойства {#props}

#|
|| **Свойство** | **Тип** | **По умолчанию** | **Описание** ||
|| `queues` | `QueueInfo[] \| string[]` | — | Список очередей для отображения ||
|| `defaultQueue` | `QueueInfo \| string` | — | Очередь, выбранная по умолчанию при монтировании ||
|| `loading` | `boolean` | `false` | Состояние загрузки ||
|| `onSearch`
|

```ts
(text: string) =>
  Promise<QueueInfo[]>
```

| — | Асинхронный поиск при вводе текста ||
|| `onChange`
|

```ts
(queue: QueueInfo) =>
  void
```

| — | Колбэк при смене выбранной очереди ||
|| `initialEmpty` | `boolean` | `false` | Не выбирать очередь по умолчанию при монтировании ||
|| `withoutSuggest` | `boolean` | `false` | Отключить поле поиска внутри выпадающего списка ||
|| `withValueIcon` | `boolean` | `false` | Показывать иконку очереди рядом с выбранным значением ||
|| `confirmUpdate`
|

```ts
() =>
  Promise<{success: boolean}>
```

| — | Асинхронная проверка перед применением нового выбора ||
|| `error` | `string \| boolean` | — | Сообщение об ошибке или флаг ошибки ||
|| `placeholder` | `string` | — | Плейсхолдер при отсутствии выбора ||
|| `size` | `'xs'` \| `'s'` \| `'m'` \| `'l'` \| `'xl'` | `'m'` | Размер контрола ||
|| `withBorder` | `boolean` | `false` | Отображать рамку вокруг контрола ||
|| `className` | `string` | — | Дополнительный CSS-класс ||
|#