@dvrd/dvr-controls 1.0.45 → 1.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/checkbox/checkbox.tsx

@@ -4,145 +4,133 @@
 
 import './style/checkbox.scss';
 
-import React from 'react';
-import {MouseEventHandler} from 'react';
+import React, {CSSProperties, MouseEventHandler, useContext, useMemo} from 'react';
 import classNames from 'classnames';
 import AwesomeIcon from '../icon/awesomeIcon';
-import {findDarkestColor, convertColor, editColor} from "../util/colorUtil";
-import {isNotNull, isNull} from "../util/controlUtil";
+import {convertColor, editColor, findDarkestColor} from "../util/colorUtil";
 import {ControlContext} from "../util/controlContext";
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import {IconName} from '@fortawesome/fontawesome-svg-core';
+import {ErrorType} from "../../../index";
 
-interface CheckboxProps {
+interface Props {
     onCheck: MouseEventHandler;
-    onMouseEnter: any,
-    onMouseLeave: any,
-    checked: boolean,
-    disabled: boolean,
-    isHovered: boolean,
-    label: string,
-    labelPosition: 'left' | 'right',
-    containerClass: string,
-    labelClass: string,
-    checkboxClass: string,
-    checkClass: string,
-    errorClass: string,
-    id: string,
-    error: string | null,
-    checkIcon: IconName | React.ReactNode
+    onMouseEnter: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+    checked: boolean;
+    disabled: boolean;
+    isHovered: boolean;
+    label?: string;
+    labelPosition: 'left' | 'right';
+    className?: string;
+    labelClassName?: string;
+    checkboxClassName?: string;
+    checkClassName?: string;
+    errorClassName?: string;
+    id: string;
+    error: ErrorType;
+    checkIcon: IconName | React.ReactNode;
     baseColor?: string;
     contrastColor?: string;
     title?: string;
     useDarkestColor: boolean;
+    asRadio?: boolean;
 }
 
-export class Checkbox extends React.Component<CheckboxProps> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    getContainerClass = (): string => {
-        const {disabled, containerClass, error, label} = this.props, classes = ['checkboxContainer'];
-
+export default function DvrdCheckbox(props: Props) {
+    const context = useContext(ControlContext);
+    const {
+        disabled, error, label, useDarkestColor, isHovered, id, onCheck, onMouseEnter, onMouseLeave, title,
+        labelPosition, checkIcon, checked, asRadio
+    } = props;
+    const className = useMemo(() => {
+        const classes: Array<string> = ['checkboxContainer'];
         if (disabled) classes.push('disabled');
-        if (isNotNull(error)) classes.push('error');
-        if (!label.length) classes.push('no-label');
-
-        classes.push(containerClass);
-        return classNames(classes);
-    };
-
-    getLabelClass = (position: 'left' | 'right'): string => {
-        const {disabled, labelClass, error} = this.props, classes = ['checkboxLabel', position];
+        if (!!error) classes.push('error');
+        if (!label?.length) classes.push('no-label');
+        return classNames(classes, props.className);
+    }, [disabled, error, label, props.className]);
+    const labelClassName = useMemo(() => {
+        const classes: Array<string> = ['checkboxLabel'];
         if (disabled) classes.push('disabled');
-        if (isNotNull(error)) classes.push('error');
-        classes.push(labelClass);
-        return classNames(classes);
-    };
-
-    getCheckboxClass = (): string => {
-        const {disabled, checkboxClass} = this.props, classes = ['checkbox'];
+        if (!!error) classes.push('error');
+        return classNames(classes, props.labelClassName);
+    }, [disabled, error, props.labelClassName]);
+    const checkboxClassName = useMemo(() => {
+        const classes: Array<string> = ['checkbox'];
         if (disabled) classes.push('disabled');
-        classes.push(checkboxClass);
-        return classNames(classes);
-    };
-
-    getCheckClass = (): string => {
-        const {disabled, checkClass, checked} = this.props, classes = ['checkbox-check'];
+        if (asRadio) classes.push('as-radio');
+        return classNames(classes, props.checkboxClassName);
+    }, [disabled, props.checkClassName]);
+    const checkClassName = useMemo(() => {
+        const classes = ['checkbox-check'];
         if (disabled) classes.push('disabled');
         if (checked) classes.push('checked');
-        classes.push(checkClass);
-        return classNames(classes);
-    };
-
-    getCheckboxStyle = (): object => {
-        const {isHovered, error, disabled, useDarkestColor} = this.props;
+        return classNames(classes, props.checkClassName);
+    }, [disabled, checked, props.checkClassName]);
+    const [baseColor, contrastColor] = useMemo(() => {
+        const base = convertColor(props.baseColor || context.baseColor)
+        const contrast = convertColor(props.baseColor || context.baseColor);
+        return [base, contrast];
+    }, [props.baseColor, context.baseColor, props.contrastColor, context.contrastColor]);
+    const checkboxStyle: CSSProperties = useMemo(() => {
         let color: string;
-        if (isNotNull(error)) color = 'red';
+        if (!!error) color = 'red';
         else if (disabled) color = 'color-gray-4';
         else {
             if (useDarkestColor)
-                color = findDarkestColor(this.getBaseColor(), this.getContrastColor());
-            else color = this.getBaseColor();
+                color = findDarkestColor(baseColor, contrastColor);
+            else color = baseColor;
             if (isHovered) color = editColor(-.2, color);
         }
         return {borderColor: convertColor(color)};
-    };
-
-    getCheckStyle = (): object => {
-        const {error, disabled, useDarkestColor} = this.props;
-        let color: string;
-        if (isNotNull(error)) color = 'red';
+    }, [error, useDarkestColor, isHovered, disabled, baseColor, contrastColor]);
+    const checkStyle: CSSProperties = useMemo(() => {
+        let color: string = baseColor;
+        if (!!error) color = 'red';
         else if (disabled) color = 'color-gray-4';
-        else if (useDarkestColor) color = findDarkestColor(this.getBaseColor(), this.getContrastColor());
-        else color = this.getBaseColor();
+        else if (useDarkestColor) color = findDarkestColor(baseColor, contrastColor);
         return {color: convertColor(color)};
-    };
-
-    getBaseColor = (): string => convertColor(this.props.baseColor || this.context.baseColor);
-    getContrastColor = (): string => convertColor(this.props.contrastColor || this.context.contrastColor);
-
-    getMainColor = () => this.props.useDarkestColor ? findDarkestColor(this.getBaseColor(), this.getContrastColor()) : this.getBaseColor();
-
-    renderLabel = (position: 'left' | 'right'): React.ReactNode => {
-        const {label, labelPosition} = this.props;
-        if (isNull(label) || labelPosition !== position) return null;
-        return <label className={this.getLabelClass(position)}>{label}</label>
-    };
+    }, [error, disabled, useDarkestColor, baseColor, contrastColor]);
+    const mainColor = useMemo(() => {
+        return useDarkestColor ? findDarkestColor(baseColor, contrastColor) : baseColor;
+    }, [useDarkestColor, props.baseColor, context.baseColor, props.contrastColor, context.contrastColor]);
+
+    function renderLabel(position: 'left' | 'right'): React.ReactNode {
+        if (!label || labelPosition !== position) return null;
+        return <label className={classNames(labelClassName, position)}>{label}</label>
+    }
 
-    renderCheckbox = (): React.ReactNode => {
+    function renderCheckbox() {
         return (
-            <div className={this.getCheckboxClass()} style={this.getCheckboxStyle()}>
-                <div className='ripple' style={{backgroundColor: this.getMainColor()}}/>
-                {this.renderCheck()}
+            <div className={checkboxClassName} style={checkboxStyle}>
+                <div className='ripple' style={{backgroundColor: mainColor}}/>
+                {renderCheck()}
             </div>
         )
-    };
+    }
 
-    renderCheck = () => {
-        const {checkIcon} = this.props;
+    function renderCheck() {
         if (React.isValidElement(checkIcon)) return React.cloneElement((checkIcon as React.ReactElement), {
-            className: classNames(checkIcon.props.className, this.getCheckClass()),
-            style: {...checkIcon.props.style, ...this.getCheckStyle()}
+            className: classNames(checkIcon.props.className, checkClassName),
+            style: {...checkIcon.props.style, ...checkStyle}
         });
-        const checkName: IconName = typeof checkIcon === 'string' ? checkIcon as IconName : 'check';
-        return <AwesomeIcon name={checkName} className={this.getCheckClass()} style={this.getCheckStyle()}/>;
-    };
-
-    renderError = (): React.ReactNode => {
-        const {error, errorClass} = this.props;
-        return <label className={classNames('error', errorClass)}>{error}</label>;
-    };
+        let checkName: IconName = 'check';
+        if(typeof checkIcon === 'string') checkName = checkIcon as IconName;
+        else if (asRadio) checkName = 'circle';
+        return <AwesomeIcon name={checkName} className={checkClassName} style={checkStyle}/>;
+    }
 
-    render = () => {
-        const {id, onCheck, onMouseLeave, onMouseEnter, title} = this.props;
-        return (
-            <div className={this.getContainerClass()} id={id} onClick={onCheck} onMouseEnter={onMouseEnter}
-                 title={title} onMouseLeave={onMouseLeave}>
-                {this.renderLabel('left')}
-                {this.renderCheckbox()}
-                {this.renderLabel('right')}
-                {this.renderError()}
-            </div>
-        )
+    function renderError() {
+        return <label className={classNames('error', props.errorClassName)}>{error}</label>;
     }
+
+    return (
+        <div className={className} id={id} onClick={onCheck} onMouseEnter={onMouseEnter}
+             title={title} onMouseLeave={onMouseLeave}>
+            {renderLabel('left')}
+            {renderCheckbox()}
+            {renderLabel('right')}
+            {renderError()}
+        </div>
+    )
 }

package/src/js/checkbox/checkboxController.tsx

@@ -2,136 +2,214 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React from 'react';
-import {Checkbox} from "./checkbox";
-import {ControlContext} from "../util/controlContext";
+import React, {MouseEventHandler, useEffect, useRef, useState} from 'react';
+import DvrdCheckbox from "./checkbox";
 import {generateComponentId} from '../../..';
 
 interface Props {
     onCheck: Function;
-    onMouseEnter?: Function;
-    onMouseLeave?: Function;
+    onMouseEnter?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
     checked: boolean;
-    disabled: boolean;
-    label: string;
-    labelPosition: 'left' | 'right';
-    containerClass: string;
-    labelClass: string;
-    checkboxClass: string;
-    checkClass: string;
-    errorClass: string;
+    disabled?: boolean;
+    label?: string;
+    labelPosition?: 'left' | 'right';
+    className?: string;
+    labelClassName?: string;
+    checkboxClassName?: string;
+    checkClassName?: string;
+    errorClassName?: string;
     baseColor?: string;
     contrastColor?: string;
-    error: string | null;
+    error?: string | null;
     id?: string;
-    checkIcon: React.ReactNode;
-    unControlled: boolean;
+    checkIcon?: React.ReactNode;
+    unControlled?: boolean;
     title?: string;
-    useDarkestColor: boolean;
+    useDarkestColor?: boolean;
     ref?: any;
+    asRadio?: boolean;
 }
 
-interface CheckboxState {
-    isHovered: boolean;
-    internalValue: boolean;
-}
-
-export default class CheckboxController extends React.Component<Props, CheckboxState> {
-    static contextType = ControlContext;
-
-    static defaultProps = {
-        disabled: false,
-        label: '',
-        labelPosition: 'right',
-        containerClass: '',
-        labelClass: '',
-        checkboxClass: '',
-        checkClass: '',
-        errorClass: '',
-        checkIcon: null,
-        error: null,
-        unControlled: false,
-        useDarkestColor: true,
-    };
-
-    private getContainer = (): HTMLElement | null => {
-        return document.getElementById(this.id);
-    };
-
-    private getRipple = (): HTMLElement | null => {
-        const container = this.getContainer();
-        if (container === null) return null;
-        return container.querySelector('div.ripple');
-    };
-
-    private id: string = generateComponentId(this.props.id);
+export default function CheckboxController(props: Props) {
+    const {
+        disabled, unControlled, checked, onCheck, label, labelPosition, className, labelClassName, checkboxClassName,
+        checkClassName, error, checkIcon, errorClassName, title, useDarkestColor, baseColor, contrastColor, asRadio
+    } = props;
+    const [isHovered, setIsHovered] = useState(false);
+    const [internalValue, setInternalValue] = useState(props.checked);
+    const id = useRef(generateComponentId(props.id));
 
-    state = {isHovered: false, internalValue: this.props.checked};
-
-    onCheck = (evt: React.MouseEvent<Element, Event>) => {
-        const {checked, onCheck, disabled, unControlled} = this.props;
+    function _onCheck(evt: React.MouseEvent<Element, Event>) {
         if (disabled) return;
         if (unControlled) {
             evt.stopPropagation();
             evt.persist();
-            this.setState({internalValue: !this.state.internalValue}, () => {
-                onCheck(this.state.internalValue, evt);
-            });
+            const nextInternal = !internalValue;
+            setInternalValue(nextInternal);
+            onCheck(nextInternal, evt);
         } else onCheck(!checked, evt);
-        this.addRipple();
-    };
-
-    onMouseEnter = () => {
-        if (this.props.disabled) return;
-        this.setState({isHovered: true});
-    };
+    }
 
-    onMouseLeave = () => {
-        if (this.props.disabled) return;
-        this.setState({isHovered: false});
-    };
+    function onMouseEnter(evt: React.MouseEvent) {
+        if (disabled) return;
+        setIsHovered(true);
+        props.onMouseEnter?.(evt);
+    }
 
-    addRipple = () => {
-        const container = this.getContainer();
-        if (container !== null) {
-            const ripple = this.getRipple();
-            if (ripple !== null) {
-                if (container.classList.contains('rippling'))
-                    container.classList.remove('rippling');
-                ripple.addEventListener('transitionend', this.removeRipple);
-                container.classList.add('rippling');
-            }
-        }
-    };
+    function onMouseLeave(evt: React.MouseEvent) {
+        setIsHovered(false);
+        props.onMouseLeave?.(evt);
+    }
 
-    removeRipple = () => {
-        const ripple = this.getRipple();
-        const container = this.getContainer();
-        if (ripple !== null && container !== null) {
-            ripple.removeEventListener('transitionend', this.removeRipple);
-            container.classList.remove('rippling');
-        }
-    };
+    function addRipple() {
+        const container = getContainer();
+        if (!container) return;
+        const ripple = getRipple();
+        if (!ripple) return;
+        container.classList.remove('rippling');
+        ripple.addEventListener('transitionend', removeRipple);
+        container.classList.add('rippling');
+    }
 
-    componentDidUpdate = (prevProps: Props, prevState: CheckboxState) => {
-        if (prevState.internalValue !== this.state.internalValue && this.state.internalValue) this.addRipple();
-        else if (prevProps.checked !== this.props.checked && this.props.checked) this.addRipple();
-    };
+    function removeRipple() {
+        const container = getContainer();
+        if (!container) return;
+        const ripple = getRipple();
+        if (!ripple) return;
+        ripple.removeEventListener('transitionend', removeRipple);
+        container.classList.remove('rippling');
+    }
 
-    componentWillUnmount = () => {
-        this.removeRipple();
-    };
+    function getContainer() {
+        return document.getElementById(id.current);
+    }
 
-    render = () => {
-        const {
-            checked, disabled, label, labelPosition, containerClass, labelClass, checkboxClass, checkClass, checkIcon,
-            error, errorClass, unControlled, title, baseColor, contrastColor, useDarkestColor,
-        } = this.props, {isHovered, internalValue} = this.state, isChecked = unControlled ? internalValue : checked;
-        return <Checkbox onCheck={this.onCheck} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-                         checked={isChecked} disabled={disabled} isHovered={isHovered} label={label}
-                         labelPosition={labelPosition} containerClass={containerClass} labelClass={labelClass}
-                         checkboxClass={checkboxClass} checkClass={checkClass} id={this.id} checkIcon={checkIcon}
-                         error={error} errorClass={errorClass} title={title} baseColor={baseColor}
-                         contrastColor={contrastColor} useDarkestColor={useDarkestColor}/>
+    function getRipple() {
+        return getContainer()?.querySelector('div.ripple') ?? null;
     }
-}
+
+    useEffect(() => {
+        if (unControlled && internalValue) addRipple();
+        else if (!unControlled && checked) addRipple();
+        return function () {
+            removeRipple();
+        }
+    }, [internalValue, checked]);
+
+    const isChecked = unControlled ? internalValue : checked
+    return (
+        <DvrdCheckbox onCheck={_onCheck} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} checked={isChecked}
+                      disabled={disabled ?? false} isHovered={isHovered} label={label}
+                      labelPosition={labelPosition ?? 'right'} className={className} labelClassName={labelClassName}
+                      checkboxClassName={checkboxClassName} checkClassName={checkClassName} id={id.current}
+                      checkIcon={checkIcon} error={error ?? null} errorClassName={errorClassName} title={title}
+                      baseColor={baseColor} contrastColor={contrastColor} useDarkestColor={useDarkestColor ?? true}
+                      asRadio={asRadio}/>
+    )
+}
+
+// interface CheckboxState {
+//     isHovered: boolean;
+//     internalValue: boolean;
+// }
+//
+// class _CheckboxController extends React.Component<Props, CheckboxState> {
+//     static contextType = ControlContext;
+//
+//     static defaultProps = {
+//         disabled: false,
+//         label: '',
+//         labelPosition: 'right',
+//         containerClass: '',
+//         labelClass: '',
+//         checkboxClass: '',
+//         checkClass: '',
+//         errorClass: '',
+//         checkIcon: null,
+//         error: null,
+//         unControlled: false,
+//         useDarkestColor: true,
+//     };
+//
+//     private getContainer = (): HTMLElement | null => {
+//         return document.getElementById(this.id);
+//     };
+//
+//     private getRipple = (): HTMLElement | null => {
+//         const container = this.getContainer();
+//         if (container === null) return null;
+//         return container.querySelector('div.ripple');
+//     };
+//
+//     private id: string = generateComponentId(this.props.id);
+//
+//     state = {isHovered: false, internalValue: this.props.checked};
+//
+//     onCheck = (evt: React.MouseEvent<Element, Event>) => {
+//         const {checked, onCheck, disabled, unControlled} = this.props;
+//         if (disabled) return;
+//         if (unControlled) {
+//             evt.stopPropagation();
+//             evt.persist();
+//             this.setState({internalValue: !this.state.internalValue}, () => {
+//                 onCheck(this.state.internalValue, evt);
+//             });
+//         } else onCheck(!checked, evt);
+//         this.addRipple();
+//     };
+//
+//     onMouseEnter = () => {
+//         if (this.props.disabled) return;
+//         this.setState({isHovered: true});
+//     };
+//
+//     onMouseLeave = () => {
+//         if (this.props.disabled) return;
+//         this.setState({isHovered: false});
+//     };
+//
+//     addRipple = () => {
+//         const container = this.getContainer();
+//         if (container !== null) {
+//             const ripple = this.getRipple();
+//             if (ripple !== null) {
+//                 if (container.classList.contains('rippling'))
+//                     container.classList.remove('rippling');
+//                 ripple.addEventListener('transitionend', this.removeRipple);
+//                 container.classList.add('rippling');
+//             }
+//         }
+//     };
+//
+//     removeRipple = () => {
+//         const ripple = this.getRipple();
+//         const container = this.getContainer();
+//         if (ripple !== null && container !== null) {
+//             ripple.removeEventListener('transitionend', this.removeRipple);
+//             container.classList.remove('rippling');
+//         }
+//     };
+//
+//     componentDidUpdate = (prevProps: Props, prevState: CheckboxState) => {
+//         if (prevState.internalValue !== this.state.internalValue && this.state.internalValue) this.addRipple();
+//         else if (prevProps.checked !== this.props.checked && this.props.checked) this.addRipple();
+//     };
+//
+//     componentWillUnmount = () => {
+//         this.removeRipple();
+//     };
+//
+//     render = () => {
+//         const {
+//             checked, disabled, label, labelPosition, containerClass, labelClass, checkboxClass, checkClass, checkIcon,
+//             error, errorClass, unControlled, title, baseColor, contrastColor, useDarkestColor,
+//         } = this.props, {isHovered, internalValue} = this.state, isChecked = unControlled ? internalValue : checked;
+//         return <Checkbox onCheck={this.onCheck} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
+//                          checked={isChecked} disabled={disabled} isHovered={isHovered} label={label}
+//                          labelPosition={labelPosition} containerClass={containerClass} labelClass={labelClass}
+//                          checkboxClass={checkboxClass} checkClass={checkClass} id={this.id} checkIcon={checkIcon}
+//                          error={error} errorClass={errorClass} title={title} baseColor={baseColor}
+//                          contrastColor={contrastColor} useDarkestColor={useDarkestColor}/>
+//     }
+// }

package/src/js/checkbox/style/checkbox.scss

@@ -9,7 +9,6 @@
   grid-template-columns: 22px auto;
   grid-column-gap: .5rem;
   align-items: center;
-  //padding: .2rem;
   cursor: pointer;
   position: relative;
   margin-bottom: 0;
@@ -63,6 +62,15 @@
       visibility: hidden;
       pointer-events: none;
     }
+
+    &.as-radio {
+      border-radius: 50%;
+
+      .checkbox-check {
+        @include centerXY;
+        font-size: 10px;
+      }
+    }
   }
 
   .error {

package/src/js/select/dvrdMultiSelect.tsx

@@ -0,0 +1,210 @@
+/*
+ * Copyright (c) 2024. Dave van Rijn Development
+ */
+import './style/dvrdSelect.scss';
+
+import React, {MouseEventHandler, ReactElement, useEffect, useMemo, useRef, useState} from 'react';
+import classNames from 'classnames';
+import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
+import {hasHover, stopPropagation} from '../util/controlUtil';
+import AwesomeIcon from '../icon/awesomeIcon';
+import delay from 'lodash.delay';
+
+interface Props {
+    onChange: (selected: Array<string | number>) => MouseEventHandler;
+    onChangeSearch: ChangeFunction;
+    selected: Array<string | number>;
+    items: SelectItemShape[];
+    disabled?: boolean;
+    error?: ErrorType;
+    label?: string;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    arrowClassName?: string;
+    errorClassName?: string;
+    itemContainerClassName?: string;
+    itemClassName?: string;
+    itemsPosition: 'top' | 'bottom';
+    selectOnly: boolean;
+    searchValue: string;
+    optionsContainerHeight: number | string;
+}
+
+// interface State {
+//     open: boolean;
+//     searchFocused: boolean;
+// }
+
+const transitionDuration = 200; // ms
+
+export default function DvrdMultiSelect(props: Props) {
+    const {
+        error, disabled, selected, onChange, onChangeSearch, items, optionsContainerHeight, label, labelClassName,
+        selectOnly, valueClassName, searchValue, arrowClassName, itemClassName, itemsPosition, itemContainerClassName,
+        errorClassName, className
+    } = props;
+    const [open, setOpen] = useState(false);
+    const [searchFocused, setSearchFocused] = useState(false);
+    const container = useRef<HTMLDivElement>(null);
+    const hasError = useMemo(() => !!error, [error]);
+    const itemsContainerStyle = useMemo(() => {
+        let maxHeight: string | number = optionsContainerHeight;
+        if (typeof maxHeight === 'number') maxHeight = `${maxHeight}px`;
+        return {maxHeight: maxHeight};
+    }, [optionsContainerHeight])
+
+    function onClickElement(evt: React.MouseEvent) {
+        stopPropagation(evt);
+        if (disabled) return;
+        setOpen(!open);
+    }
+
+    function onClickItem(_value: string | number) {
+        return function (evt: React.MouseEvent) {
+            stopPropagation(evt);
+            if (selected.includes(_value))
+                onChange(selected.filter((value: string | number) => value !== _value))(evt);
+            else onChange(selected.concat(_value))(evt);
+        }
+    }
+
+    function onFocusInput() {
+        setSearchFocused(true);
+        setOpen(true);
+    }
+
+    function onBlurInput() {
+        delay(() => {
+            setSearchFocused(false);
+            onChangeSearch({target: {value: ''}});
+        }, transitionDuration);
+    }
+
+    function getLongestValue(): string {
+        let longest: string = '';
+        for (const item of items) {
+            const stringLabel = item.label.toString();
+            if (stringLabel.length > longest.length)
+                longest = stringLabel;
+        }
+        return longest;
+    }
+
+    function getValueLabel(): string {
+        let valueLabel = '';
+        let extra = 0;
+        for (const item of items) {
+            if (selected.includes(item.value)) {
+                if (valueLabel.length) extra++;
+                else valueLabel = getItemLabel(item);
+            }
+        }
+        if (!valueLabel.length) return '';
+        if (extra) valueLabel += ` +${extra}`
+        return valueLabel;
+    }
+
+    function getItemLabel(item: SelectItemShape): string {
+        const {label} = item;
+        if (['string', 'number'].includes(typeof label)) return label.toString();
+        else if (!!item.valueLabel) return item.valueLabel;
+        return item.value.toString();
+    }
+
+    function renderLabel() {
+        if (!label) return null;
+        return <label className={classNames('dvrd-select-label', labelClassName)}
+                      onClick={onClickElement}>{label}</label>
+    }
+
+    function renderValue() {
+        const valueLabel = getValueLabel();
+        if (selectOnly)
+            return (
+                <div style={{display: 'flex', flexDirection: 'column'}}>
+                    <label className={classNames('dvrd-select-value', valueClassName)}
+                           onClick={onClickElement}>{valueLabel}</label>
+                    <label style={{height: 0, visibility: 'hidden'}}>{getLongestValue()}</label>
+                </div>
+            );
+        const value = searchFocused ? searchValue : valueLabel;
+        return <input className='dvrd-select-search' value={value} onChange={onChangeSearch} disabled={disabled}
+                      onFocus={onFocusInput} onBlur={onBlurInput} onClick={stopPropagation}/>
+    }
+
+    function renderArrow() {
+        return <AwesomeIcon name='chevron-down' onClick={onClickElement}
+                            className={classNames('dvrd-select-arrow', open && 'open', arrowClassName)}/>;
+    }
+
+    function renderItems() {
+        const _items = items.filter((item: SelectItemShape) => {
+            if (item.selectable === false) return false;
+            if (typeof item.label === 'string') return item.label.length > 0;
+            return true;
+        });
+        return (
+            <div
+                className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
+                    itemContainerClassName)} style={itemsContainerStyle}>
+                {_items.map(renderItem)}
+            </div>
+        )
+    }
+
+    function renderItem(item: SelectItemShape, index: number) {
+        const {value, selectableItemLabel} = item;
+        const isSelected = selected.includes(value);
+        const label = selectableItemLabel ?? item.label;
+        if (['number', 'string'].includes(typeof label)) return (
+            <label key={index} className={classNames('dvrd-select-item', isSelected && 'selected', itemClassName)}
+                   onClick={onClickItem(value)}><AwesomeIcon name='check' className='check-icon'/> {label}</label>
+        );
+        const labelElement: ReactElement = label as ReactElement;
+        const onClick = (evt: React.MouseEvent) => {
+            onClickItem(value)(evt);
+            labelElement.props.onClick?.(evt);
+        };
+        const className = classNames(labelElement.props.className, 'dvrd-select-item', isSelected && 'selected', itemClassName);
+        return React.cloneElement(labelElement, {...labelElement.props, onClick, className, key: index});
+    }
+
+    function renderError() {
+        if (!hasError) return null;
+        return <label className={classNames('dvrd-select-error', errorClassName)}>{error}</label>
+    }
+
+    function addClickListener() {
+        document.addEventListener('click', clickListener);
+    }
+
+    function removeClickListener() {
+        document.removeEventListener('click', clickListener);
+    }
+
+    function clickListener() {
+        if (!hasHover(container.current)) setOpen(false);
+    }
+
+    useEffect(() => {
+        if (open) addClickListener();
+        else removeClickListener();
+        return function () {
+            removeClickListener();
+        }
+    }, [open]);
+
+    return (
+        <div className={classNames('dvrd-select-container', 'multi', disabled && 'disabled', open && 'open',
+            hasError && 'error', className)} ref={container} onClick={onClickElement}>
+            {renderLabel()}
+            <div className={classNames('content-container', !selectOnly && 'search')}>
+                {renderValue()}
+                {renderArrow()}
+            </div>
+            {renderItems()}
+            {renderError()}
+        </div>
+    )
+}

package/src/js/select/dvrdSelectController.tsx

@@ -2,14 +2,17 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React, {PureComponent} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import DvrdSelect from "./dvrdSelect";
 import {ChangeFunction, ErrorType, SelectItemShape} from "../util/interfaces";
 import {stringContains} from '../util/controlUtil';
+import DvrdMultiSelect from "./dvrdMultiSelect";
+
+type ValueType = string | number | Array<string | number>;
 
 interface Props {
-    onChange: ChangeFunction;
-    value: string | number;
+    onChange: ChangeFunction<ValueType>;
+    value: ValueType;
     items: SelectItemShape[];
     disabled?: boolean;
     label?: string;
@@ -21,66 +24,124 @@ interface Props {
     errorClassName?: string;
     itemContainerClassName?: string;
     itemClassName?: string;
-    itemsPosition: 'top' | 'bottom';
-    selectOnly: boolean;
-    optionsContainerHeight: number | string;
-    unControlled?: boolean;
-}
-
-interface State {
-    searchValue: string;
-    value: string | number;
+    itemsPosition?: 'top' | 'bottom';
+    selectOnly?: false;
+    optionsContainerHeight?: number | string;
+    unControlled?: true;
+    multi?: true;
 }
 
-export default class DvrdSelectController extends PureComponent<Props, State> {
-    private select: DvrdSelect;
+// interface State {
+//     searchValue: string;
+//     value: string | number | Array<string | number>;
+// }
 
-    static defaultProps = {
-        itemsPosition: 'bottom',
-        selectOnly: true,
-        optionsContainerHeight: '15rem',
-    };
+export default function DvrdSelectController(props: Props) {
+    const {
+        value, multi, unControlled, onChange, items, error, className, labelClassName, valueClassName,
+        itemContainerClassName, arrowClassName, errorClassName, itemClassName, label, disabled
+    } = props;
+    const [search, setSearch] = useState('');
+    const [internalValue, setInternalValue] = useState<ValueType>('');
+    const _items = useMemo(() => {
+        if (!search) return items;
+        return items.filter((item) => stringContains(item.label.toString(), search));
+    }, [items, search]);
+    const _value = useMemo(() => unControlled ? internalValue : value,
+        [unControlled, internalValue, value]);
 
-    state: State = {
-        searchValue: '',
-        value: this.props.value,
-    };
-
-    onChange = (value: string | number) => () => {
-        this.props.onChange(value);
-        this.setState({value});
-    };
+    function _onChange(value: ValueType) {
+        return function () {
+            onChange(value);
+            setInternalValue(value);
+        }
+    }
 
-    onChangeSearch = (evt: React.ChangeEvent<HTMLInputElement>) => {
-        const {value} = evt.target;
-        this.setState({searchValue: value});
-    };
+    function onChangeSearch(evt: React.ChangeEvent<HTMLInputElement>) {
+        setSearch(evt.target.value);
+    }
 
-    onOpen = (evt: React.MouseEvent) => {
-        if (this.select) this.select.onClickElement(evt);
-    };
+    useEffect(() => {
+        if (multi && !Array.isArray(value)) throw new TypeError('Value must be an array in multi mode');
+        else if (!multi && Array.isArray(value)) throw new TypeError('Value must be a string or number in single mode');
+        if (!unControlled && value !== internalValue) setInternalValue(value);
+    }, [value, multi, unControlled]);
 
-    getItems = () => {
-        const items = this.props.items.slice(), {searchValue} = this.state;
-        if (!searchValue) return items;
-        return items.filter((item) => stringContains(item.label.toString(), searchValue))
-    }
+    const itemsPosition = props.itemsPosition ?? 'bottom';
+    const optionsContainerHeight = props.optionsContainerHeight ?? '15rem';
+    const selectOnly = props.selectOnly !== false;
+    if (multi) return (
+        <DvrdMultiSelect onChange={_onChange} onChangeSearch={onChangeSearch}
+                         selected={_value as Array<string | number>} items={_items} itemsPosition={itemsPosition}
+                         selectOnly={selectOnly} searchValue={search} optionsContainerHeight={optionsContainerHeight}
+                         className={className} error={error} label={label} arrowClassName={arrowClassName}
+                         errorClassName={errorClassName} itemClassName={itemClassName}
+                         itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
+                         labelClassName={labelClassName} disabled={disabled}/>
+    );
+    return (
+        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={_value as number | string}
+                    items={_items} itemsPosition={itemsPosition} selectOnly={selectOnly} searchValue={search}
+                    optionsContainerHeight={optionsContainerHeight} className={className} error={error} label={label}
+                    arrowClassName={arrowClassName} errorClassName={errorClassName} itemClassName={itemClassName}
+                    itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
+                    labelClassName={labelClassName} disabled={disabled}/>
+    );
+}
 
-    render = () => {
-        const {
-            arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
-            itemClassName, errorClassName, disabled, itemsPosition, selectOnly, optionsContainerHeight, unControlled
-        } = this.props, {searchValue} = this.state;
-        const value = !!unControlled ? this.state.value : this.props.value;
-        return (
-            <DvrdSelect onChange={this.onChange} value={value} items={this.getItems()} disabled={disabled}
-                        errorClassName={errorClassName} itemClassName={itemClassName}
-                        itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
-                        labelClassName={labelClassName} className={className} error={error} label={label}
-                        arrowClassName={arrowClassName} itemsPosition={itemsPosition} ref={(ref: DvrdSelect) => {
-                this.select = ref
-            }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
-                        optionsContainerHeight={optionsContainerHeight}/>
-        );
-    }
-};
+// class _DvrdSelectController extends PureComponent<Props, State> {
+//     private select: DvrdSelect;
+//
+//     static defaultProps = {
+//         itemsPosition: 'bottom',
+//         selectOnly: true,
+//         optionsContainerHeight: '15rem',
+//     };
+//
+//     state: State = {
+//         searchValue: '',
+//         value: this.props.value,
+//     };
+//
+//     onChange = (value: string | number) => () => {
+//         this.props.onChange(value);
+//         this.setState({value});
+//     };
+//
+//     onChangeSearch = (evt: React.ChangeEvent<HTMLInputElement>) => {
+//         const {value} = evt.target;
+//         this.setState({searchValue: value});
+//     };
+//
+//     onOpen = (evt: React.MouseEvent) => {
+//         if (this.select) this.select.onClickElement(evt);
+//     };
+//
+//     getItems = () => {
+//         const items = this.props.items.slice(), {searchValue} = this.state;
+//         if (!searchValue) return items;
+//         return items.filter((item) => stringContains(item.label.toString(), searchValue))
+//     }
+//
+//     render = () => {
+//         const {
+//             arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
+//             itemClassName, errorClassName, disabled, itemsPosition, selectOnly, optionsContainerHeight, unControlled,
+//             multi
+//         } = this.props, {searchValue} = this.state;
+//         const value = !!unControlled ? this.state.value : this.props.value;
+//         if (!multi && Array.isArray(value)) throw new TypeError('Value cannot be an array in single mode');
+//         else if (multi && !Array.isArray(value)) throw new TypeError('Value must be an array in multi mode');
+//         return (
+//             <DvrdSelect onChange={this.onChange} value={value as string | number} items={this.getItems()}
+//                         disabled={disabled}
+//                         errorClassName={errorClassName} itemClassName={itemClassName}
+//                         itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
+//                         labelClassName={labelClassName} className={className} error={error} label={label}
+//                         arrowClassName={arrowClassName} itemsPosition={itemsPosition} ref={(ref: DvrdSelect) => {
+//                 this.select = ref
+//             }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
+//                         optionsContainerHeight={optionsContainerHeight}/>
+//         );
+//     }
+// };

package/src/js/select/style/dvrdSelect.scss

@@ -137,4 +137,22 @@
       opacity: 1;
     }
   }
+
+  &.multi {
+    .dvrd-select-items {
+      .dvrd-select-item {
+        .check-icon {
+          vertical-align: middle;
+        }
+
+        &.selected {
+          background-color: rgba($color-green-whatsapp, .2);
+
+          .check-icon {
+            color: $color-green-whatsapp;
+          }
+        }
+      }
+    }
+  }
 }

package/src/js/util/colorUtil.ts

@@ -124,8 +124,7 @@ export const getRandomColor = (): string => {
     return color;
 };
 
-//@ts-ignore-start
-export const editColor = (p, c0, c1?, l?): string => {
+export const editColor = (p: number, c0: string, c1?: string, l?: any): string => {
     c0 = convertColor(c0);
     let r, g, b, P, f, t, h, i = parseInt, m = Math.round, a = typeof (c1) == "string";
     if (p < -1 || p > 1 || (c0[0] !== 'r' && c0[0] !== '#') || (c1 && !a)) return c0;