Extend BaseSelectField component so that it renders disabled options

[dmazaleuskaya]

Describe the solution you'd like
I want the component to accept the disabledValues: Array<SelectOptionValueProp> prop. When select options are rendered the check will be performed to identify whether an option is disabled. If it is, interaction props are not passed and special styling is applied (opacity: 0.5).

    const selectOptions = filteredOptions.map<React.Element<typeof DatalistItem | 'li'>>((item, index) => {
        const { value } = item;


        const isSelected = selectedValues.includes(value);
        
        const isDisabled = disabledValues.includes(value);
        
        const isClearOption = shouldShowClearOption && value === CLEAR;


        const itemProps: Object = {
            className: classNames('select-option', { 'is-clear-option': isClearOption, 'is-disabled-option': isDisabled }),
            key: index,
            ...(isDisabled ? {} : {
                /* preventDefault on click to prevent wrapping label from re-triggering the select button */
                onClick: event => {
                    event.preventDefault();
                    if (isClearOption) {
                        this.handleClearClick();
                    } else {
                        this.selectOption(index);
                    }
                },
                onMouseEnter: () => {
                    this.setActiveItem(index, false);
                },
                setActiveItemID: this.setActiveItemID,
            })
        };

Describe alternatives you've considered
A possible solution is to ignore disabled values and apply styling to the option name on the consumer's side. The drawback is that the option will still look interactive since it's not possible to change styling of the option wrapper.

        const disabledValues = ['1', '2'];

        const onChange = item => {
                const isDisabled = disabledValues.includes(item.value);

                if (isDisabled) {
                       return;
                }

                // update value
        };

        const optionRenderer = item => {
                const isDisabled = disabledValues.includes(item.value);

                return <span className={isDisabled ? 'disabled' : ''}>{item.displayText}</span>
         };


        <BaseSelectFiled 
                onChange={onChange}
                optionRenderer={optionRenderer}
         />