FieldSelect

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

const options: ItemProps[] = [
  { id: 's', content: { label: 'Small (1 vCPU, 2 GB)' } },
  { id: 'm', content: { label: 'Medium (2 vCPU, 4 GB)' } },
  { id: 'l', content: { label: 'Large (4 vCPU, 8 GB)' } },
  { id: 'xl', content: { label: 'X-Large (8 vCPU, 16 GB)' } },
];

export function Select() {
  const [value, setValue] = useState<ItemId | undefined>('m');
  return (
    <FieldSelect
      label='Размер инстанса'
      placeholder='Выберите размер'
      selection='single'
      items={options}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

const options: ItemProps[] = [
  { id: 'ru-1', content: { label: 'ru-central1-a' } },
  { id: 'ru-2', content: { label: 'ru-central1-b' } },
  { id: 'ru-3', content: { label: 'ru-central1-c' } },
  { id: 'kz-1', content: { label: 'kz-central1-a' } },
];

export function SelectMultiple() {
  const [value, setValue] = useState<ItemId[]>(['ru-1', 'ru-2']);
  return (
    <FieldSelect
      label='Зоны доступности'
      placeholder='Выберите зоны'
      selection='multiple'
      chips
      items={options}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

const options: ItemProps[] = [
  { id: 'ubuntu', content: { label: 'Ubuntu 22.04 LTS' } },
  { id: 'debian', content: { label: 'Debian 12' } },
  { id: 'centos', content: { label: 'CentOS Stream 9' } },
  { id: 'alpine', content: { label: 'Alpine Linux 3.19' } },
  { id: 'rocky', content: { label: 'Rocky Linux 9' } },
];

export function SelectSearchable() {
  const [value, setValue] = useState<ItemId | undefined>(undefined);
  return (
    <FieldSelect
      label='Образ ОС'
      placeholder='Начните вводить название'
      hint='Нечёткий поиск: «aple» найдёт «Alpine Linux»'
      selection='single'
      searchable
      enableFuzzySearch
      items={options}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemProps } from '@cloud-ru/ds-list';

const options: ItemProps[] = [
  { id: 'm', content: { label: 'Medium (2 vCPU, 4 GB)' } },
  { id: 'l', content: { label: 'Large (4 vCPU, 8 GB)' } },
];

export function SelectReadonly() {
  return <FieldSelect label='Размер инстанса' readonly selection='single' items={options} defaultValue='l' />;
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

const options: ItemProps[] = [
  { id: 'read', content: { label: 'Чтение' }, disabled: true },
  { id: 'write', content: { label: 'Запись' } },
  { id: 'delete', content: { label: 'Удаление' } },
  { id: 'admin', content: { label: 'Администрирование' } },
];

export function SelectDisabledChips() {
  // Право «Чтение» обязательно: его чип не получает кнопку удаления и не сбрасывается при очистке.
  const [value, setValue] = useState<ItemId[]>(['read', 'write']);
  return (
    <FieldSelect
      label='Права доступа'
      placeholder='Выберите права'
      selection='multiple'
      chips
      items={options}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useMemo, useState } from 'react';

const ALL_REGIONS: ItemProps[] = [
  { id: 'ru-moscow', content: { label: 'Москва' } },
  { id: 'ru-spb', content: { label: 'Санкт-Петербург' } },
  { id: 'ru-novosibirsk', content: { label: 'Новосибирск' } },
  { id: 'ru-ekaterinburg', content: { label: 'Екатеринбург' } },
  { id: 'ru-kazan', content: { label: 'Казань' } },
];

export function SelectAutocomplete() {
  const [value, setValue] = useState<ItemId | undefined>(undefined);
  const [query, setQuery] = useState('');

  // Фильтрацию выполняет потребитель (имитация backend-поиска): FieldSelect с `autocomplete`
  // не фильтрует список повторно, а строка поиска управляется через `search`.
  const items = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return ALL_REGIONS;
    return ALL_REGIONS.filter(item => {
      const content = 'content' in item ? item.content : undefined;
      const option = content && typeof content === 'object' && 'label' in content ? String(content.label) : '';
      return option.toLowerCase().includes(q);
    });
  }, [query]);

  return (
    <FieldSelect
      label='Регион'
      placeholder='Начните вводить название'
      hint='autocomplete: фильтрует потребитель (серверный поиск), не сам компонент'
      selection='single'
      autocomplete
      search={{ value: query, onChange: setQuery }}
      items={items}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

const PRESET_TAGS: ItemProps[] = [
  { id: 'frontend', content: { label: 'frontend' } },
  { id: 'backend', content: { label: 'backend' } },
  { id: 'infra', content: { label: 'infra' } },
];

export function SelectCreatable() {
  const [value, setValue] = useState<ItemId[]>(['frontend']);

  return (
    <FieldSelect
      label='Теги'
      placeholder='Введите тег и нажмите Enter'
      hint='addOptionByEnter: введённый текст по Enter становится новым выбранным значением (чипом)'
      selection='multiple'
      addOptionByEnter
      items={PRESET_TAGS}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

const regions: ItemProps[] = [
  { id: 'ru-moscow-1', content: { label: 'ru-moscow-1' } },
  { id: 'ru-moscow-2', content: { label: 'ru-moscow-2' } },
  { id: 'kz-ala-1', content: { label: 'kz-ala-1' } },
  { id: 'gis-tomsk-1', content: { label: 'gis-tomsk-1' } },
];

export function SelectPinned() {
  const [value, setValue] = useState<ItemId | undefined>('ru-moscow-1');
  return (
    <FieldSelect
      label='Регион'
      placeholder='Выберите регион'
      selection='single'
      searchable
      items={regions}
      pinTop={[{ id: 'recommended', content: { label: 'ru-moscow-1', caption: 'Рекомендуемый' } }]}
      pinBottom={[{ id: 'all-regions', content: { label: 'Показать все регионы' } }]}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

// Айтемы @cloud-ru/ds-list поддерживают label + caption + description.
// Поиск (extractSearchText) матчит запрос по всем трём полям.
const options: ItemProps[] = [
  {
    id: 's',
    content: { label: 'Small', caption: '1 vCPU · 2 GB', description: 'Для dev-окружений и небольших сервисов' },
  },
  {
    id: 'm',
    content: { label: 'Medium', caption: '2 vCPU · 4 GB', description: 'Стандартная нагрузка, веб-приложения' },
  },
  {
    id: 'l',
    content: { label: 'Large', caption: '4 vCPU · 8 GB', description: 'Базы данных, аналитика, очереди' },
  },
];

export function SelectRichContent() {
  const [value, setValue] = useState<ItemId | undefined>('m');
  return (
    <FieldSelect
      label='Размер инстанса'
      placeholder='Выберите размер'
      hint='Поиск ищет по названию, характеристикам и описанию'
      selection='single'
      searchable
      items={options}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldSelect } from '@cloud-ru/ds-fields';
import { ItemId, ItemProps } from '@cloud-ru/ds-list';
import { useState } from 'react';

// itemWrapRender оборачивает отрендеренный айтем в произвольный узел — типичный кейс:
// проксирование в навигационную ссылку (<a> / Link роутера).
const options: ItemProps[] = [
  {
    id: 'docs',
    content: { label: 'Документация' },
    itemWrapRender: node => <a href='/docs'>{node}</a>,
  },
  {
    id: 'api',
    content: { label: 'API Reference' },
    itemWrapRender: node => (
      <a href='https://example.com/api' target='_blank' rel='noopener noreferrer'>
        {node}
      </a>
    ),
  },
];

export function SelectItemWrapRender() {
  const [value, setValue] = useState<ItemId | undefined>(undefined);
  return (
    <FieldSelect
      label='Раздел'
      placeholder='Выберите раздел'
      hint='Каждый айтем обёрнут в навигационную ссылку через itemWrapRender'
      selection='single'
      items={options}
      value={value}
      onChange={setValue}
    />
  );
}