# Component/CategorySelector

> Props: component-categoryselector.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>(['']);
    const [is_leaf, setIsLeaf] = useState<boolean>(false);
    const handleSelectedKeysChange = (selectedKeys: Array<string>, isLeaf?: boolean) => {
      setSelectedKeys(selectedKeys);
      setIsLeaf(isLeaf ?? false);
    };
    return <Stack direction='column' gap={8}>
        selected_keys: {Array.from(selected_keys).join(',')}
        <br />
        is_leaf: {String(is_leaf)} {args.multiple && '(only works when multiple is false)'}
        <CategorySelector {...args as NewCategorySelectorProps} items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>(['']);
    const [is_leaf, setIsLeaf] = useState<boolean>(false);
    const handleSelectedKeysChange = (selectedKeys: Array<string>, isLeaf?: boolean) => {
      setSelectedKeys(selectedKeys);
      setIsLeaf(isLeaf ?? false);
    };
    return <Stack direction='column' gap={8}>
        selected_keys: {Array.from(selected_keys).join(',')}
        <br />
        is_leaf: {String(is_leaf)} {args.multiple && '(only works when multiple is false)'}
        <CategorySelector {...args as NewCategorySelectorProps} items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
      </Stack>;
  },
  args: {
    disabled: true
  }
}
```

### Multi Selectable

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>(['']);
    const [is_leaf, setIsLeaf] = useState<boolean>(false);
    const handleSelectedKeysChange = (selectedKeys: Array<string>, isLeaf?: boolean) => {
      setSelectedKeys(selectedKeys);
      setIsLeaf(isLeaf ?? false);
    };
    return <Stack direction='column' gap={8}>
        selected_keys: {Array.from(selected_keys).join(',')}
        <br />
        is_leaf: {String(is_leaf)} {args.multiple && '(only works when multiple is false)'}
        <CategorySelector {...args as NewCategorySelectorProps} items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
      </Stack>;
  },
  args: {
    multiple: true
  }
}
```

### With Can Click Outside

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>([]);
    const handleOptionValuesChange = (values: Array<string>) => {
      setSelectedKeys(selected_keys.filter(value => values.includes(value)));
    };
    const handleSelectedKeysChange = (selectedKeys: Array<string>) => {
      setSelectedKeys(selectedKeys);
    };
    return <Stack direction='column' gap={8}>
        canClickOutside: {String(args.canClickOutside)}
        <CategorySelectorDropdown<string> canClickOutside={args.canClickOutside} placeholder='카테고리를 선택해 주세요.' onOptionValuesChange={handleOptionValuesChange}>
          <CategorySelector items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
        </CategorySelectorDropdown>
      </Stack>;
  },
  args: {
    canClickOutside: true
  }
}
```

### With Dropdown Chip Multi Select

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>(['']);
    const [is_leaf, setIsLeaf] = useState<boolean>(false);
    const handleOptionValuesChange = (values: Array<string>) => {
      setSelectedKeys(selected_keys.filter(value => values.includes(value)));
    };
    const handleSelectedKeysChange = (selectedKeys: Array<string>, isLeaf?: boolean) => {
      setSelectedKeys(selectedKeys);
      setIsLeaf(isLeaf ?? false);
    };
    return <Stack direction='column' gap={8}>
        selected_keys: {Array.from(selected_keys).join(',')}
        <br />
        is_leaf: {String(is_leaf)} {args.multiple && '(only works when multiple is false)'}
        <CategorySelectorDropdown<string> multiple={args.multiple} placeholder='카테고리를 선택해 주세요.' onOptionValuesChange={handleOptionValuesChange} width={400}>
          <CategorySelector {...args as NewCategorySelectorProps} items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
        </CategorySelectorDropdown>
      </Stack>;
  },
  args: {
    multiple: true
  }
}
```

### With Dropdown Chip Single Select

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>(['']);
    const [is_leaf, setIsLeaf] = useState<boolean>(false);
    const handleOptionValuesChange = (values: Array<string>) => {
      setSelectedKeys(selected_keys.filter(value => values.includes(value)));
    };
    const handleSelectedKeysChange = (selectedKeys: Array<string>, isLeaf?: boolean) => {
      setSelectedKeys(selectedKeys);
      setIsLeaf(isLeaf ?? false);
    };
    return <Stack direction='column' gap={8}>
        selected_keys: {Array.from(selected_keys).join(',')}
        <br />
        is_leaf: {String(is_leaf)} {args.multiple && '(only works when multiple is false)'}
        <CategorySelectorDropdown<string> multiple={args.multiple} placeholder='카테고리를 선택해 주세요.' onOptionValuesChange={handleOptionValuesChange} width={400}>
          <CategorySelector {...args as NewCategorySelectorProps} items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
        </CategorySelectorDropdown>
      </Stack>;
  },
  args: {
    multiple: true
  },
  args: {
    multiple: false
  }
}
```

### With Initial Value

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>(['baby_onesie']);
    const [is_leaf, setIsLeaf] = useState<boolean>(false);
    const handleSelectedKeysChange = (selectedKeys: Array<string>, isLeaf?: boolean) => {
      setSelectedKeys(selectedKeys);
      setIsLeaf(isLeaf ?? false);
    };
    return <Stack direction='column' gap={8}>
        selected_keys: {Array.from(selected_keys).join(',')}
        <br />
        is_leaf: {String(is_leaf)} {args.multiple && '(only works when multiple is false)'}
        <CategorySelector {...args as NewCategorySelectorProps} items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
      </Stack>;
  }
}
```

### With Initial Value Dropdown

```tsx
{
  render: args => {
    const [selected_keys, setSelectedKeys] = useState<Array<string>>(['baby_onesie']);
    const [is_leaf, setIsLeaf] = useState<boolean>(false);
    const handleOptionValuesChange = (values: Array<string>) => {
      setSelectedKeys(selected_keys.filter(value => values.includes(value)));
    };
    const handleSelectedKeysChange = (selectedKeys: Array<string>, isLeaf?: boolean) => {
      setSelectedKeys(selectedKeys);
      setIsLeaf(isLeaf ?? false);
    };
    return <Stack direction='column' gap={8}>
        is_leaf: {String(is_leaf)} {args.multiple && '(only works when multiple is false)'}
        <CategorySelectorDropdown<string> multiple={args.multiple} placeholder='카테고리를 선택해 주세요.' onOptionValuesChange={handleOptionValuesChange}>
          <CategorySelector {...args as NewCategorySelectorProps} items={categoryEntries} selectedKeys={selected_keys} onSelectedKeysChange={handleSelectedKeysChange} />
        </CategorySelectorDropdown>
      </Stack>;
  },
  args: {
    multiple: false
  }
}
```