选择器

import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="业务线" defaultValue="douyin" style={{ width: '120px' }}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying" disabled>
                    剪映
                </Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="业务线" defaultValue="douyin" disabled style={{ width: '120px' }}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="业务线" placeholder="请选择业务线" style={{ width: '120px' }}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying" disabled>
                    剪映
                </Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

const list = [
    { value: 'douyin', label: '抖音', otherKey: 0 },
    { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
    { value: 'jianying', label: '剪映', otherKey: 2 },
    { value: 'toutiao', label: '今日头条', otherKey: 3 },
];

export default function SelectDemo() {
    return <Select aria-label="业务线" placeholder="请选择业务线" style={{ width: '180px' }} optionList={list} />;
}

import { Select, Toast } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="Select 示例" multiple style={{ width: '320px' }} defaultValue={['douyin', 'ulikecam']}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="Select 示例" multiple maxTagCount={2} showRestTagsPopover restTagsPopoverProps={{ position: 'top' }} style={{ width: '320px' }} defaultValue={['douyin', 'ulikecam', 'jianying']}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>

            <br />
            <br />
            <Select aria-label="Select 示例" multiple style={{ width: '320px' }} defaultValue={['douyin']} max={2} onExceed={() => Toast.warning('最多只允许选择两项')}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="Select 示例" multiple maxTagCount={2} showRestTagsPopover restTagsPopoverProps={{ position: 'top' }} style={{ width: '220px' }} defaultValue={['xigua', 'ulikecam', 'jianying', 'douyin']} ellipsisTrigger expandRestTagsOnClick>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <Select aria-label="地区" placeholder="" style={{ width: '180px' }} filter>
            <Select.OptGroup label="Asia">
                <Select.Option value="a-1" label="China" />
                <Select.Option value="a-2" label="Korea" />
            </Select.OptGroup>
            <Select.OptGroup label="Europe">
                <Select.Option value="b-1" label="Germany" />
                <Select.Option value="b-2" label="France" />
            </Select.OptGroup>
            <Select.OptGroup label="South America">
                <Select.Option value="c-1" label="Peru" />
            </Select.OptGroup>
        </Select>
    );
}

import { For } from 'solid-js';
import { Select } from '@fibrous/semi-ui-solid';

const data = [
    {
        label: 'Asia',
        children: [
            { value: 'a-1', label: 'China' },
            { value: 'a-2', label: 'Korea' },
        ],
    },
    {
        label: 'Europe',
        children: [
            { value: 'b-1', label: 'Germany' },
            { value: 'b-2', label: 'France' },
        ],
    },
    {
        label: 'South America',
        children: [{ value: 'c-1', label: 'Peru' }],
    },
];

export default function SelectDemo() {
    return (
        <Select aria-label="地区" placeholder="" style={{ width: '180px' }} filter>
            <For each={data}>
                {(group) => (
                    <Select.OptGroup label={group.label}>
                        <For each={group.children}>{(option) => <Select.Option value={option.value} label={option.label} />}</For>
                    </Select.OptGroup>
                )}
            </For>
        </Select>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="small" placeholder="请选择业务线" style={{ width: '180px' }} size="small">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="default" placeholder="请选择业务线" style={{ width: '180px' }}>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="large" placeholder="请选择业务线" style={{ width: '180px' }} size="large">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="default" style={{ width: '180px' }}>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="warning" style={{ width: '180px' }} validateStatus="warning">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="error" style={{ width: '180px' }} validateStatus="error">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
        </>
    );
}

import { IconGift, IconVigoLogo } from '@fibrous/semi-icons-solid';
import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="Select 示例" style={{ width: '320px' }} defaultValue="ulikecam" prefix={<IconVigoLogo />} showClear>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="Select 示例" style={{ width: '320px' }} defaultValue="ulikecam" prefix={<IconVigoLogo />} suffix={<IconGift />} showArrow={false}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

const innerSlotStyle = {
    'background-color': 'var(--color-white)',
    height: '36px',
    display: 'flex',
    'align-items': 'center',
    cursor: 'pointer',
    'padding-left': '32px',
    'border-top': '1px solid var(--semi-color-border)',
    'border-radius': '0 0 6px 6px',
    color: 'var(--semi-color-link)',
};
const outSlotStyle = {
    'background-color': 'var(--semi-color-fill-0)',
    height: '36px',
    display: 'flex',
    'padding-left': '32px',
    color: 'var(--semi-color-link)',
    'align-items': 'center',
    cursor: 'pointer',
    'border-top': '1px solid var(--semi-color-border)',
    'border-radius': '0 0 6px 6px',
};

export default function SelectDemo() {
    return (
        <div>
            <p>outerBottomSlot:</p>
            <Select
                aria-label="outerBottomSlot"
                style={{ width: '300px' }}
                dropdownStyle={{ width: '180px' }}
                maxHeight={150}
                outerBottomSlot={
                    <div style={outSlotStyle}>
                        <span style={{ color: 'var(--semi-color-link)' }}>未找到应用?</span>
                    </div>
                }
                placeholder="自定义外侧底部slot，始终显示"
                defaultOpen
                autoAdjustOverflow={false}
                position="bottom"
            >
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="duoshan">多闪</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <p style={{ 'margin-top': '200px' }}>innerBottomSlot:</p>
            <Select aria-label="innerBottomSlot" style={{ width: '300px' }} dropdownStyle={{ width: '180px' }} maxHeight={150} innerBottomSlot={<div style={innerSlotStyle}>点击加载更多</div>} placeholder="自定义内侧底部slot，滚动至底部显示">
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="duoshan">多闪</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </div>
    );
}

import { createSignal } from 'solid-js';
import { RadioGroup, Select } from '@fibrous/semi-ui-solid';

interface Item {
    value: string;
    label: string;
}

const list: Record<string, Item[]> = {
    component: [
        { value: 'select', label: '选择器' },
        { value: 'tabs', label: '标签' },
        { value: 'avatar', label: '头像' },
        { value: 'button', label: '按钮' },
    ],
    design: [
        { value: 'color', label: '颜色' },
        { value: 'dark', label: '暗色模式' },
        { value: 'icon', label: '图标' },
        { value: 'font', label: '字体' },
    ],
    feedback: [
        { value: 'faq', label: '常见问题' },
        { value: 'join', label: '加入用户群' },
        { value: 'hornbill', label: '犀鸟反馈问题' },
    ],
};

const categoryOptions = [
    { value: 'component', label: '组件' },
    { value: 'design', label: '设计' },
    { value: 'feedback', label: '反馈' },
];

export default function SelectDemo() {
    const [key, setKey] = createSignal('component');
    const [value, setValue] = createSignal<Item | undefined>({ value: 'faq', label: '常见问题' });

    // The radio group switches with arrow keys, so categories need no tabpanel association
    return (
        <Select
            aria-label="选项"
            defaultOpen
            autoAdjustOverflow={false}
            value={value()}
            onChangeWithObject
            onChange={(obj) => setValue(obj)}
            style={{ width: '200px' }}
            outerTopSlot={
                <div style={{ padding: '8px 12px', 'border-bottom': '0.5px solid var(--semi-color-border)' }}>
                    <RadioGroup type="button" buttonSize="small" aria-label="选项分类" options={categoryOptions} value={key()} onChange={(e) => setKey(String(e.target.value))} />
                </div>
            }
            optionList={list[key()]}
        />
    );
}

import { createSignal } from 'solid-js';
import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    const [value, setValue] = createSignal<string | undefined>('xigua');
    return (
        <Select aria-label="业务线" value={value()} style={{ width: '300px' }} onChange={(v) => setValue(v)} placeholder="受控的Select">
            <Select.Option value="douyin">抖音</Select.Option>
            <Select.Option value="ulikecam">轻颜相机</Select.Option>
            <Select.Option value="jianying">剪映</Select.Option>
            <Select.Option value="xigua">西瓜视频</Select.Option>
        </Select>
    );
}

import { For, createSignal } from 'solid-js';
import { Button, Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    const [options, setOptions] = createSignal([1, 2, 3, 4]);
    const add = () => {
        const length = Math.ceil(Math.random() * 10);
        setOptions(Array.from({ length }, (_, i) => i + 1));
    };
    return (
        <>
            <Select aria-label="数字" style={{ width: '180px' }} placeholder="请选择" value={4}>
                <For each={options()}>{(option) => <Select.Option value={option}>{option}</Select.Option>}</For>
            </Select>
            <br />
            <br />
            <Button onClick={add}>changeOptions Dynamic</Button>
        </>
    );
}

import { For, createSignal } from 'solid-js';
import { Select } from '@fibrous/semi-ui-solid';

const provinces = ['四川', '广东'];
const maps: Record<string, string[]> = {
    四川: ['成都', '都江堰'],
    广东: ['广州', '深圳', '东莞'],
};

export default function SelectDemo() {
    const [province, setProvince] = createSignal(provinces[0]);
    const citys = () => maps[province()];
    const [city, setCity] = createSignal<string | undefined>(citys()[0]);

    const provinceChange = (newProvince?: string) => {
        if (!newProvince) {
            return;
        }
        setProvince(newProvince);
        setCity(maps[newProvince][0]);
    };

    return (
        <>
            <Select aria-label="省份" style={{ width: '150px', margin: '10px' }} onChange={provinceChange} value={province()}>
                <For each={provinces}>{(pro) => <Select.Option value={pro}>{pro}</Select.Option>}</For>
            </Select>
            <Select aria-label="城市" style={{ width: '150px', margin: '10px' }} value={city()} onChange={(v) => setCity(v)}>
                <For each={citys()}>{(c) => <Select.Option value={c}>{c}</Select.Option>}</For>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="单选" filter style={{ width: '180px' }} placeholder="带搜索功能的单选">
                <Select.Option value="douyin" label="抖音" />
                <Select.Option value="ulikecam" label="轻颜相机" />
                <Select.Option value="jianying" label="剪映" />
                <Select.Option value="xigua" label="西瓜视频" />
            </Select>
            <br />
            <br />
            <Select aria-label="多选" filter multiple style={{ width: '300px' }} placeholder="带搜索功能的多选" autoClearSearchValue={false}>
                <Select.Option value="semi-0" label="Semi-0" />
                <Select.Option value="semi-1" label="Semi-1" />
                <Select.Option value="semi-2" label="Semi-2" />
                <Select.Option value="semi-3" label="Semi-3" />
                <Select.Option value="semi-4" label="Semi-4" />
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="单选" filter searchPosition="dropdown" style={{ width: '200px' }} defaultValue="ulikecam" placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的单选">
                <Select.Option value="douyin" label="抖音" />
                <Select.Option value="ulikecam" label="轻颜相机" />
                <Select.Option value="jianying" label="剪映" />
                <Select.Option value="xigua" label="西瓜视频" />
            </Select>
            <br />
            <br />
            <Select aria-label="多选" filter searchPosition="dropdown" multiple style={{ width: '300px' }} defaultValue={['semi-1']} placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的多选" autoClearSearchValue={false}>
                <Select.Option value="semi-0" label="Semi-0" />
                <Select.Option value="semi-1" label="Semi-1" />
                <Select.Option value="semi-2" label="Semi-2" />
                <Select.Option value="semi-3" label="Semi-3" />
                <Select.Option value="semi-4" label="Semi-4" />
            </Select>
        </>
    );
}

import { createSignal } from 'solid-js';
import { debounce } from 'es-toolkit';
import { Select } from '@fibrous/semi-ui-solid';

interface Item {
    value: string;
    label: string;
    type: number;
}

const initialList: Item[] = [
    { value: 'douyin', label: '抖音', type: 1 },
    { value: 'xingtu', label: '醒图', type: 2 },
    { value: 'jianying', label: '剪映', type: 3 },
    { value: 'toutiao', label: '今日头条', type: 4 },
];

const mockSearch = (inputValue: string): Item[] => {
    const length = Math.ceil(Math.random() * 100);
    return Array.from({ length }, (_, i) => ({ value: inputValue + i, label: `相近业务 ${inputValue}${i}`, type: i + 1 }));
};

export default function SelectDemo() {
    const [loading, setLoading] = createSignal(false);
    const [list, setList] = createSignal(initialList);
    const [value, setValue] = createSignal<Item[]>([]);

    const handleSearch = debounce((inputValue: string) => {
        setLoading(true);
        if (inputValue) {
            const result = mockSearch(inputValue);
            setTimeout(() => {
                setLoading(false);
                setList(result);
            }, 1000);
        } else {
            setLoading(false);
        }
    }, 1000);

    return <Select aria-label="远程搜索" style={{ width: '300px' }} filter remote onChangeWithObject multiple value={value()} onSearch={handleSearch} optionList={list()} loading={loading()} onChange={(v) => setValue(v)} emptyContent={null} />;
}

import { Select, type SelectOptionProps } from '@fibrous/semi-ui-solid';

function searchLabel(sugInput: string, option: SelectOptionProps) {
    return String(option.label).toUpperCase().includes(sugInput.toUpperCase());
}

export default function SelectDemo() {
    return (
        <Select aria-label="业务线" filter={searchLabel} style={{ width: '180px' }} placeholder="try douyin">
            <Select.Option value="douyin" label="douyin" />
            <Select.Option value="ulikecam" label="HOTSOON" />
            <Select.Option value="jianying" label="PIPIXIA" />
            <Select.Option value="xigua" label="XIGUA" />
        </Select>
    );
}

import { For } from 'solid-js';
import { Avatar, Select, Tag, type SelectRenderMultipleSelectedItemFn, type SelectRenderSingleSelectedItemFn } from '@fibrous/semi-ui-solid';

interface ListItem {
    name: string;
    email: string;
    avatar: string;
}

const list: ListItem[] = [
    {
        name: '夏可漫',
        email: 'xiakeman@example.com',
        avatar: '/assets/placeholder/avatar-a.svg',
    },
    {
        name: '申悦',
        email: 'shenyue@example.com',
        avatar: '/assets/root-web-sites/bag.jpeg',
    },
    {
        name: '曲晨一',
        email: 'quchenyi@example.com',
        avatar: '/assets/placeholder/avatar-c.svg',
    },
    {
        name: '文嘉茂',
        email: 'wenjiamao@example.com',
        avatar: '/assets/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png',
    },
];

const optionStyle = {
    display: 'flex',
    'padding-left': '24px',
    'padding-top': '10px',
    'padding-bottom': '10px',
};

const renderSelectedItem: SelectRenderSingleSelectedItemFn = (optionNode) => (
    <div style={{ display: 'flex', 'align-items': 'center' }}>
        <Avatar src={String(optionNode.avatar)} alt="" size="small" />
        <span style={{ 'margin-left': '8px' }}>{String(optionNode.email)}</span>
    </div>
);

const renderMultipleWithTag =
    (avatarShape: 'circle' | 'square'): SelectRenderMultipleSelectedItemFn =>
    (optionNode, { onClose }) => ({
        isRenderInTag: false,
        content: (
            <Tag avatarSrc={String(optionNode.avatar)} avatarShape={avatarShape} closable onClose={onClose} size="large">
                {String(optionNode.name)}
            </Tag>
        ),
    });

const renderCustomOption = (item: ListItem) => (
    <Select.Option {...item} value={item.name} style={optionStyle} showTick>
        <Avatar size="small" src={item.avatar} alt="" />
        <div style={{ 'margin-left': '8px' }}>
            <div style={{ 'font-size': '14px' }}>{item.name}</div>
            <div style={{ color: 'var(--color-text-2)', 'font-size': '12px', 'line-height': '16px', 'font-weight': 'normal' }}>{item.email}</div>
        </div>
    </Select.Option>
);

export default function SelectDemo() {
    return (
        <>
            <Select placeholder="请选择" style={{ width: '280px', height: '40px' }} onChange={(v) => console.log(v)} defaultValue="申悦" renderSelectedItem={renderSelectedItem}>
                <For each={list}>{renderCustomOption}</For>
            </Select>
            <Select placeholder="请选择" maxTagCount={2} style={{ width: '280px', 'margin-top': '20px' }} onChange={(v) => console.log(v)} defaultValue={['申悦', '曲晨一']} multiple renderSelectedItem={renderMultipleWithTag('circle')}>
                <For each={list}>{renderCustomOption}</For>
            </Select>
            <Select placeholder="请选择" maxTagCount={2} style={{ width: '280px', 'margin-top': '20px' }} onChange={(v) => console.log(v)} defaultValue={['申悦', '曲晨一']} multiple renderSelectedItem={renderMultipleWithTag('square')}>
                <For each={list}>{renderCustomOption}</For>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

export default function SelectDemo() {
    return (
        <Select aria-label="业务线" placeholder="自定义弹出层样式的" style={{ width: '180px' }} dropdownStyle={{ width: '250px' }} dropdownClassName="test">
            <Select.Option value="douyin">抖音</Select.Option>
            <Select.Option value="ulikecam">轻颜相机</Select.Option>
            <Select.Option value="jianying">剪映</Select.Option>
            <Select.Option value="xigua">西瓜视频</Select.Option>
        </Select>
    );
}

import { createSignal } from 'solid-js';
import { Select, TextArea } from '@fibrous/semi-ui-solid';

interface Item {
    value: string;
    label: string;
    type: number;
}

const list: Item[] = [
    { value: 'douyin', label: '抖音', type: 1 },
    { value: 'ulikecam', label: '轻颜相机', type: 2 },
    { value: 'jianying', label: '剪映', type: 3 },
    { value: 'toutiao', label: '今日头条', type: 4 },
];

export default function SelectDemo() {
    const [cbValue, setCbValue] = createSignal<Item>();
    const [multipleCbValue, setMultipleCbValue] = createSignal<Item[]>();

    const onChange = (value?: Item) => {
        setCbValue(value);
        console.log(value);
    };

    const onMultipleChange = (value: Item[]) => {
        setMultipleCbValue(value);
        console.log(value);
    };

    return (
        <div>
            <div>
                <Select aria-label="单选" style={{ width: '150px' }} onChangeWithObject optionList={list} placeholder="单选" defaultValue={list[0]} onChange={onChange} />
                <h4 id="select-on-change-with-object-single">onChange回调:</h4>
                <TextArea aria-labelledby="select-on-change-with-object-single" style={{ width: '320px', 'margin-bottom': '48px' }} autosize value={JSON.stringify(cbValue())} rows={2} />
            </div>
            <div>
                <Select aria-label="多选" style={{ width: '320px' }} onChangeWithObject multiple optionList={list} onChange={onMultipleChange} placeholder="多选" />
                <h4 id="select-on-change-with-object-multiple">onChange回调:</h4>
                <TextArea aria-labelledby="select-on-change-with-object-multiple" style={{ width: '320px' }} autosize value={JSON.stringify(multipleCbValue())} />
            </div>
        </div>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

const optionList = [
    { value: 'douyin', label: '抖音' },
    { value: 'ulikecam', label: '轻颜相机' },
    { value: 'jianying', label: '剪映' },
    { value: 'toutiao', label: '今日头条' },
];

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="业务线" style={{ width: '400px' }} optionList={optionList} allowCreate multiple filter onChange={(v) => console.log(v)} defaultActiveFirstOption />
            <br />
            <br />
            <Select
                aria-label="业务线"
                style={{ width: '400px' }}
                optionList={optionList}
                allowCreate
                multiple
                filter
                placeholder="With renderCreateItem"
                renderCreateItem={(input, _isFocus, style) => <div style={{ padding: '10px', ...style }}>Create Item：{input}</div>}
                onChange={(v) => console.log(v)}
                defaultActiveFirstOption
            />
        </>
    );
}

import { Select } from '@fibrous/semi-ui-solid';

const newOptions = Array.from({ length: 3000 }, (_, i) => ({ label: `option-${i}`, value: i }));
const virtualize = {
    height: 270,
    width: '100%',
    itemSize: 36, // px
};

export default function SelectDemo() {
    return <Select aria-label="virtualize" placeholder="拥有3k个Option的Select" style={{ width: '260px' }} filter virtualize={virtualize} optionList={newOptions} />;
}

import { createSignal } from 'solid-js';
import { IconAppCenter, IconChevronDown } from '@fibrous/semi-icons-solid';
import { Select, Tag, type SelectTriggerRenderProps } from '@fibrous/semi-ui-solid';

const list = [
    { value: 'douyin', label: '抖音' },
    { value: 'ulikecam', label: '轻颜相机' },
    { value: 'jianying', label: '剪映' },
    { value: 'toutiao', label: '今日头条' },
];

const triggerRender = (props: SelectTriggerRenderProps) => (
    <div
        style={{
            'min-width': '112px',
            'background-color': 'var(--semi-color-primary-light-default)',
            height: '32px',
            display: 'flex',
            'align-items': 'center',
            'padding-left': '12px',
            'border-radius': '3px',
            color: 'var(--semi-color-primary)',
        }}
    >
        <div style={{ 'font-weight': 600, 'flex-shrink': 0, 'font-size': '14px' }}>业务线</div>
        <div
            style={{
                margin: '4px',
                'white-space': 'nowrap',
                'text-overflow': 'ellipsis',
                'flex-grow': 1,
                overflow: 'hidden',
            }}
        >
            {props.value.map((item) => item.label).join(' , ')}
        </div>
        <IconAppCenter style={{ 'margin-right': '8px', 'flex-shrink': 0 }} />
    </div>
);

const triggerRender2 = (props: SelectTriggerRenderProps) => (
    <div
        style={{
            margin: '4px',
            'white-space': 'nowrap',
            'text-overflow': 'ellipsis',
            'flex-grow': 1,
            overflow: 'hidden',
            display: 'flex',
            'align-items': 'center',
        }}
    >
        <Tag size="large" color="cyan" shape="circle" suffixIcon={<IconChevronDown />}>
            {props.value.map((item) => item.label).join(' / ')}
        </Tag>
    </div>
);

export default function SelectDemo() {
    const [valList, setValList] = createSignal(['douyin', 'ulikecam']);
    return (
        <div>
            <h4>不同背景色的触发器</h4>
            <Select aria-label="不同背景色的触发器" value={valList()} triggerRender={triggerRender} optionList={list} onChange={(value) => setValList(value)} multiple filter searchPosition="dropdown" style={{ width: '240px' }} />
            <br />
            <br />
            <h4>使用 circle Tag 作为触发器</h4>
            <Select aria-label="circle Tag 触发器" value={valList()} onChange={(value) => setValList(value)} triggerRender={triggerRender2} optionList={list} filter multiple searchPosition="dropdown" style={{ width: '240px', 'margin-top': '20px', outline: 0 }} />
        </div>
    );
}

import { createSignal } from 'solid-js';
import { Select, TagInput, type SelectTriggerRenderProps } from '@fibrous/semi-ui-solid';

const list = [
    { value: 'douyin', label: '抖音' },
    { value: 'ulikecam', label: '轻颜相机' },
    { value: 'jianying', label: '剪映' },
    { value: 'toutiao', label: '今日头条' },
];

export default function SelectDemo() {
    const [valList, setValList] = createSignal(['douyin', 'ulikecam']);
    const [inputVal, setInputVal] = createSignal('');

    const handleSort = (currentLabels: string[]) => {
        setValList(currentLabels.flatMap((item) => list.find((i) => i.label === item)?.value ?? []));
    };

    const triggerRender = (props: SelectTriggerRenderProps) => (
        <div role="presentation" onKeyDown={(e) => e.stopPropagation()}>
            <TagInput
                draggable
                allowDuplicates={false}
                value={props.value.map((item) => String(item.label))}
                inputValue={inputVal()}
                onInputChange={(word) => {
                    props.onSearch(word);
                    setInputVal(word);
                }}
                onChange={handleSort}
                showClear
            />
        </div>
    );

    return (
        <>
            <h4>可对已选项拖拽重新排序的 Select </h4>
            <Select aria-label="可拖拽排序的 Select" value={valList()} triggerRender={triggerRender} optionList={list} onChange={(value) => setValList(value)} multiple filter style={{ width: '240px' }} />
        </>
    );
}

import { createSignal } from 'solid-js';
import clsx from 'clsx';
import { Checkbox, Highlight, Select, type SelectOptionRenderProps } from '@fibrous/semi-ui-solid';

const optionList = [
    { value: 'douyin', label: '抖音', otherKey: 0 },
    { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
    { value: 'jianying', label: '剪映', otherKey: 2 },
    { value: 'toutiao', label: '今日头条', otherKey: 3 },
];

export default function SelectDemo() {
    const [inputValue, setInputValue] = createSignal('');

    // Put style on the outer DOM or the virtual list breaks; add selected/focused/disabled styles from props;
    // bind onMouseEnter and class on the outer DOM or arrow keys display wrongly; put id there so screen
    // readers announce the option the arrow keys reach
    const renderOptionItem = (props: SelectOptionRenderProps) => (
        <div
            id={props.id}
            role="option"
            aria-selected={props.selected}
            aria-disabled={props.disabled}
            style={props.style}
            class={clsx(props.class, 'custom-option-render', {
                'custom-option-render-focused': props.focused,
                'custom-option-render-disabled': props.disabled,
                'custom-option-render-selected': props.selected,
            })}
            onClick={(e) => props.onClick(e)}
            onMouseEnter={(e) => props.onMouseEnter(e)}
        >
            <Checkbox checked={props.selected} />
            <div class="option-right">
                <Highlight sourceString={String(props.label)} searchWords={[inputValue()]} />
            </div>
        </div>
    );

    return (
        <>
            <Select aria-label="单选" filter placeholder="单选" onSearch={(v) => setInputValue(v)} dropdownClassName="components-select-demo-renderOptionItem" optionList={optionList} style={{ width: '180px' }} renderOptionItem={renderOptionItem} />
            <br />
            <br />
            <Select aria-label="多选" filter placeholder="多选" multiple onSearch={(v) => setInputValue(v)} dropdownClassName="components-select-demo-renderOptionItem" optionList={optionList} style={{ width: '320px' }} renderOptionItem={renderOptionItem} />
        </>
    );
}