# Component/DropdownFilter

옵션이 많은 필터를 드랍다운 안으로 집어넣어 간결한 필터링을 구현할 수 있습니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `value` | `OptionValue[] | undefined` | No |  |  |
| `label` | `string` | Yes |  |  |
| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium' |  |
| `defaultValues` | `OptionValue[] | undefined` | No | [] | DropDownFilter 초기값 초기화시, DefaultValues가 있을 경우 DefaultValues를 사용하고, 없을 경우 빈 배열을 사용합니다. |
| `selectionGroup` | `DropdownFilterGroupOption<OptionValue>[] | undefined` | No | [] | 옵션을 selection 그룹으로 묶을때 사용합니다. selectionGroup이 있을 경우 options는 무시됩니다. |
| `options` | `DropdownFilterOption<OptionValue>[] | undefined` | No | [] | 각 옵션 값들은 라벨 앞 자동으로 체크박스가 생성되며, 선택된 옵션값은 체크박스로 표시됩니다. |
| `filterPlaceholder` | `string | undefined` | No |  |  |
| `helperText` | `string | undefined` | No |  |  |
| `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props로 컬러를 변경할 수 있습니다. 기본 값은 semantic_colors.content.primary 입니다.  - Icon 컴포넌트 size props로 사이즈를 변경할 수 있습니다. 기본 값은 16입니다. |
| `showFilter` | `boolean | undefined` | No | false | 옵션을 필터링하는 필터 옵션 노출 여부 - 필터 검색 input이 옵션 목록 상단으로 노출되며 입력받은 필터 값에 따라 옵션 목록이 필터링됩니다. |
| `kind` | `undefined "checkbox" "radio"` | No | checkbox | 옵션 라벨앞 셀렉션 요소 타입 - radio의 경우 selectionGroup내에서 단일 선택, selectionGroup이 없다면 전체 옵션중 단일 선택만 가능합니다. |
| `optionFilter` | `((inputValue: string, item: DropdownFilterOption<OptionValue>, index: number) => boolean) | undefined` | No |  | showFilter true일 경우 필터 검색 방식을 커스텀할 수 있습니다. |
| `allCheck` | `boolean | undefined` | No | false | DropdownFilter Option들의 전체 선택 여부 - showFilter 옵션 또는 selectionGroup이 있을 경우, selectionType이 'radio'일 경우 전체 선택은 무시됩니다. |
| `optionsMatchRefWidth` | `boolean | undefined` | No | false |  |
| `onChange` | `((value: OptionValue[]) => void) | undefined` | No |  |  |
| `className` | `string | undefined` | No |  |  |
| `width` | `CSSValueWithLength | undefined` | No |  |  |
| `disabled` | `boolean | undefined` | No |  |  |
| `status` | `undefined "error"` | No |  |  |
| `keyExtractor` | `((item: DropdownOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
| `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
| `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
| `maxHeight` | `number | undefined` | No | DEFAULT_DROPDOWN_MAX_HEIGHT |  |
| `optionItemHeight` | `number | undefined` | No |  |  |
| `enableVirtualScroll` | `boolean | undefined` | No |  |  |
| `labelHeight` | `CSSValueWithLength | undefined` | No |  |  |
| `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |