@dvrd/dvr-controls 1.0.43 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -25,11 +25,16 @@
     ]
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "6.15.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-brands-svg-icons": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@types/dompurify": "2.4.0",
     "@types/js-cookie": "3.0.3",
     "@types/lodash.defer": "^4.1.7",
@@ -40,14 +45,8 @@
     "@types/node": "18.14.0",
     "@types/react": "^18.2.28",
     "@types/react-color": "2.13.5",
-    "@types/react-dom": "18.0.11",
+    "@types/react-dom": "^18.0.11",
     "@types/uuid": "9.0.0",
-    "typescript": "4.9.5",
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-brands-svg-icons": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
-    "@fortawesome/react-fontawesome": "0.2.0",
     "classnames": "2.3.2",
     "dompurify": "3.0.0",
     "js-cookie": "3.0.1",
@@ -59,6 +58,7 @@
     "moment": "2.29.4",
     "react-color": "2.19.3",
     "react-rnd": "10.4.1",
+    "typescript": "4.9.5",
     "uuid": "9.0.0"
   }
 }

package/src/js/date/dvrdDatePicker.tsx

@@ -5,7 +5,7 @@ import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
 import {Moment} from 'moment';
-import React, {PureComponent, useMemo, useState} from 'react';
+import React, {MouseEventHandler, useEffect, useMemo, useRef, useState} from 'react';
 import {ChangeFunction, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import {toMoment} from '../util/momentUtil';
@@ -26,12 +26,14 @@ interface Props {
     alwaysShowArrows?: boolean;
     useMobileNative?: boolean;
     id?: string;
+    max?: Moment | string;
+    min?: Moment | string;
 }
 
 export default function DvrdDatePicker(props: Props) {
     const {
         onChange, className, closeOnChange, error, label, value, placeholder, disabled, alwaysShowArrows,
-        useMobileNative
+        useMobileNative, max, min
     } = props;
     const [pickerOpen, setPickerOpen] = useState(false);
     const dateFormat = useMemo(() => {
@@ -80,7 +82,7 @@ export default function DvrdDatePicker(props: Props) {
                 <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
             </div>
             <Picker onClose={onClosePicker} onChange={onChangePicker} open={pickerOpen} value={value}
-                    alwaysShowArrows={alwaysShowArrows}/>
+                    alwaysShowArrows={alwaysShowArrows} max={max} min={min}/>
             <label className='error-label'>{error}</label>
         </div>
     )
@@ -92,121 +94,162 @@ interface PickerProps {
     value: Moment | null;
     open: boolean;
     alwaysShowArrows?: boolean;
+    max?: Moment | string;
+    min?: Moment | string;
 }
 
-class Picker extends PureComponent<PickerProps> {
-    private ref: HTMLDivElement | null = null;
+function Picker(props: PickerProps) {
+    const {min, max, alwaysShowArrows, open, onClose, value, onChange} = props;
+    const divRef = useRef<HTMLDivElement>(null);
+    const pickerValue = useMemo(() => toMoment(value), [value]);
+    const [padBeforeDays, days, padAfterDays] = useMemo(() => {
+        const daysInMonth = pickerValue.daysInMonth();
+        const days: number[] = [];
+        const padBeforeDays: number[] = [];
+        const padAfterDays: number[] = [];
+        for (let i = 1; i <= daysInMonth; i++) days.push(i);
+        let firstMonthDay = pickerValue.clone().date(1).day();
+        if (!firstMonthDay) firstMonthDay = 7;
+        const padDaysBefore = firstMonthDay - 1;
+        let dayBefore = pickerValue.clone().add(-1, 'month').daysInMonth()
+        for (let i = 0; i < padDaysBefore; i++)
+            padBeforeDays.splice(0, 0, dayBefore--);
 
-    getPickerValue = (): Moment => toMoment(this.props.value);
+        const lastWeekDay = pickerValue.clone().date(daysInMonth).day();
+        const padDaysAfter = 7 - lastWeekDay;
+        for (let i = 0; i < padDaysAfter; i++)
+            padAfterDays.push(i + 1);
 
-    onReduce = (key: 'year' | 'month') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        pickerValue.add(-1, key);
-        pickerValue.date(Math.min(pickerValue.daysInMonth(), pickerValue.date()))
-        onChange(false)(pickerValue);
-    };
+        if (Math.ceil(padAfterDays.concat(days).concat(padBeforeDays).length / 7) < 6) {
+            let dayAfter = padAfterDays[padAfterDays.length - 1] + 1;
+            for (let i = 0; i < 7; i++)
+                padAfterDays.push(dayAfter++);
+        }
+        return [padBeforeDays, days, padAfterDays];
+    }, [pickerValue]);
+
+    function onReduce(key: 'year' | 'month') {
+        return function () {
+            const value = pickerValue.clone();
+            value.add(-1, key);
+            value.date(Math.min(value.daysInMonth(), value.date()))
+            onChange(false)(value);
+        }
+    }
 
-    onAdd = (key: 'year' | 'month') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        pickerValue.add(1, key);
-        pickerValue.date(Math.min(pickerValue.daysInMonth(), pickerValue.date()))
-        onChange(false)(pickerValue);
-    };
+    function onAdd(key: 'year' | 'month') {
+        return function () {
+            const value = pickerValue.clone();
+            value.add(1, key);
+            value.date(Math.min(value.daysInMonth(), value.date()))
+            onChange(false)(value);
+        }
+    }
 
-    onResetSwitcher = (key: 'year' | 'month') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        if (key === 'year') pickerValue.year(toMoment().year());
-        else pickerValue.month(toMoment().month());
-        pickerValue.date(Math.min(pickerValue.daysInMonth(), pickerValue.date()))
-        onChange(false)(pickerValue);
+    function onResetSwitcher(key: 'year' | 'month') {
+        return function () {
+            const value = pickerValue.clone();
+            if (key === 'year') value.year(toMoment().year());
+            else value.month(toMoment().month());
+            value.date(Math.min(value.daysInMonth(), value.date()))
+            onChange(false)(value);
+        }
     }
 
-    onClickToday = () => {
-        const {onChange} = this.props;
+    function onClickToday() {
         onChange(true)(toMoment());
-    };
+    }
 
-    onSelectDay = (day: number, month?: number, year?: number) => () => {
-        const {onChange, value} = this.props, pickerValue = this.getPickerValue();
-        if (day || value === null) {
-            pickerValue.date(day);
-            if (month !== undefined) pickerValue.month(month);
-            if (year !== undefined) pickerValue.year(year);
-            onChange(true)(pickerValue);
+    function onSelectDay(day: number, month?: number, year?: number) {
+        return function () {
+            const pickValue = pickerValue.clone();
+            if (day || value === null) {
+                pickValue.date(day);
+                if (month !== undefined) pickValue.month(month);
+                if (year !== undefined) pickValue.year(year);
+                onChange(true)(pickValue);
+            }
         }
     }
 
-    onSelectPadDay = (day: number, kind: 'prev' | 'next') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        const value = pickerValue.clone();
-        if (kind === 'prev') value.add(-1, 'month');
-        else value.add(1, 'month');
-        value.date(day);
-        onChange(true)(value);
-    };
+    function onSelectPadDay(day: number, kind: 'prev' | 'next') {
+        return function () {
+            const value = pickerValue.clone();
+            if (kind === 'prev') value.add(-1, 'month');
+            else value.add(1, 'month');
+            value.date(day);
+            onChange(true)(value);
+        }
+    }
 
-    keyListener = (evt: KeyboardEvent) => {
-        const {key, shiftKey, ctrlKey} = evt, {onClose} = this.props;
+    function keyListener(evt: KeyboardEvent) {
+        const {key, shiftKey, ctrlKey} = evt;
         if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'Enter'].includes(key)) {
             evt.preventDefault();
         }
-        if (key === 'ArrowLeft') {
-            this.onLeftKey(shiftKey, ctrlKey);
-        } else if (key === 'ArrowRight') {
-            this.onRightKey(shiftKey, ctrlKey);
-        } else if (key === 'ArrowUp') {
-            this.onUpKey();
-        } else if (key === 'ArrowDown') {
-            this.onDownKey();
-        } else if (key === 'Enter') {
-            onClose();
-        }
-    };
+        if (key === 'ArrowLeft') onLeftKey(shiftKey, ctrlKey);
+        else if (key === 'ArrowRight') onRightKey(shiftKey, ctrlKey);
+        else if (key === 'ArrowUp') onUpKey();
+        else if (key === 'ArrowDown') onDownKey();
+        else if (key === 'Enter') onClose();
+    }
 
-    onLeftKey = (shiftKey: boolean, ctrlKey: boolean) => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue()
+    function onLeftKey(shiftKey: boolean, ctrlKey: boolean) {
+        const value = pickerValue.clone();
         if (shiftKey) {
-            if (ctrlKey) this.onReduce('year')();
-            else this.onReduce('month')();
-        } else onChange(false)(pickerValue.add(-1, 'd'));
+            if (ctrlKey) onReduce('year')();
+            else onReduce('month')();
+        } else onChange(false)(value.add(-1, 'days'));
     }
 
-    onRightKey = (shiftKey: boolean, ctrlKey: boolean) => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
+    function onRightKey(shiftKey: boolean, ctrlKey: boolean) {
+        const value = pickerValue.clone();
         if (shiftKey) {
-            if (ctrlKey) this.onAdd('year')();
-            else this.onAdd('month')();
-        } else onChange(false)(pickerValue.add(1, 'd'));
+            if (ctrlKey) onAdd('year')();
+            else onAdd('month')();
+        } else onChange(false)(value.add(1, 'days'));
     }
 
-    onUpKey = () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        onChange(false)(pickerValue.add(-7, 'd'));
+    function onUpKey() {
+        const value = pickerValue.clone();
+        onChange(false)(value.add(-7, 'days'));
     }
 
-    onDownKey = () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        onChange(false)(pickerValue.add(7, 'd'));
+    function onDownKey() {
+        const value = pickerValue.clone();
+        onChange(false)(value.add(7, 'days'));
     }
 
-    addMountClass = () => {
-        if (!this.ref?.classList.contains('switch-mount'))
-            this.ref?.classList.add('switch-mount');
-    };
+    function addMountClass() {
+        const div = divRef.current;
+        if (div?.classList.contains('switch-mount'))
+            div.classList.add('switch-mount');
+    }
 
-    removeMountClass = () => {
-        if (!this.props.alwaysShowArrows)
-            this.ref?.classList.remove('switch-mount');
-    };
+    function removeMountClass() {
+        if (!alwaysShowArrows)
+            divRef.current?.classList.remove('switch-mount');
+    }
+
+    function dateIsDisabled(day: number, month?: number, year?: number) {
+        if (!min && !max) return false;
+        const pickValue = pickerValue.clone();
+        pickValue.date(day);
+        if (month !== undefined) pickValue.month(month);
+        if (year !== undefined) pickValue.year(year);
+        if (min && toMoment(min).isAfter(pickValue, 'date')) return true;
+        else if (max && toMoment(max).isBefore(pickValue, 'date')) return true;
+        return false;
+    }
 
-    renderSwitcher = (key: 'year' | 'month', kind: 'add' | 'reduce') => {
-        const icon = kind === 'add' ? 'chevron-right' : 'chevron-left',
-            title = kind === 'add' ? 'Volgende' : 'Vorige',
-            onClick = kind === 'add' ? this.onAdd(key) : this.onReduce(key);
+    function renderSwitcher(key: 'year' | 'month', kind: 'add' | 'reduce') {
+        const icon = kind === 'add' ? 'chevron-right' : 'chevron-left';
+        const title = kind === 'add' ? 'Volgende' : 'Vorige';
+        const onClick = kind === 'add' ? onAdd(key) : onReduce(key);
         return <AwesomeIcon name={icon} title={title} className={classNames('switcher-icon', kind)} onClick={onClick}/>
     }
 
-    renderTooltipContainer = () => {
+    function renderTooltipContainer() {
         return (
             <div className='tooltip-container'>
                 <AwesomeIcon name='question-circle' className='tooltip-icon' prefix='far'/>
@@ -269,113 +312,94 @@ class Picker extends PureComponent<PickerProps> {
         )
     }
 
-    componentDidUpdate = (prevProps: PickerProps) => {
-        const {open} = this.props, prevOpen = prevProps.open;
-        if (open && !prevOpen) {
-            document.addEventListener('keydown', this.keyListener);
-            this.addMountClass();
-            window.setTimeout(this.removeMountClass, 1000);
-        } else if (!open && prevOpen) document.removeEventListener('keydown', this.keyListener);
-    };
-
-    componentWillUnmount = () => {
-        document.removeEventListener('keydown', this.keyListener);
-    };
-
-    render = () => {
-        const {open, onClose} = this.props, pickerValue = this.getPickerValue(),
-            daysInMonth = pickerValue.daysInMonth(), days: number[] = [], padBeforeDays: number[] = [],
-            padAfterDays: number[] = [];
-        for (let i = 1; i <= daysInMonth; i++) days.push(i);
-        let firstMonthDay = pickerValue.clone().date(1).day();
-        if (!firstMonthDay) firstMonthDay = 7;
-        const padDaysBefore = firstMonthDay - 1;
-        let dayBefore = pickerValue.clone().add(-1, 'month').daysInMonth()
-        for (let i = 0; i < padDaysBefore; i++)
-            padBeforeDays.splice(0, 0, dayBefore--);
-
-        const lastWeekDay = pickerValue.clone().date(daysInMonth).day();
-        const padDaysAfter = 7 - lastWeekDay;
-        for (let i = 0; i < padDaysAfter; i++)
-            padAfterDays.push(i + 1);
-
-        if (Math.ceil(padAfterDays.concat(days).concat(padBeforeDays).length / 7) < 6) {
-            let dayAfter = padAfterDays[padAfterDays.length - 1] + 1;
-            for (let i = 0; i < 7; i++)
-                padAfterDays.push(dayAfter++);
+    useEffect(() => {
+        if (open) {
+            document.addEventListener('keydown', keyListener);
+            addMountClass();
+            window.setTimeout(removeMountClass, 1000);
+        } else {
+            document.removeEventListener('keydown', keyListener);
         }
-
+        return function () {
+            document.removeEventListener('keydown', keyListener);
+        }
+    }, [open]);
+
+    function renderDay(day: number, index: number, onClick: MouseEventHandler, className?: string, type?: 'prev' | 'next') {
+        let pickValue = pickerValue.clone();
+        if (type === 'prev')
+            pickValue = pickValue.subtract(1, 'month');
+        else if (type === 'next')
+            pickValue = pickValue.add(1, 'month');
+        const month = pickValue.month();
+        const year = pickValue.year();
+        const disabled = dateIsDisabled(day, month, year);
         return (
-            <WithBackground active={open} onClose={onClose}>
-                <div className='picker' ref={(ref: HTMLDivElement) => {
-                    this.ref = ref
-                }}>
-                    <div className='switcher year'>
-                        {this.renderSwitcher('year', 'reduce')}
-                        <label className='switcher-label'
-                               onClick={this.onResetSwitcher('year')}>{pickerValue.year()}</label>
-                        {this.renderSwitcher('year', 'add')}
+            <div className={classNames('day', disabled && 'disabled', className)}
+                 onClick={disabled ? undefined : onClick} key={index}>
+                <span className='day-label'>{day}</span>
+            </div>
+        )
+    }
+
+    return (
+        <WithBackground active={open} onClose={onClose}>
+            <div className='picker' ref={divRef}>
+                <div className='switcher year'>
+                    {renderSwitcher('year', 'reduce')}
+                    <label className='switcher-label'
+                           onClick={onResetSwitcher('year')}>{pickerValue.year()}</label>
+                    {renderSwitcher('year', 'add')}
+                </div>
+                <div className='switcher month'>
+                    {renderSwitcher('month', 'reduce')}
+                    <label className='switcher-label' onClick={onResetSwitcher('month')}>{pickerValue.format(
+                        'MMMM')}</label>
+                    {renderSwitcher('month', 'add')}
+                </div>
+                <div className='current-date-container'>
+                    <label className='current-date-label'>{pickerValue.format('dddd D MMMM YYYY')}</label>
+                    {renderTooltipContainer()}
+                </div>
+                <div className='days-container'>
+                    <div className='day no-select'>
+                        <span className='day-label'>Ma</span>
                     </div>
-                    <div className='switcher month'>
-                        {this.renderSwitcher('month', 'reduce')}
-                        <label className='switcher-label' onClick={this.onResetSwitcher('month')}>{pickerValue.format(
-                            'MMMM')}</label>
-                        {this.renderSwitcher('month', 'add')}
+                    <div className='day no-select'>
+                        <span className='day-label'>Di</span>
                     </div>
-                    <div className='current-date-container'>
-                        <label className='current-date-label'>{pickerValue.format('dddd D MMMM YYYY')}</label>
-                        {this.renderTooltipContainer()}
+                    <div className='day no-select'>
+                        <span className='day-label'>Wo</span>
                     </div>
-                    <div className='days-container'>
-                        <div className='day no-select'>
-                            <span className='day-label'>Ma</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Di</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Wo</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Do</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Vr</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Za</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Zo</span>
-                        </div>
-                        {padBeforeDays.map((day: number, index: number) => (
-                            <div className={classNames('day', 'pad')} onClick={this.onSelectPadDay(day, 'prev')}
-                                 key={index}>
-                                <span className='day-label'>{day}</span>
-                            </div>
-                        ))}
-                        {days.map((day: number, index: number) => {
-                            const isSelected = day === pickerValue.date();
-                            return (
-                                <div className={classNames('day', isSelected && 'selected', day === 0 && 'hide')}
-                                     key={index} onClick={this.onSelectDay(day)}>
-                                    <span className='day-label'>{day}</span>
-                                </div>
-                            )
-                        })}
-                        {padAfterDays.map((day: number, index: number) => (
-                            <div className={classNames('day', 'pad')} onClick={this.onSelectPadDay(day, 'next')}
-                                 key={index}>
-                                <span className='day-label'>{day}</span>
-                            </div>
-                        ))}
+                    <div className='day no-select'>
+                        <span className='day-label'>Do</span>
+                    </div>
+                    <div className='day no-select'>
+                        <span className='day-label'>Vr</span>
+                    </div>
+                    <div className='day no-select'>
+                        <span className='day-label'>Za</span>
                     </div>
-                    <div className='actions-container'>
-                        <DvrdButton onClick={this.onClickToday} label='Vandaag' className='action'/>
-                        <DvrdButton onClick={onClose} label='Sluiten' secondary className='action'/>
+                    <div className='day no-select'>
+                        <span className='day-label'>Zo</span>
                     </div>
+                    {padBeforeDays.map((day: number, index: number) => {
+                        return renderDay(day, index, onSelectPadDay(day, 'prev'), 'pad', 'prev');
+                    })}
+                    {days.map((day: number, index: number) => {
+                        const isSelected = day === pickerValue.date();
+                        return renderDay(day, index, onSelectDay(day),
+                            classNames(isSelected && 'selected', day === 0 && 'hide'));
+                    })}
+                    {padAfterDays.map((day: number, index: number) => {
+                        return renderDay(day, index, onSelectPadDay(day, 'next'), 'pad', 'next');
+                    })}
                 </div>
-            </WithBackground>
-        )
-    }
+                <div className='actions-container'>
+                    <DvrdButton onClick={onClickToday} label='Vandaag' className='action'/>
+                    <DvrdButton onClick={onClose} label='Sluiten' secondary className='action'/>
+                </div>
+            </div>
+        </WithBackground>
+    )
 }

package/src/js/date/style/dvrdDatePicker.scss

@@ -254,6 +254,12 @@
         &:hover {
           background-color: rgba($color-blue-1, .2);
         }
+
+        &.disabled {
+          color: $color-gray-4;
+          background-color: unset;
+          cursor: default;
+        }
       }
 
       .extra-row {

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -4,7 +4,7 @@
 import './style/sidebarMenu.scss';
 
 import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
-import {useLocation} from 'react-router-dom';
+import {NavLink, useLocation} from 'react-router-dom';
 import {SidebarItem, SideMenuMode} from "../util/interfaces";
 import classNames from 'classnames';
 import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
@@ -82,21 +82,33 @@ export default function SidebarMenu(props: Props) {
 
     function renderItem(isChild: boolean = false) {
         return function (item: SidebarItem) {
-            const {className, icon, id, label, children} = item,
+            const {className, icon, id, label, children, asNavLink} = item,
                 isActive = itemHasActiveId(item, activeItem),
                 cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
                     isChild && 'child', children !== undefined && 'with-children');
-            return (
-                <div key={id} className={cls} onClick={_onClickItem(item)} id={id}>
-                    {renderIcon(isActive, isChild, label, icon)}
+
+            const content = (
+                <>
+                    {renderIcon(isChild, label, icon)}
                     {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
-                    <span className={classNames('item-label', isActive && 'active')}>{label}</span>
+                    <span className='item-label'>{label}</span>
                     {children !== undefined && (
                         <>
                             {isActive && <div className='line'/>}
                             {renderChildren(isActive)(children)}
                         </>
                     )}
+                </>
+            );
+
+            if (asNavLink) return (
+                <NavLink key={id} to={item.route as string} className={cls} id={id}>
+                    {content}
+                </NavLink>
+            );
+            return (
+                <div key={id} className={classNames(cls, isActive && 'active')} onClick={_onClickItem(item)} id={id}>
+                    {content}
                 </div>
             )
         }
@@ -113,8 +125,8 @@ export default function SidebarMenu(props: Props) {
         }
     }
 
-    function renderIcon(isActive: boolean, isChild: boolean, label: string, icon?: IconName | ReactNode): ReactNode {
-        const className = classNames('item-icon', isActive && 'active');
+    function renderIcon(isChild: boolean, label: string, icon?: IconName | ReactNode): ReactNode {
+        const className = 'item-icon'
         if (icon) {
             if (typeof icon === 'string') return <AwesomeIcon name={icon as IconName} className={className}/>;
             else if (React.isValidElement(icon))

package/src/js/sidebarMenu/style/sidebarMenu.scss

@@ -5,8 +5,6 @@
 @import '../../../style/variables';
 
 .dvr-side-bar-menu {
-  //--base-color: white;
-  //--contrast-color: $color-blue-1;
   @include backgroundShadow;
   display: flex;
   flex-direction: column;
@@ -30,6 +28,7 @@
     background-color: var(--contrast-color-color);
     transition: background-color .2s ease-in-out;
     color: var(--base-color);
+    text-decoration: none;
 
     .item-icon {
       color: $color-gray-4;
@@ -100,6 +99,7 @@
       align-items: center;
       cursor: pointer;
       position: relative;
+      text-decoration: none;
 
       .item-icon {
         color: #686869;
@@ -119,11 +119,11 @@
         transition: color .2s ease-in-out;
         white-space: nowrap;
         user-select: none;
-
-        &.active {
-          font-weight: 600;
-          color: black;
-        }
+        //
+        //&.active {
+        //  font-weight: 600;
+        //  color: black;
+        //}
       }
 
       .line {
@@ -164,6 +164,18 @@
       &.with-children {
         margin-bottom: -.5rem;
       }
+
+      &.active {
+        .item-icon {
+          color: var(--base-color);
+          opacity: 1;
+        }
+
+        .item-label {
+          font-weight: 600;
+          color: black;
+        }
+      }
     }
   }
 }

package/src/js/textField/dvrdNumberInput.tsx

@@ -62,7 +62,7 @@ export default class DvrdNumberInput extends PureComponent<Props, State> {
         const {key, target} = evt;
         let numValue = Number(value);
         // Allow only number and simple edit keys
-        if (!/\d|Backspace|ArrowRight|ArrowLeft|ArrowUp|ArrowDown|Escape|Esc|Enter|[,.\-+]|Tab/.test(key) &&
+        if (!/\d|Backspace|ArrowRight|ArrowLeft|ArrowUp|ArrowDown|Escape|Esc|Enter|[,.\-+]|Tab|Delete|Del/.test(key) &&
             !this.isPasting(evt))
             evt.preventDefault();
 

package/src/js/util/interfaces.ts

@@ -224,6 +224,7 @@ export type SidebarItem = {
     route?: string | string[];
     exactRoute?: boolean;
     children?: SidebarItem[];
+    asNavLink?: true;
 }
 export type ResponseCallback = (data: ResponseData) => void;
 export type RNDDimensions = { x: number, y: number, height: number, width: number };