# TagSelect

## propTypes

```
TagSelect.propTypes = {
    availableItems: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.number,
        label: PropTypes.string,
        value: PropTypes.number,
        selected: PropTypes.bool,
        disabled: PropTypes.bool
    })),
    closeOnSelect: PropTypes.bool,
    disabled: PropTypes.bool,
    expanded: PropTypes.bool,
    id: PropTypes.string,
    isTagClosable: PropTypes.bool,
    onCloseTag: PropTypes.func,
    onSelect: PropTypes.func,
    placeholder: PropTypes.string,
    showSelect: PropTypes.bool,
    showDisabledItems: PropTypes.bool,
    showSummary: PropTypes.bool,
    showValue: PropTypes.bool,
    subClass: PropTypes.string,
    summaryHeight: PropTypes.number,
    width: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
    ])
};
```

## defaultProps

```
TagSelect.defaultProps = {
    availableItems: [
        {
            id: 1,
            label: 'Item-1',
            value: 10,
            selected: false,
            disabled: false
        },
        {
            id: 2,
            label: 'Item-2',
            value: 20,
            selected: false,
            disabled: false
        },
        {
            id: 3,
            label: 'Item-3',
            value: 30,
            selected: true,
            disabled: false
        },
        {
            id: 4,
            label: 'Item-4',
            value: 40,
            selected: false,
            disabled: false
        },
        {
            id: 5,
            label: 'Item-5',
            value: 50,
            selected: true,
            disabled: true
        }
    ],
    closeOnSelect: false,
    disabled: false,
    expanded: false,
    id: `tsdevTag-${Uuid.v4()}`,
    isTagClosable: true,
    onCloseTag: noop,
    onSelect: noop,
    placeholder: 'Please Select',
    showDisabledItems: true,
    showSelect: true,
    showSummary: true,
    showValue: false,
    subClass: '',
    summaryHeight: 200,
    width: 'auto'
};
```
## Functions
```
onCloseTag(e, item) => {
    console.log(e) // Event
    console.log(item) // closed Tag item
};

onSelect(e, item, items) => {
    console.log(e) // Event
    console.log(item) // selected Tag item
    console.log(items) // all available items
};
```
