@dvrd/dvr-controls 1.1.13 → 1.1.15

package/src/js/radio/style/dvrdRadio.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvrd-radio-button {
   cursor: pointer;
@@ -12,14 +13,14 @@
 
   .dvrd-radio-button-label {
     font-size: .9rem;
-    color: $color-blue-text;
+    color: colors.$color-blue-text;
     cursor: inherit;
     user-select: none;
     transition: color .2s ease;
   }
 
   .dvrd-radio-bullet-container {
-    @include backgroundShadow2;
+    @include commons.backgroundShadow2;
     width: 22px;
     height: 22px;
     position: relative;
@@ -46,8 +47,8 @@
     }
 
     .ripple {
-      @include centerXY;
-      @include borderRadius(50%);
+      @include commons.centerXY;
+      border-radius: 50%;
       opacity: 1;
       width: 8px;
       height: 8px;

package/src/js/select/async/style/asyncSelect.scss

@@ -2,8 +2,6 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
-
 .dvr-async-select {
   display: inline-block;
   position: relative;

package/src/js/select/dvrdGroupedSelect.tsx

@@ -7,7 +7,6 @@ import React, {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useMemo
 import {ErrorType, GroupedSelectItem, SelectValueType} from "../util/interfaces";
 import classNames from 'classnames';
 import AwesomeIcon from "../icon/awesomeIcon";
-import defer from 'lodash.defer';
 import {stopPropagation} from "../util/controlUtil";
 
 
@@ -267,7 +266,7 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
     useEffect(() => {
         if (open) {
             document.body.addEventListener('click', clickListener);
-            defer(scrollSelectedInView);
+            window.setTimeout(scrollSelectedInView);
         } else document.body.removeEventListener('click', clickListener);
     }, [open]);
 

package/src/js/select/dvrdMultiSelect.tsx

@@ -8,13 +8,12 @@ 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>, submit: boolean) => VoidFunction;
     onChangeSearch: ChangeFunction;
     selected: Array<string | number>;
-    items: SelectItemShape[];
+    items: Array<SelectItemShape<number | string>>;
     disabled?: boolean;
     error?: ErrorType;
     label?: string;
@@ -83,7 +82,7 @@ export default function DvrdMultiSelect(props: Props) {
     }
 
     function onBlurInput() {
-        delay(() => {
+        window.setTimeout(() => {
             setSearchFocused(false);
             onChangeSearch({target: {value: ''}});
         }, transitionDuration);

package/src/js/select/dvrdSelect.tsx

@@ -9,11 +9,11 @@ import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
 import {hasHover, stopPropagation} from '../util/controlUtil';
 import AwesomeIcon from '../icon/awesomeIcon';
 
-interface Props {
-    onChange: (value: string | number) => MouseEventHandler;
+interface Props<ValueType = string | number> {
+    onChange: (value: ValueType) => MouseEventHandler;
     onChangeSearch: ChangeFunction;
-    value: string | number;
-    items: SelectItemShape[];
+    value: ValueType;
+    items: Array<SelectItemShape<ValueType>>;
     disabled?: boolean;
     error?: ErrorType;
     label?: string;
@@ -35,7 +35,7 @@ interface State {
     searchFocused: boolean;
 }
 
-export default class DvrdSelect extends PureComponent<Props, State> {
+export default class DvrdSelect<ValueType = string | number> extends PureComponent<Props<ValueType>, State> {
     private container: HTMLDivElement;
     state: State = {
         open: false,
@@ -50,7 +50,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
             this.setState({open: !this.state.open});
     };
 
-    onClickItem = (value: string | number) => (evt: React.MouseEvent) => {
+    onClickItem = (value: ValueType) => (evt: React.MouseEvent) => {
         evt.stopPropagation();
         this.props.onChange(value)(evt);
         this.setState({open: false});
@@ -86,11 +86,12 @@ export default class DvrdSelect extends PureComponent<Props, State> {
         return '';
     }
 
-    getItemLabel = (item: SelectItemShape): string | number => {
+    getItemLabel = (item: SelectItemShape<ValueType>): string | number => {
         const {label} = item;
         if (['string', 'number'].includes(typeof label)) return label as string | number;
         else if (!!item.valueLabel) return item.valueLabel;
-        return item.value;
+        // We are not sure what the actual type is, we assume it is something React can render
+        return item.value as string;
     }
 
     getItemsContainerStyle = (): CSSProperties => {
@@ -130,7 +131,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
 
     renderItems = () => {
         const {disabled, itemContainerClassName, itemsPosition} = this.props, {open} = this.state;
-        const items = this.props.items.filter((item: SelectItemShape) => {
+        const items = this.props.items.filter((item: SelectItemShape<ValueType>) => {
             if (item.selectable === false) return false;
             if (typeof item.label === 'string') return item.label.length > 0;
             return true;
@@ -144,7 +145,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
         )
     };
 
-    renderItem = (item: SelectItemShape, index: number) => {
+    renderItem = (item: SelectItemShape<ValueType>, index: number) => {
         const {value, selectableItemLabel} = item;
         const label = selectableItemLabel ?? item.label;
         const {itemClassName} = this.props;
@@ -183,7 +184,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
         if (!hasHover(this.container)) this.setState({open: false});
     };
 
-    componentDidUpdate = (props: Props, prevState: State) => {
+    componentDidUpdate = (props: Props<ValueType>, prevState: State) => {
         const {open} = this.state, prevOpen = prevState.open;
         if (open && !prevOpen) this.addClickListener();
         else if (!open && prevOpen) this.removeClickListener();

package/src/js/select/dvrdSelectController.tsx

@@ -8,12 +8,10 @@ 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 {
+interface Props<ValueType = string | number | Array<string | number>> {
     onChange: ChangeFunction<ValueType>;
     value: ValueType;
-    items: SelectItemShape[];
+    items: Array<SelectItemShape<ValueType>>;
     disabled?: boolean;
     label?: string;
     error?: ErrorType;
@@ -33,21 +31,21 @@ interface Props {
     submitOnClose?: boolean;
 }
 
-export default function DvrdSelectController(props: Props) {
+export default function DvrdSelectController<ValueType = string | number | Array<string | number>>(props: Props<ValueType>) {
     const {
         value, multi, unControlled, onChange, items, error, className, labelClassName, valueClassName,
         itemContainerClassName, arrowClassName, errorClassName, itemClassName, label, disabled, placeholder,
         submitOnClose
     } = props;
     const [search, setSearch] = useState('');
-    const [internalValue, setInternalValue] = useState<ValueType>('');
+    const [internalValue, setInternalValue] = useState<ValueType>('' as ValueType);
     const _items = useMemo(() => {
         if (!search) return items;
         return items.filter((item) => stringContains(item.label.toString(), search));
     }, [items, search]);
 
     function _onChange(value: ValueType, submit: boolean = true) {
-        return function () {
+        return function() {
             if (submit) onChange(value);
             setInternalValue(value);
         }
@@ -70,8 +68,9 @@ export default function DvrdSelectController(props: Props) {
     const optionsContainerHeight = props.optionsContainerHeight ?? '15rem';
     const selectOnly = props.selectOnly !== false;
     if (multi) return (
-        <DvrdMultiSelect onChange={_onChange} onChangeSearch={onChangeSearch}
-                         selected={internalValue as Array<string | number>} items={_items} itemsPosition={itemsPosition}
+        <DvrdMultiSelect onChange={_onChange as any} onChangeSearch={onChangeSearch}
+                         selected={internalValue as Array<string | number>}
+                         items={_items as Array<SelectItemShape<number | string>>} itemsPosition={itemsPosition}
                          selectOnly={selectOnly} searchValue={search} optionsContainerHeight={optionsContainerHeight}
                          className={className} error={error} label={label} arrowClassName={arrowClassName}
                          errorClassName={errorClassName} itemClassName={itemClassName} submitOnClose={submitOnClose}
@@ -79,8 +78,8 @@ export default function DvrdSelectController(props: Props) {
                          labelClassName={labelClassName} disabled={disabled} placeholder={placeholder}/>
     );
     return (
-        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={internalValue as number | string}
-                    items={_items} itemsPosition={itemsPosition} selectOnly={selectOnly} searchValue={search}
+        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={internalValue} 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}

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

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvrd-grouped-select {
   display: grid;
@@ -10,7 +11,7 @@
   position: relative;
 
   .grouped-select-label {
-    color: $color-blue-text;
+    color: colors.$color-blue-text;
     font-size: .9rem;
     transition: color .2s ease-in-out;
     cursor: pointer;
@@ -48,7 +49,7 @@
       }
 
       .grouped-select-placeholder {
-        color: $color-gray-2;
+        color: colors.$color-gray-2;
 
         &.hidden {
           visibility: hidden;
@@ -56,13 +57,13 @@
       }
 
       .grouped-select-value {
-        color: $color-blue-text;
+        color: colors.$color-blue-text;
       }
 
       .chev-icon {
         font-size: .9rem;
         transition: transform .2s ease-in-out;
-        color: $color-gray-3;
+        color: colors.$color-gray-3;
       }
 
       &.searchable {
@@ -71,7 +72,7 @@
     }
 
     .grouped-select-items {
-      @include backgroundShadow3($borderRadius: 0);
+      @include commons.backgroundShadow3($borderRadius: 0);
       background-color: white;
       position: absolute;
       left: 1px;
@@ -89,18 +90,18 @@
           transition: background-color .2s ease-in-out;
           cursor: default;
           user-select: none;
-          color: $color-blue-text;
+          color: colors.$color-blue-text;
 
           &.selectable {
             cursor: pointer;
 
             &:not(&.selected):hover {
-              background-color: rgba($color-blue-1, .2);
+              background-color: rgba(colors.$color-blue-1, .2);
             }
           }
 
           &.selected {
-            background-color: rgba($color-blue-1, .3);
+            background-color: rgba(colors.$color-blue-1, .3);
           }
 
           &.group-head {
@@ -137,13 +138,13 @@
 
   &.open, &:hover:not(&.disabled):not(&.error) {
     .grouped-select-value-container {
-      border-color: $color-blue-1;
+      border-color: colors.$color-blue-1;
     }
   }
 
   &.open {
     .grouped-select-label {
-      color: $color-blue-1;
+      color: colors.$color-blue-1;
     }
 
     .grouped-select-value-container .chev-icon {

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

@@ -2,14 +2,15 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvrd-select-container {
   transition: margin-bottom .2s ease-in-out;
   position: relative;
 
   .dvrd-select-label {
-    color: $color-blue-text;
+    color: colors.$color-blue-text;
     font-size: .9rem;
     margin-bottom: .25rem;
     display: block;
@@ -29,7 +30,7 @@
     background-color: white;
 
     .dvrd-select-value {
-      color: $color-blue-text;
+      color: colors.$color-blue-text;
     }
 
     .dvrd-select-search {
@@ -55,7 +56,7 @@
     background-color: white;
     position: absolute;
     left: 0;
-    z-index: $z-index-high;
+    z-index: commons.$z-index-high;
     visibility: hidden;
     opacity: 0;
     transition: visibility .1s ease-in-out, opacity .1s ease-in-out, box-shadow .1s ease-in-out;
@@ -67,7 +68,7 @@
 
     .dvrd-select-item {
       padding: .75rem;
-      color: $color-blue-text;
+      color: colors.$color-blue-text;
       background-color: white;
       transition: background-color .2s ease-in-out;
       cursor: pointer;
@@ -89,7 +90,7 @@
     }
 
     &.open {
-      @include backgroundShadow;
+      @include commons.backgroundShadow;
       visibility: visible;
       opacity: 1;
     }
@@ -143,10 +144,10 @@
         }
 
         &.selected {
-          background-color: rgba($color-green-whatsapp, .2);
+          background-color: rgba(colors.$color-green-whatsapp, .2);
 
           .check-icon {
-            color: $color-green-whatsapp;
+            color: colors.$color-green-whatsapp;
           }
         }
       }

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

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .selectContainer {
   position: relative;
@@ -33,12 +34,12 @@
       cursor: pointer;
 
       &:hover {
-        color: $color-red-1;
+        color: colors.$color-red-1;
       }
     }
 
     .valueLabelContainer {
-      @include borderRadius(.2rem);
+      border-radius: .2rem;
       border-width: 2px;
       border-style: solid;
       padding: .7rem .6rem;
@@ -51,21 +52,21 @@
       min-height: 2.8rem;
 
       .selectLabel {
-        @include centerY;
+        @include commons.centerY;
         position: absolute;
         left: .2rem;
         font-size: .8rem;
         transition: top .2s ease-in-out, transform .2s ease-in-out, font-size .2s ease-in-out, left .2s ease-in-out;
         background-color: white;
         padding: .2rem;
-        color: $color-gray-4;
+        color: colors.$color-gray-4;
 
         &.up {
-          @include borderRadius(.2rem);
+          border-radius: .2rem;
           transform: none;
           top: -.8rem;
           font-size: .7rem;
-          color: $color-gray-3;
+          color: colors.$color-gray-3;
         }
       }
 
@@ -76,11 +77,11 @@
 
         .valueLabel {
           font-size: 1rem;
-          color: $color-gray-5;
+          color: colors.$color-gray-5;
           user-select: none;
 
           &.disabled, &.readOnly {
-            color: $color-gray-4;
+            color: colors.$color-gray-4;
           }
         }
       }
@@ -101,7 +102,7 @@
 
       .searchIcon {
         font-size: 1.2rem;
-        color: $color-gray-5;
+        color: colors.$color-gray-5;
         padding: 0;
       }
     }
@@ -114,24 +115,15 @@
         transform: rotate(180deg);
       }
     }
-
-    //.error {
-    //  position: absolute;
-    //  bottom: -1.4rem;
-    //  left: .4rem;
-    //  color: red;
-    //  font-size: .9rem;
-    //}
   }
 
   .itemsContainer {
-    @include borderRadius(.5rem);
     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
     background-color: white;
     box-sizing: border-box;
-    border-top-left-radius: 0;
-    border: 1px solid $color-gray-7;
-    z-index: $z-index-high;
+    border-radius: 0 .5rem .5rem .5rem;
+    border: 1px solid colors.$color-gray-7;
+    z-index: commons.$z-index-high;
     visibility: hidden;
     opacity: 0;
     transition: visibility .15s ease-in-out, opacity .15s ease-in-out;
@@ -149,7 +141,7 @@
       &.readOnly {
         cursor: not-allowed;
         .itemLabel {
-          color: $color-gray-3;
+          color: colors.$color-gray-3;
         }
       }
 
@@ -159,7 +151,7 @@
         align-items: center;
 
         .selectedCheck {
-          color: $color-green-whatsapp;
+          color: colors.$color-green-whatsapp;
           font-size: 1rem;
         }
       }

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -2,15 +2,14 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/sidebarMenu.scss';
+import {IconName} from '@fortawesome/fontawesome-svg-core';
+import classNames from 'classnames';
 
 import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
 import {NavLink, useLocation} from 'react-router';
-import {SidebarItem, SideMenuMode} from '../util/interfaces';
-import classNames from 'classnames';
 import {AwesomeIcon, generateComponentId, isAbsoluteLink} from '../../../index';
 import {ControlContext} from '../util/controlContext';
-import defer from 'lodash.defer';
-import {IconName} from '@fortawesome/fontawesome-svg-core';
+import {SidebarItem, SideMenuMode} from '../util/interfaces';
 
 interface Props {
     onClickItem: (item: SidebarItem) => MouseEventHandler;
@@ -58,13 +57,22 @@ function itemHasActiveId(item: SidebarItem, activeId: string): boolean {
 }
 
 export default function SidebarMenu(props: Props) {
-    const context = useContext(ControlContext),
-        location = useLocation(),
-        {className, contrastColor, baseColor, items, onClickItem} = props,
-        mode = props.mode ?? SideMenuMode.COMPACT,
-        [activeItem, setActiveItem] = useState(props.activeItem ?? ''),
-        sideBar = useRef<HTMLDivElement>(null),
-        componentId = useRef(generateComponentId(props.id));
+    const context = useContext(ControlContext);
+    const location = useLocation();
+    const {className, contrastColor, baseColor, items, onClickItem} = props;
+    const mode = props.mode ?? SideMenuMode.COMPACT;
+    const [activeItem, setActiveItem] = useState(props.activeItem ?? '');
+    const sideBar = useRef<HTMLDivElement>(null);
+    const componentId = useRef(generateComponentId(props.id));
+
+    function onClickNavLink(item: SidebarItem) {
+        return function (evt: React.MouseEvent) {
+            if (!!onClickItem) {
+                onClickItem(item)(evt);
+                evt.preventDefault();
+            }
+        };
+    }
 
     function _onClickItem(item: SidebarItem) {
         return function (evt: React.MouseEvent) {
@@ -104,7 +112,8 @@ export default function SidebarMenu(props: Props) {
             );
 
             if (asNavLink) return (
-                <NavLink key={id} to={item.route as string} className={cls} id={id}>
+                <NavLink key={id} to={item.route as string} className={cls} id={id}
+                         onClick={onClickNavLink(item)}>
                     {({isActive}) => content(isActive)}
                 </NavLink>
             );
@@ -160,7 +169,7 @@ export default function SidebarMenu(props: Props) {
 
     useEffect(() => {
         setColors();
-        defer(_setActiveItem);
+        window.setTimeout(_setActiveItem);
     }, []);
 
     useEffect(() => {

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

@@ -2,10 +2,11 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvr-side-bar-menu {
-  @include backgroundShadow;
+  @include commons.backgroundShadow;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -14,10 +15,10 @@
   background-color: var(--contrast-color);
   height: calc(100vh - 4rem);
   width: 4rem;
-  z-index: $z-index-popup-4;
+  z-index: commons.$z-index-popup-4;
 
   .side-bar-item {
-    border-bottom: 1px solid $color-gray-7;
+    border-bottom: 1px solid colors.$color-gray-7;
     height: 4rem;
     width: 4rem;
     display: flex;
@@ -31,7 +32,7 @@
     text-decoration: none;
 
     .item-icon {
-      color: $color-gray-4;
+      color: colors.$color-gray-4;
       font-size: 1.5rem;
       transition: color .2s ease-in-out;
 
@@ -41,7 +42,7 @@
     }
 
     .item-label {
-      @include centerY;
+      @include commons.centerY;
       border-radius: .5rem;
       position: absolute;
       padding: 4px 6px;

package/src/js/slider/style/DVRSlider.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
 
 .dvr-slider-container {
   .dvr-slider-label {
@@ -20,7 +20,7 @@
     cursor: pointer;
 
     &::-webkit-slider-thumb {
-      @include backgroundShadow;
+      @include commons.backgroundShadow;
       -webkit-appearance: none;
       appearance: none;
       width: .75rem;

package/src/js/snackbar/snackbarController.tsx

@@ -5,8 +5,6 @@
 import React, {useEffect, useRef, useState} from 'react';
 import Snackbar from "./snackbar";
 import {Snack} from "../util/interfaces";
-import delay from 'lodash.delay';
-import defer from 'lodash.defer';
 import {useEvent} from "../util/componentUtil";
 
 interface Props {
@@ -50,16 +48,16 @@ export default function SnackbarController(props: Props) {
         if (!snack) return;
         const _activeTime = snack.config?.duration ?? activeTime ?? 3000;
         setSnack(snack);
-        defer(() => setActive(true));
+        window.setTimeout(() => setActive(true));
         timeoutID.current = window.setTimeout(deactivate, _activeTime);
     }
 
     function deactivate() {
         setActive(false);
         // Clear snack after 200ms (css transition)
-        delay(() => {
+        window.setTimeout(() => {
             setSnack(null);
-            defer(() => {
+            window.setTimeout(() => {
                 if (snackQueue.current.length)
                     // Open next
                     timeoutID.current = window.setTimeout(activate, 500);