# Component/DropdownComposite

> Props: component-dropdowncomposite.props.txt

## Examples


### Base

```tsx
{
  args: {
    inputProps: {
      placeholder: '키워드를 입력해 주세요.'
    }
  },
  render: args => {
    const [inputValue, setInputValue] = useState<string>('');
    const [dropdownValue, setDropdownValue] = useState<DropdownKey>();
    const [currentValue, setCurrentValue] = useState<CurrentValueState>({});
    const DropdownCompositeDropdownProps: DropdownCompositeProps<string>['dropdownProps'] = useMemo(() => ({
      options: [{
        label: 'option 1',
        value: 'value-1',
        editable: true,
        children: <Input placeholder='키워드를 입력해주세요.' value={currentValue['value-1'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-1']: e.target.value
        }))} />
      }, {
        label: 'Long oooooooooooooption 2',
        value: 'value-2',
        editable: true,
        children: <Textarea autoSize={{
          minRows: 3,
          maxRows: 5
        }} maxLength={100} showCounter placeholder='예) 123456789, 123465456' value={currentValue['value-2'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-2']: e.target.value
        }))} />
      }, {
        label: 'option 3',
        value: 'value-3',
        children: <Dropdown options={options.map(option => ({
          label: option.label,
          value: option.value
        }))} placeholder='옵션 선택하기' onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-3']: value
        }))} value={currentValue['value-3'] ?? ''} />
      }, {
        label: 'option 4',
        value: 'value-4',
        children: <DropdownFilter value={currentValue['value-4'] ?? ''} onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-4']: value
        }))} />
      }, {
        label: 'option 5',
        value: 'value-5',
        children: <ModalFilter />,
        footerExtra: <Button kind='outlined_secondary'>Label</Button>
      }],
      placeholder: '옵션 선택하기'
    }), [currentValue]);
    return <DropdownComposite<string> disabled={args.disabled} dropdownProps={{
      value: dropdownValue,
      ...DropdownCompositeDropdownProps,
      ...args.dropdownProps
    }} inputProps={{
      value: inputValue,
      onChange: e => setInputValue(e.target.value),
      ...args.inputProps,
      placeholder: dropdownValue === 'value-1' ? '키워드를 입력해주세요.' : dropdownValue === 'value-2' ? '예) 123456789, 123465456' : dropdownValue === 'value-3' ? '옵션 선택하기' : ''
    }} onSubmit={({
      dropdownValue
    }) => {
      setDropdownValue(dropdownValue as DropdownKey);
      if (dropdownValue === 'value-2') {
        setInputValue(getBulkIdList(currentValue['value-2'] ?? '').join(','));
      } else if (dropdownValue) {
        setInputValue(currentValue[dropdownValue as DropdownKey] ?? '');
      }
    }} onOpen={() => {
      setCurrentValue({
        [dropdownValue as DropdownKey]: inputValue
      });
    }} onReset={({
      dropdownValue
    }) => {
      setCurrentValue(prev => {
        const {
          [dropdownValue as DropdownKey]: _,
          ...rest
        } = prev;
        return rest;
      });
    }} />;
  }
}
```

### Disabled

```tsx
{
  args: {
    inputProps: {
      placeholder: '키워드를 입력해 주세요.'
    }
  },
  render: args => {
    const [inputValue, setInputValue] = useState<string>('');
    const [dropdownValue, setDropdownValue] = useState<DropdownKey>();
    const [currentValue, setCurrentValue] = useState<CurrentValueState>({});
    const DropdownCompositeDropdownProps: DropdownCompositeProps<string>['dropdownProps'] = useMemo(() => ({
      options: [{
        label: 'option 1',
        value: 'value-1',
        editable: true,
        children: <Input placeholder='키워드를 입력해주세요.' value={currentValue['value-1'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-1']: e.target.value
        }))} />
      }, {
        label: 'Long oooooooooooooption 2',
        value: 'value-2',
        editable: true,
        children: <Textarea autoSize={{
          minRows: 3,
          maxRows: 5
        }} maxLength={100} showCounter placeholder='예) 123456789, 123465456' value={currentValue['value-2'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-2']: e.target.value
        }))} />
      }, {
        label: 'option 3',
        value: 'value-3',
        children: <Dropdown options={options.map(option => ({
          label: option.label,
          value: option.value
        }))} placeholder='옵션 선택하기' onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-3']: value
        }))} value={currentValue['value-3'] ?? ''} />
      }, {
        label: 'option 4',
        value: 'value-4',
        children: <DropdownFilter value={currentValue['value-4'] ?? ''} onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-4']: value
        }))} />
      }, {
        label: 'option 5',
        value: 'value-5',
        children: <ModalFilter />,
        footerExtra: <Button kind='outlined_secondary'>Label</Button>
      }],
      placeholder: '옵션 선택하기'
    }), [currentValue]);
    return <DropdownComposite<string> disabled={args.disabled} dropdownProps={{
      value: dropdownValue,
      ...DropdownCompositeDropdownProps,
      ...args.dropdownProps
    }} inputProps={{
      value: inputValue,
      onChange: e => setInputValue(e.target.value),
      ...args.inputProps,
      placeholder: dropdownValue === 'value-1' ? '키워드를 입력해주세요.' : dropdownValue === 'value-2' ? '예) 123456789, 123465456' : dropdownValue === 'value-3' ? '옵션 선택하기' : ''
    }} onSubmit={({
      dropdownValue
    }) => {
      setDropdownValue(dropdownValue as DropdownKey);
      if (dropdownValue === 'value-2') {
        setInputValue(getBulkIdList(currentValue['value-2'] ?? '').join(','));
      } else if (dropdownValue) {
        setInputValue(currentValue[dropdownValue as DropdownKey] ?? '');
      }
    }} onOpen={() => {
      setCurrentValue({
        [dropdownValue as DropdownKey]: inputValue
      });
    }} onReset={({
      dropdownValue
    }) => {
      setCurrentValue(prev => {
        const {
          [dropdownValue as DropdownKey]: _,
          ...rest
        } = prev;
        return rest;
      });
    }} />;
  },
  args: {
    disabled: true
  }
}
```

### Dropdown Width

```tsx
{
  args: {
    inputProps: {
      placeholder: '키워드를 입력해 주세요.'
    }
  },
  render: args => {
    const [inputValue, setInputValue] = useState<string>('');
    const [dropdownValue, setDropdownValue] = useState<DropdownKey>();
    const [currentValue, setCurrentValue] = useState<CurrentValueState>({});
    const DropdownCompositeDropdownProps: DropdownCompositeProps<string>['dropdownProps'] = useMemo(() => ({
      options: [{
        label: 'option 1',
        value: 'value-1',
        editable: true,
        children: <Input placeholder='키워드를 입력해주세요.' value={currentValue['value-1'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-1']: e.target.value
        }))} />
      }, {
        label: 'Long oooooooooooooption 2',
        value: 'value-2',
        editable: true,
        children: <Textarea autoSize={{
          minRows: 3,
          maxRows: 5
        }} maxLength={100} showCounter placeholder='예) 123456789, 123465456' value={currentValue['value-2'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-2']: e.target.value
        }))} />
      }, {
        label: 'option 3',
        value: 'value-3',
        children: <Dropdown options={options.map(option => ({
          label: option.label,
          value: option.value
        }))} placeholder='옵션 선택하기' onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-3']: value
        }))} value={currentValue['value-3'] ?? ''} />
      }, {
        label: 'option 4',
        value: 'value-4',
        children: <DropdownFilter value={currentValue['value-4'] ?? ''} onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-4']: value
        }))} />
      }, {
        label: 'option 5',
        value: 'value-5',
        children: <ModalFilter />,
        footerExtra: <Button kind='outlined_secondary'>Label</Button>
      }],
      placeholder: '옵션 선택하기'
    }), [currentValue]);
    return <DropdownComposite<string> disabled={args.disabled} dropdownProps={{
      value: dropdownValue,
      ...DropdownCompositeDropdownProps,
      ...args.dropdownProps
    }} inputProps={{
      value: inputValue,
      onChange: e => setInputValue(e.target.value),
      ...args.inputProps,
      placeholder: dropdownValue === 'value-1' ? '키워드를 입력해주세요.' : dropdownValue === 'value-2' ? '예) 123456789, 123465456' : dropdownValue === 'value-3' ? '옵션 선택하기' : ''
    }} onSubmit={({
      dropdownValue
    }) => {
      setDropdownValue(dropdownValue as DropdownKey);
      if (dropdownValue === 'value-2') {
        setInputValue(getBulkIdList(currentValue['value-2'] ?? '').join(','));
      } else if (dropdownValue) {
        setInputValue(currentValue[dropdownValue as DropdownKey] ?? '');
      }
    }} onOpen={() => {
      setCurrentValue({
        [dropdownValue as DropdownKey]: inputValue
      });
    }} onReset={({
      dropdownValue
    }) => {
      setCurrentValue(prev => {
        const {
          [dropdownValue as DropdownKey]: _,
          ...rest
        } = prev;
        return rest;
      });
    }} />;
  },
  args: {
    dropdownProps: {
      width: 320
    }
  }
}
```

### Empty

```tsx
{
  args: {
    inputProps: {
      placeholder: '키워드를 입력해 주세요.'
    }
  },
  render: args => {
    const [inputValue, setInputValue] = useState<string>('');
    const [dropdownValue, setDropdownValue] = useState<DropdownKey>();
    const [currentValue, setCurrentValue] = useState<CurrentValueState>({});
    const DropdownCompositeDropdownProps: DropdownCompositeProps<string>['dropdownProps'] = useMemo(() => ({
      options: [{
        label: 'option 1',
        value: 'value-1',
        editable: true,
        children: <Input placeholder='키워드를 입력해주세요.' value={currentValue['value-1'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-1']: e.target.value
        }))} />
      }, {
        label: 'Long oooooooooooooption 2',
        value: 'value-2',
        editable: true,
        children: <Textarea autoSize={{
          minRows: 3,
          maxRows: 5
        }} maxLength={100} showCounter placeholder='예) 123456789, 123465456' value={currentValue['value-2'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-2']: e.target.value
        }))} />
      }, {
        label: 'option 3',
        value: 'value-3',
        children: <Dropdown options={options.map(option => ({
          label: option.label,
          value: option.value
        }))} placeholder='옵션 선택하기' onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-3']: value
        }))} value={currentValue['value-3'] ?? ''} />
      }, {
        label: 'option 4',
        value: 'value-4',
        children: <DropdownFilter value={currentValue['value-4'] ?? ''} onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-4']: value
        }))} />
      }, {
        label: 'option 5',
        value: 'value-5',
        children: <ModalFilter />,
        footerExtra: <Button kind='outlined_secondary'>Label</Button>
      }],
      placeholder: '옵션 선택하기'
    }), [currentValue]);
    return <DropdownComposite<string> disabled={args.disabled} dropdownProps={{
      value: dropdownValue,
      ...DropdownCompositeDropdownProps,
      ...args.dropdownProps
    }} inputProps={{
      value: inputValue,
      onChange: e => setInputValue(e.target.value),
      ...args.inputProps,
      placeholder: dropdownValue === 'value-1' ? '키워드를 입력해주세요.' : dropdownValue === 'value-2' ? '예) 123456789, 123465456' : dropdownValue === 'value-3' ? '옵션 선택하기' : ''
    }} onSubmit={({
      dropdownValue
    }) => {
      setDropdownValue(dropdownValue as DropdownKey);
      if (dropdownValue === 'value-2') {
        setInputValue(getBulkIdList(currentValue['value-2'] ?? '').join(','));
      } else if (dropdownValue) {
        setInputValue(currentValue[dropdownValue as DropdownKey] ?? '');
      }
    }} onOpen={() => {
      setCurrentValue({
        [dropdownValue as DropdownKey]: inputValue
      });
    }} onReset={({
      dropdownValue
    }) => {
      setCurrentValue(prev => {
        const {
          [dropdownValue as DropdownKey]: _,
          ...rest
        } = prev;
        return rest;
      });
    }} />;
  },
  args: {
    dropdownProps: {
      options: []
    }
  }
}
```

### Many Options

```tsx
{
  args: {
    inputProps: {
      placeholder: '키워드를 입력해 주세요.'
    }
  },
  render: args => {
    const [inputValue, setInputValue] = useState<string>('');
    const [dropdownValue, setDropdownValue] = useState<DropdownKey>();
    const [currentValue, setCurrentValue] = useState<CurrentValueState>({});
    const DropdownCompositeDropdownProps: DropdownCompositeProps<string>['dropdownProps'] = useMemo(() => ({
      options: [{
        label: 'option 1',
        value: 'value-1',
        editable: true,
        children: <Input placeholder='키워드를 입력해주세요.' value={currentValue['value-1'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-1']: e.target.value
        }))} />
      }, {
        label: 'Long oooooooooooooption 2',
        value: 'value-2',
        editable: true,
        children: <Textarea autoSize={{
          minRows: 3,
          maxRows: 5
        }} maxLength={100} showCounter placeholder='예) 123456789, 123465456' value={currentValue['value-2'] ?? ''} onChange={e => setCurrentValue(prev => ({
          ...prev,
          ['value-2']: e.target.value
        }))} />
      }, {
        label: 'option 3',
        value: 'value-3',
        children: <Dropdown options={options.map(option => ({
          label: option.label,
          value: option.value
        }))} placeholder='옵션 선택하기' onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-3']: value
        }))} value={currentValue['value-3'] ?? ''} />
      }, {
        label: 'option 4',
        value: 'value-4',
        children: <DropdownFilter value={currentValue['value-4'] ?? ''} onChange={value => setCurrentValue(prev => ({
          ...prev,
          ['value-4']: value
        }))} />
      }, {
        label: 'option 5',
        value: 'value-5',
        children: <ModalFilter />,
        footerExtra: <Button kind='outlined_secondary'>Label</Button>
      }],
      placeholder: '옵션 선택하기'
    }), [currentValue]);
    return <DropdownComposite<string> disabled={args.disabled} dropdownProps={{
      value: dropdownValue,
      ...DropdownCompositeDropdownProps,
      ...args.dropdownProps
    }} inputProps={{
      value: inputValue,
      onChange: e => setInputValue(e.target.value),
      ...args.inputProps,
      placeholder: dropdownValue === 'value-1' ? '키워드를 입력해주세요.' : dropdownValue === 'value-2' ? '예) 123456789, 123465456' : dropdownValue === 'value-3' ? '옵션 선택하기' : ''
    }} onSubmit={({
      dropdownValue
    }) => {
      setDropdownValue(dropdownValue as DropdownKey);
      if (dropdownValue === 'value-2') {
        setInputValue(getBulkIdList(currentValue['value-2'] ?? '').join(','));
      } else if (dropdownValue) {
        setInputValue(currentValue[dropdownValue as DropdownKey] ?? '');
      }
    }} onOpen={() => {
      setCurrentValue({
        [dropdownValue as DropdownKey]: inputValue
      });
    }} onReset={({
      dropdownValue
    }) => {
      setCurrentValue(prev => {
        const {
          [dropdownValue as DropdownKey]: _,
          ...rest
        } = prev;
        return rest;
      });
    }} />;
  },
  args: {
    dropdownProps: {
      options: Array.from({
        length: 100
      }, (_, i) => ({
        label: `Option ${i + 1}`,
        value: `value-${i + 1}`,
        children: <Input placeholder={`Option ${i + 1} details`} />
      }))
    }
  }
}
```