empower-container 0.1.12 → 0.1.13

package/src/main/inputs/Select.tsx

@@ -0,0 +1,654 @@
+import React, { useState, Fragment } from "react";
+import '../../scss/style.scss';
+
+// Imports
+import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN } from '../assets/Asset';
+
+interface IPropsPopover{
+    id:String,
+    className:String
+    open: Boolean,
+    origin?:String,
+    onClick:(event:React.MouseEvent<HTMLDivElement, MouseEvent>) => void,
+}
+
+
+export const Popover: React.FC<IPropsPopover> = ({ open, origin,  children, onClick }) => {
+
+    return (
+        <Fragment>
+            {
+                open &&
+                <Fragment>
+                    <div className="em-overlay" onClick={e=>onClick(e)}>
+                    </div>
+                    <div className="em-popover" style={origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' }}>
+                        {children}
+                    </div>
+                </Fragment>
+            }
+        </Fragment>
+    )
+}
+
+
+
+interface IPropsDropDown {
+    config: {
+        id: string | keyof Object,
+        type: string,
+        value?: string | Array<string> | any,
+        placeholder?: string,
+        label?: string,
+        readOnly?: boolean,
+        disabled?: boolean,
+        options?: Array<string | object> | object | any
+
+
+    },
+    customClass?: string,
+    hideClearIcon: boolean,
+    isEmployeeSelection: boolean,
+
+    onChanged?: (event: React.ChangeEvent<HTMLInputElement> 
+                        | React.MouseEvent<HTMLDivElement, MouseEvent> 
+                        | React.MouseEvent<HTMLInputElement, MouseEvent> 
+                        | React.KeyboardEvent<HTMLInputElement>
+                        | undefined 
+                        | any, val?: string | any) => void,
+
+}
+
+
+
+const Dropdown: React.FC<IPropsDropDown> = ({ config, customClass, onChanged, isEmployeeSelection, hideClearIcon }) => {
+    let { disabled, options, type, value, placeholder, id } = { ...config };
+    // React Hook
+    let [dropdownPopover, setDropdownPopover] = useState<Boolean>(false);
+    let [optionsArray, setOptionsArray] = useState<any>(options ? options : []);
+    let [selectTemporaryValue, setSelectTemporaryValue] = useState<string>("");
+    let [keyOption, setKeyOption] = useState<any>(null);
+    let [objectKeyOption, setObjectKeyOption] = useState<any>(null);
+    
+
+    // Dropdown Config Variable
+    let dropdownClass = disabled && disabled.constructor === Boolean ? 'em-input-field input-disabled' : 'em-input-field';
+   
+  let multiSelectValue = type === 'multi-select' ? (
+        value && value.constructor === Array && value.length > 0 ? (
+            getSelectInputValue(value)
+        ) : ''
+    ) : '';
+
+    const selectedValue = value && (value.constructor === String || value.constructor === Number) && value !== "" ? (
+        getSelectInputValue(value)
+    ) : value && value.constructor === Array && value.length > 0 ? (
+        getSelectInputValue(value)
+    ) : placeholder && placeholder.constructor === String ? placeholder : '-';
+
+    
+
+    /**
+    * popoverRequestHandler
+    * hide and show the options popover
+    * @param {*} e - event
+    * @param {*} action - it can be either on-focus or on-blur
+    */
+    function popoverRequestHandler(e: React.KeyboardEvent<HTMLInputElement> 
+                                    | React.MouseEvent<HTMLOptionElement, MouseEvent> 
+                                    | React.FocusEvent<HTMLInputElement, Element> 
+                                    | React.MouseEvent<HTMLInputElement, MouseEvent> 
+                                    | React.MouseEvent<HTMLOptionElement, MouseEvent> 
+                                    | React.MouseEvent<HTMLDivElement, MouseEvent>
+                                    | React.FocusEvent<HTMLInputElement, HTMLDivElement>
+                                    | any, action: string) {
+        if (action === 'on-focus') {
+            type === 'select' ? setOptionsArray(options) : filterOptions(selectTemporaryValue, value);
+            setDropdownPopover(e.currentTarget)
+            setKeyOption(null);
+            setObjectKeyOption(null);
+        } else {
+            setDropdownPopover(false);
+            setSelectTemporaryValue("");
+        }
+    }
+
+    /**
+    * optionSelectionHandler
+    * manipulate the selected options
+    * @param {*} e - event
+    * @param {*} opt - selected option from the list
+    * return Object/Array - the selected manipulated values from the list
+    */
+    function optionSelectionHandler(e: React.MouseEvent<HTMLInputElement, MouseEvent> 
+                                        | React.KeyboardEvent<HTMLInputElement> 
+                                        | React.MouseEvent<HTMLDivElement, MouseEvent>
+                                        | React.MouseEvent<HTMLOptionElement, MouseEvent>
+                                        | any, opt: any) {
+      
+
+        if (type && type === 'select') {
+            popoverRequestHandler(e, 'on-blur');
+            return onChanged ? onChanged(e, opt.value) : false;
+        } else if (type && type === 'multi-select') {
+            let valueCopy= value ? selectedOptions([...value]) : []
+
+            
+            if (opt === 'select-all') {
+                let notSelectedOptions = [];
+                if (optionsArray.constructor === Array) {
+                    notSelectedOptions = optionsArray.filter((item:any) => {
+                        return valueCopy.indexOf(item) < 0;
+                    });
+                    if (notSelectedOptions.length > 0) {
+                        valueCopy = [...valueCopy, ...notSelectedOptions];
+                    } else {
+                        valueCopy = optionsArray.filter((item:any) => {
+                            return valueCopy.indexOf(item) < -1;
+                        });
+                    }
+                } else if (optionsArray.constructor === Object) {
+                    let mergeOptions:Array<string> = [];
+                    Object.values(optionsArray).map((optval:any) => {
+                        mergeOptions = [...mergeOptions, ...optval.options];
+                        return optval;
+                    });
+                    notSelectedOptions = mergeOptions.filter((item:any) => {
+                        return valueCopy.indexOf(item) < 0;
+                    });
+                    if (notSelectedOptions.length > 0) {
+                        valueCopy = [...valueCopy, ...notSelectedOptions];
+                    } else {
+                        valueCopy = mergeOptions.filter((item:any) => {
+                            return valueCopy.indexOf(item) < -1;
+                        });
+                    }
+                }
+            } else {
+                let optIdx = valueCopy.indexOf(opt);
+                if (optIdx >= 0) {
+                    valueCopy.splice(optIdx, 1);
+                } else {
+                    valueCopy = [...valueCopy, opt];
+                }
+            }
+            valueCopy = valueCopy.map((item:any):any => {
+                return item.value;
+            });
+            filterOptions(selectTemporaryValue, valueCopy);
+            e.selected = valueCopy;
+            return onChanged ? onChanged(e) : false;
+        }
+    }
+
+    /**
+    * inputChangedHandler
+    * get the current value from the input text field
+    * @param {*} e - event which will be used to get the changed value
+    */
+    function inputChangedHandler(e: React.ChangeEvent<HTMLInputElement>) {
+        setKeyOption(null);
+        setObjectKeyOption(null);
+        setSelectTemporaryValue(e.target.value);
+        filterOptions(e.target.value, value);
+    }
+
+    /**
+    * getSelectInputValue
+    * manipulate the selected multiple values into string
+    * @param {*} val - multi-select selected value
+    * return String - the converted string from multi-select array values
+    */
+    function getSelectInputValue (val: Array<string> | string[] | any){
+        if (type === 'multi-select' && val.constructor === Array) {
+            let selectedLabels = selectedOptions(val);
+            if (val.length < 6) {
+                selectedLabels = selectedLabels.map((item:any) => {
+                    return item.label
+                });
+            } else {
+                selectedLabels = [val.length + (isEmployeeSelection ? ' employees' : ' Selected Item(s)')];
+            }
+
+            return selectedLabels.join(', ');
+        } else if (type === 'select' && (val.constructor === String || val.constructor === Number)) {
+            let optArray= selectedOptions(val);
+            return optArray.length > 0    ? (optArray[0] as any).label : val.toString();
+        } else {
+            return '';
+        }
+    }
+
+
+    /**
+    * selectedOptions
+    * get the selected options from the values given
+    * @param {*} val - values selected
+    * return String - converted values into string
+    */
+    function selectedOptions (val: string[] | number| any) {
+        var selectedOptionValue:Array<string | object> = [];
+        if (options && options.constructor === Array) {
+            selectedOptionValue = options.filter((item:any) => {
+                return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
+            });
+        } else if (options && options.constructor === Object) {
+            let mergeOptions:Array<object> = [];
+            Object.values(options).map((optval:any) => {
+                mergeOptions = [...mergeOptions, ...optval.options];
+                return optval;
+            });
+            selectedOptionValue = mergeOptions.filter((item:any) => {
+                return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
+            });
+        }
+        return selectedOptionValue;
+    }
+
+    /**
+    * filterOptions (for multi-select only)
+    * filter the options to search specific values
+    * @param {*} search - type value from the input text field
+    * @param {*} values - selected values of multi-select
+    */
+    function filterOptions(search: string, values: any) {
+        let selectedOptionsVariable = null;
+        if (type === 'multi-select') {
+            if (optionsArray && optionsArray.constructor === Array) {
+                selectedOptionsVariable = selectedOptions(values);
+                if (options && options.constructor===Array && options.length > 0) {
+                    optionsArray = options.filter((item:any) => {
+                        return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
+                    });
+                }
+
+                values = selectedOptionsVariable.filter((item:any) => {
+                    return item.label.toLowerCase().search(search.toLowerCase()) > -1;
+                })
+                setOptionsArray([...values, ...optionsArray]);
+            } else if (optionsArray && optionsArray.constructor === Object) {
+                let optionsArrayCopy:{[index: string]:any} = {};
+                selectedOptionsVariable = selectedOptions(values);
+                if (selectedOptionsVariable.length > 0) {
+                    selectedOptionsVariable = selectedOptionsVariable.filter((item:any) => {
+                        return item.label.toLowerCase().search(search.toLowerCase()) > -1;
+                    })
+                    if (selectedOptionsVariable.length > 0) {
+                        optionsArrayCopy['selected-values'] = { label: 'Selected', options: selectedOptionsVariable }
+                    }
+                }
+                if (options && options.constructor === Object && Object.keys(options).length > 0) {
+                    Object.keys(options).map((optgroup: any) => {
+                        let filterOptionsArray:Array<string>  = [];
+                        
+
+                        if (options[optgroup].label.toLowerCase().search(search.toLowerCase()) > -1) {
+                            filterOptionsArray = options[optgroup].options.filter((item:any) => {
+                                return values.indexOf(item.value) < 0;
+                            });
+                        } else {
+                            filterOptionsArray = options[optgroup].options.filter((item:any) => {
+                                return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
+                            });
+                        }
+
+
+                       
+
+
+                        if (filterOptionsArray.length > 0) {
+                            optionsArrayCopy[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
+                        }
+                        return optgroup;
+                    });
+                }
+
+                setOptionsArray(optionsArrayCopy);
+            }
+        } else {
+            if (optionsArray && optionsArray.constructor === Array) {
+                optionsArray = options.filter((item:any) => {
+                    return item.label.toLowerCase().search(search.toLowerCase()) > -1;
+                });
+                setOptionsArray([...optionsArray]);
+            } else if (optionsArray && optionsArray.constructor === Object) {
+                let optionsArrayCopy:{[index: string]:any} = {};
+                Object.keys(options).map((optgroup:any) => {
+                    if (options[optgroup]?.label.toLowerCase().search(search.toLowerCase()) > -1) {
+                        optionsArrayCopy[optgroup] = { ...options[optgroup] };
+                    } else {
+                        let filterOptionsArray = options[optgroup].options.filter((item:any) => {
+                            return item.label.toLowerCase().search(search.toLowerCase()) > -1;
+                        });
+                        if (filterOptionsArray.length > 0) {
+                            optionsArrayCopy[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
+                        }
+                    }
+                    return optgroup;
+                });
+                setOptionsArray(optionsArrayCopy);
+            }
+        }
+    }
+
+    /**
+    * handleCheckedOptions
+    * determine if the item from the options were selected
+    * @param {*} opt - item from the options
+    * return Boolean - selected/not
+    */
+    function handleCheckedOptions(opt: any): boolean {
+        if (opt === 'select-all') {
+            var notSelectedOptions = null;
+            if (value && value.constructor === Array) {
+                if (optionsArray.constructor === Array) {
+                    notSelectedOptions = optionsArray.filter((item:any) => {
+                        return value.indexOf(item.value) < 0;
+                    });
+                } else if (optionsArray.constructor === Object) {
+                    let mergeOptions:Array<string> = [];
+                    Object.values(optionsArray).map((optval:any) => {
+                        mergeOptions = [...mergeOptions, ...optval.options];
+                        return optval;
+                    });
+                    notSelectedOptions = mergeOptions.filter((item:any) => {
+                        return value.indexOf(item.value) < 0;
+                    });
+                }
+            }
+            return notSelectedOptions && notSelectedOptions.length === 0 ? true : false;
+        } else {
+            return value && value.constructor === Array && value.filter((val:any) => (opt.value === val)).length > 0 ? true : false;
+        }
+    }
+
+
+    function handleKeyPress(event: React.KeyboardEvent<HTMLInputElement>) {
+        let updatedKey:any;
+        if (Boolean(dropdownPopover)) {
+            if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
+                if (event.key === 'ArrowDown') {
+                    if (keyOption === null) {
+                        setKeyOption(0);
+                    } else {
+                        updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
+                        setKeyOption(updatedKey);
+                    }
+                } else if (event.key === 'ArrowUp') {
+                    if (keyOption === null) {
+                        setKeyOption(0);
+                    } else {
+                        updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
+                        setKeyOption(updatedKey);
+                    }
+                } else if (event.key === 'Enter') {
+                    if (keyOption !== null && optionsArray[keyOption]) {
+                        optionSelectionHandler(event, optionsArray[keyOption]);
+                    }
+                }
+            } else if (optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0) {
+                let optionsKeyArray = Object.keys(optionsArray);
+                if (event.key === 'ArrowDown') {
+                    if (keyOption === null || objectKeyOption === null) {
+                        setKeyOption(0);
+                        setObjectKeyOption(0);
+                    } else {
+                        if (optionsArray[optionsKeyArray[objectKeyOption]].options.length <= keyOption + 1) {
+                            if (objectKeyOption + 1 < optionsKeyArray.length) {
+                                setKeyOption(0);
+                                setObjectKeyOption(objectKeyOption + 1);
+                            }
+                        } else {
+                            setKeyOption(keyOption + 1)
+                        }
+                    }
+                } else if (event.key === 'ArrowUp') {
+                    if (keyOption === null || objectKeyOption === null) {
+                        setKeyOption(0);
+                        setObjectKeyOption(0);
+                    } else {
+                        if (keyOption > 0) {
+                            setKeyOption(keyOption - 1);
+                        } else {
+                            if (objectKeyOption > 0) {
+                                let updatedKey = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
+                                setKeyOption(updatedKey);
+                                setObjectKeyOption(objectKeyOption - 1);
+                            }
+                        }
+                    }
+                } else if (event.key === 'Enter') {
+                    if (keyOption !== null && objectKeyOption !== null && optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]) {
+                        optionSelectionHandler(event, optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]);
+                    }
+                }
+            }
+        } else {
+            if (event.key === 'Enter' || event.key === 'ArrowDown') {
+                popoverRequestHandler(event, 'on-focus')
+            }
+        }
+    }
+
+    /**
+    * clearValuesHandler
+    * reset value into null and return it to parent
+    * @param {*} event - event
+    */
+    const clearValuesHandler = (event: React.MouseEvent<HTMLDivElement, MouseEvent>| any):any=> {
+        event && event.preventDefault();
+        return onChanged && onChanged(event);
+    }
+
+    return (
+        <div className={'em-select ' + customClass}>
+            <div className={dropdownClass} id={id && id.constructor === String ? id : 'select-default-id'} data-testid={id && id.constructor === String ? id : 'select-default-id'}>
+                {
+                    type === 'select' ? (
+                        <input
+                            className="em-select-input"
+                            data-testid={id && id.constructor === String ? `select-input-${id}` : 'select-input-default-id'}
+                            id={id && id.constructor === String ? `${id}-select-input-default-id` : "select-input-default-id"}
+                            type="text"
+                            onFocus={event => popoverRequestHandler(event, 'on-focus')}
+                            onClick={event => popoverRequestHandler(event, 'on-focus')}
+                            onChange={event => inputChangedHandler(event)}
+                            value={value ? selectedValue : selectTemporaryValue}
+                            placeholder={selectedValue}
+                            autoComplete={'off'}
+                            disabled={disabled ? disabled : false}
+                            onKeyDown={event => handleKeyPress(event)} />
+                    ) : (
+                            <input
+                                className="em-select-input"
+                                data-testid={id && id.constructor === String ? `${id}-multi-select-input` : "multi-select-input-default-id"}
+                                id={id && id.constructor === String ? `${id}-multi-select-input-default-id` : "multi-select-input-default-id"}
+                                type="text"
+                                onClick={event => popoverRequestHandler(event, 'on-focus')}
+                                placeholder={selectedValue}
+                                autoComplete={'off'}
+                                value={value && value.length > 0 ? multiSelectValue : ""}
+                                disabled={disabled ? disabled : false}
+                                readOnly />
+                        )
+
+                }
+
+                {
+                    type === 'select' ? (
+                        disabled ? (
+                            <div data-testid={'dropdown-icon'} className="em-field-icon">
+                                {SVG_ARROWDOWN}
+                            </div>
+                        ) : (
+                                value && value !== "" && !hideClearIcon ? (
+                                    <div data-testid={'clear-icon'} onClick={event => clearValuesHandler(event)} className='em-field-icon'>
+                                        {SVG_CLOSE_GRAY}
+                                    </div>
+                                ) : (
+                                        <div data-testid={'dropdown-icon'} className="em-field-icon" onClick={event => popoverRequestHandler(event, 'on-focus')}>
+                                            {SVG_ARROWDOWN}
+                                        </div>
+                                    )
+                            )
+                    ) : null
+                }
+            </div>
+            <Popover 
+                id="select-popover" 
+                className={Boolean(dropdownPopover) ? 'open-popover' : ''} 
+                open={Boolean(dropdownPopover)} 
+                onClick={(event:any) => popoverRequestHandler(event, 'on-blur')}>
+                <div className="em-select-popover">
+                    {
+                        type === 'multi-select' ? (
+                            <div className="em-select-search e-input">
+                                <input
+                                    id="multi-select-input-search"
+                                    type="text"
+                                    onFocus={event => popoverRequestHandler(event, 'on-focus')}
+                                    onChange={event => inputChangedHandler(event)}
+                                    placeholder={"Search"}
+                                    value={selectTemporaryValue}
+                                    disabled={disabled ? disabled : false}
+                                    autoComplete="off" />
+                            </div>
+                        ) : null
+                    }
+                    {
+                        optionsArray && optionsArray.constructor === Array && optionsArray.length > 0 ? (
+                            // Default array display of options
+                            <Fragment>
+                                {
+                                    type === 'select' ? (
+                                        optionsArray.map((opt:any, idx:number) => (
+                                            <option className={keyOption === idx ? 'is-highlighted' : ''} key={idx} 
+                                                    onClick={event => optionSelectionHandler(event, opt)}>
+                                                {opt.label}
+                                            </option>
+                                        ))
+                                    ) : type === 'multi-select' ? (
+                                        <Fragment>
+                                            <div className="em-select-multiple">
+                                            <div className="em-select-all">
+                                                {
+                                                    optionsArray.length > 1 ? (
+                                                        <div className="em-select-check" key='select-all' onClick={event => optionSelectionHandler(event, 'select-all')}>
+                                                            <input
+                                                                type="checkbox"
+                                                                checked={handleCheckedOptions('select-all')}
+                                                                id='select-all'
+                                                                readOnly
+                                                                autoComplete="off" />
+                                                            <label htmlFor=""></label>
+                                                            <span>Select All</span>
+                                                        </div>
+                                                    ) : null
+                                                }
+                                            </div>
+                                            <div className="em-select-checklist">
+                                                {
+                                                    optionsArray.map((opt:any, idx:number) => (
+                                                        <div id='option-div' className="em-select-check" key={idx} onClick={event => optionSelectionHandler(event, opt)}>
+                                                            <input
+                                                                type="checkbox"
+                                                                checked={handleCheckedOptions(opt)}
+                                                                id={opt.value}
+                                                                readOnly
+                                                                autoComplete="off"
+                                                            />
+                                                            <label htmlFor=""></label>
+                                                            <span >{opt.label}</span>
+                                                        </div>
+                                                    ))
+                                                }
+                                            </div>
+                                            </div>
+                                        </Fragment>
+                                    ) : <Fragment>No options</Fragment>
+                                }
+                            </Fragment>
+                        ) : optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0 ? (
+                            // Display of options when grouped (*its only applicable on select type)
+                            <Fragment>
+                                {
+                                    type === 'select' ? (
+                                        Object.keys(optionsArray).map((id, grpIdx) => (
+                                            <optgroup key={id} label={optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label'}>
+                                                {
+                                                    optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (
+                                                        optionsArray[id].options.map((opt:any, idx:number) => (
+                                                            <option key={idx} className={(grpIdx === objectKeyOption && keyOption === idx) ? 'is-highlighted' : ''} onClick={event => optionSelectionHandler(event, opt)}>
+                                                                {opt.label}
+                                                            </option>
+                                                        ))
+                                                    ) : null
+                                                }
+                                            </optgroup>
+                                        ))
+                                    ) : type === 'multi-select' ? (
+                                        <Fragment>                                            
+                                            <div className="em-select-multiple">
+                                                <div className="em-select-all">
+                                                    {
+                                                        Object.keys(optionsArray).length > 1 || (
+                                                            Object.keys(optionsArray).length === 1 && optionsArray[Object.keys(optionsArray)[0]].options && optionsArray[Object.keys(optionsArray)[0]].options.constructor === Array && optionsArray[Object.keys(optionsArray)[0]].options.length > 1) ? (
+                                                                <div className="em-select-check" key='select-all' onClick={event => optionSelectionHandler(event, 'select-all')}>
+                                                                    <input
+                                                                        type="checkbox"
+                                                                        checked={handleCheckedOptions('select-all')}
+                                                                        id='select-all'
+                                                                        readOnly
+                                                                        autoComplete="off"
+                                                                    />
+                                                                    <label htmlFor=""></label>
+                                                                    <span>Select All</span>
+                                                                </div>
+                                                            ) : null
+                                                    }
+                                                </div>
+                                                {
+                                                    Object.keys(optionsArray).map(id => (
+                                                        <Fragment key={id}>
+                                                            <div className="em-select-checklist">
+                                                                {
+                                                                    id !== 'selected-values' ? (
+                                                                        <optgroup label={optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label'} />
+                                                                    ) : null
+                                                                }
+                                                                {
+                                                                    optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (
+                                                                        optionsArray[id].options.map((opt:any, idx:number) => (
+                                                                            <div id='option-div' className="em-select-check" key={idx} onClick={event => optionSelectionHandler(event, opt)}>
+                                                                                <input
+                                                                                    type="checkbox"
+                                                                                    // checked={handleCheckedOptions(opt)}
+                                                                                    checked={value} 
+                                                                                    id={opt.value}
+                                                                                    readOnly
+                                                                                    autoComplete="off"
+                                                                                />
+                                                                                <label htmlFor=""></label>
+                                                                                <span>{opt.label}</span>
+                                                                            </div>
+                                                                        ))
+                                                                    ) : <Fragment>No options</Fragment>
+                                                                }
+                                                            </div>
+                                                        </Fragment>
+                                                    ))
+                                                }
+                                            </div>
+                                        </Fragment>
+                                    ) : <Fragment>No options</Fragment>
+                                }
+                            </Fragment>
+                        ) : <div className="em-noresult">No options</div>
+                    }
+                </div>
+            </Popover>
+        </div>
+    );
+}
+
+export default Dropdown;