@dvrd/dvr-controls 1.1.12 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -26,39 +26,29 @@
   },
   "dependencies": {
     "@dvrd/idate": "^1.8.8",
-    "@fortawesome/fontawesome-svg-core": "6.5.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.2",
-    "@fortawesome/free-regular-svg-icons": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.2",
-    "@fortawesome/react-fontawesome": "0.2.0",
-    "@types/dompurify": "2.4.0",
-    "@types/js-cookie": "3.0.3",
-    "@types/lodash.defer": "^4.1.7",
-    "@types/lodash.delay": "^4.1.7",
-    "@types/lodash.isequal": "^4.5.6",
-    "@types/lodash.merge": "^4.6.7",
-    "@types/lodash.mergewith": "^4.6.7",
+    "@fortawesome/fontawesome-svg-core": "*",
+    "@fortawesome/free-brands-svg-icons": "*",
+    "@fortawesome/free-regular-svg-icons": "*",
+    "@fortawesome/free-solid-svg-icons": "*",
+    "@fortawesome/react-fontawesome": "*",
+    "@types/dompurify": "*",
+    "@types/js-cookie": "*",
     "@types/node": "18.14.0",
     "@types/react": "*",
     "@types/react-color": "3.0.13",
     "@types/react-dom": "*",
     "@types/react-router": "*",
-    "@types/uuid": "9.0.0",
-    "classnames": "2.5.1",
-    "dompurify": "3.2.4",
-    "js-cookie": "3.0.1",
-    "lodash.defer": "^4.1.0",
-    "lodash.delay": "^4.1.1",
-    "lodash.isequal": "^4.5.0",
-    "lodash.merge": "^4.6.2",
-    "lodash.mergewith": "^4.6.2",
+    "@types/uuid": "*",
+    "classnames": "*",
+    "dompurify": "*",
+    "js-cookie": "*",
     "react": "*",
     "react-color": "2.19.3",
     "react-dom": "*",
     "react-rnd": "10.4.1",
     "react-router": "*",
     "swiper": "^11.1.4",
-    "typescript": "5.6.3",
-    "uuid": "9.0.0"
+    "typescript": "*",
+    "uuid": "*"
   }
 }

package/src/js/button/style/button.scss

@@ -29,7 +29,6 @@
     font-size: .9rem;
     font-weight: 500;
     text-transform: uppercase;
-    font-family: 'Roboto', sans-serif;
 
     &.singleChild {
       justify-content: center;

package/src/js/button/style/outlinedButton.scss

@@ -25,7 +25,6 @@
     font-size: .9rem;
     font-weight: 500;
     text-transform: uppercase;
-    font-family: 'Roboto', sans-serif;
     transition: color .2s ease-in-out;
 
     &.singleChild {

package/src/js/carousel/DVRCarousel.tsx

@@ -4,11 +4,10 @@
 import './style/DVRCarousel.scss';
 
 import React, {MouseEventHandler} from 'react';
-import {PureComponent, ReactElement} from "react";
-import AwesomeIcon from "../icon/awesomeIcon";
-import classNames from "classnames";
-import {voidFunction} from "../util/controlUtil";
-import isEqual from 'lodash.isequal';
+import {PureComponent, ReactElement} from 'react';
+import AwesomeIcon from '../icon/awesomeIcon';
+import classNames from 'classnames';
+import {voidFunction} from '../util/controlUtil';
 
 interface Props {
     onClickNext: MouseEventHandler;
@@ -29,8 +28,8 @@ interface State {
 
 export default class DVRCarousel extends PureComponent<Props, State> {
     state: State = {
-        initialRendered: false,
-    }
+        initialRendered: false
+    };
     carousel: HTMLDivElement;
 
     getMaxWidth = (): number => {
@@ -49,14 +48,14 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
     getVisibleIndexes = (): { firstIndex: number, lastIndex: number } => {
         const {currentIndex, visibleItems, infinite, children} = this.props,
-            itemsBefore = Math.floor((visibleItems - 1) / 2), itemsAfter = Math.ceil((visibleItems - 1) / 2)
+            itemsBefore = Math.floor((visibleItems - 1) / 2), itemsAfter = Math.ceil((visibleItems - 1) / 2);
         let firstIndex = currentIndex - itemsBefore, lastIndex = currentIndex + itemsAfter;
         if (firstIndex < 0) {
             lastIndex = visibleItems - 1;
             firstIndex = 0;
         }
         if (lastIndex > children.length - 1) {
-            if (infinite) lastIndex -= (children.length - 1)
+            if (infinite) lastIndex -= (children.length - 1);
             else {
                 lastIndex = children.length - -1;
                 firstIndex = Math.max(0, lastIndex - visibleItems);
@@ -67,7 +66,7 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
     getItemContainer = (index: number): HTMLDivElement | null => {
         return document.querySelector(`div[data-name=dvr-carousel-${index}]`);
-    }
+    };
 
     getVisibleWidth = (): number => {
         const {firstIndex, lastIndex} = this.getVisibleIndexes();
@@ -99,7 +98,7 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
         }
         if (!this.state.initialRendered) this.setState({initialRendered: true});
-    }
+    };
 
     renderPrevControl = () => {
         const {showControls, onClickPrev, currentIndex, infinite} = this.props;
@@ -120,7 +119,9 @@ export default class DVRCarousel extends PureComponent<Props, State> {
     };
 
     renderItems = () => {
-        const {lazy, children} = this.props, {initialRendered} = this.state, {firstIndex, lastIndex} = this.getVisibleIndexes();
+        const {lazy, children} = this.props, {initialRendered} = this.state, {
+            firstIndex, lastIndex
+        } = this.getVisibleIndexes();
         return (
             <div className='carousel-items-container' ref={(ref: HTMLDivElement) => {
                 this.carousel = ref;
@@ -133,11 +134,11 @@ export default class DVRCarousel extends PureComponent<Props, State> {
                                  data-name={`dvr-carousel-${index}`}>
                                 {(!hidden || !lazy) && child}
                             </div>
-                        )
+                        );
                     })}
                 </div>
             </div>
-        )
+        );
     };
 
     componentDidMount = () => {
@@ -146,7 +147,8 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
     componentDidUpdate = (prevProps: Props, prevState: State) => {
         const {currentIndex, visibleItems, children} = this.props, {initialRendered} = this.state;
-        if (currentIndex !== prevProps.currentIndex || visibleItems !== prevProps.visibleItems || !isEqual(children, prevProps.children) || initialRendered !== prevState.initialRendered)
+        if (currentIndex !== prevProps.currentIndex || visibleItems !== prevProps.visibleItems || JSON.stringify(
+            children) !== JSON.stringify(prevProps.children) || initialRendered !== prevState.initialRendered)
             window.setTimeout(this.setStyle, 0);
     };
 
@@ -157,6 +159,6 @@ export default class DVRCarousel extends PureComponent<Props, State> {
                 {this.renderItems()}
                 {this.renderNextControl()}
             </div>
-        )
+        );
     };
 }

package/src/js/date/dvrdDatePicker.tsx

@@ -22,7 +22,6 @@ import DvrdButton from "../button/dvrdButton";
 import {generateComponentId} from "../util/componentUtil";
 import IDate from '@dvrd/idate';
 import {pad} from "../util/controlUtil";
-import defer from 'lodash.defer';
 import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react';
 import {FreeMode, Mousewheel} from 'swiper/modules';
 import 'swiper/css';
@@ -356,7 +355,7 @@ function DatePicker(props: DatePickerProps) {
     useEffect(() => {
         if (open) {
             document.addEventListener('keydown', keyListener);
-            defer(addMountClass);
+            window.setTimeout(addMountClass);
             window.setTimeout(removeMountClass, 1000);
         } else {
             document.removeEventListener('keydown', keyListener);

package/src/js/input/date/dateField.tsx

@@ -5,21 +5,20 @@
 import './style/dateField.scss';
 
 import React, {ChangeEvent, CSSProperties, KeyboardEventHandler, PureComponent} from 'react';
-import {ChangeFunction, ControlVariant} from "../../util/interfaces";
-import {DateTimeParts, DateType} from "./dateFieldController";
-import classNames from "classnames";
-import {ControlContext} from "../../util/controlContext";
-import {BACKSPACE_CODE} from "../../util/constants";
-import DatePicker from "./datePicker/datePicker";
-import TimePicker from "./timePicker/timePicker";
-import DateInput from "./input/dateInput";
-import {DVRInputControllerProps} from "../v2/inputController_v2";
-import mergeWith from 'lodash.mergewith';
+import {ChangeFunction, ControlVariant} from '../../util/interfaces';
+import {DateTimeParts, DateType} from './dateFieldController';
+import classNames from 'classnames';
+import {ControlContext} from '../../util/controlContext';
+import {BACKSPACE_CODE} from '../../util/constants';
+import DatePicker from './datePicker/datePicker';
+import TimePicker from './timePicker/timePicker';
+import DateInput from './input/dateInput';
+import {DVRInputControllerProps} from '../v2/inputController_v2';
 import {colorIsWhite, convertColor, editColor} from '../../util/colorUtil';
 import {pad} from '../../util/controlUtil';
-import AwesomeIcon from "../../icon/awesomeIcon";
+import AwesomeIcon from '../../icon/awesomeIcon';
 import WithBackground from '../../popup/withBackground';
-import ButtonController from "../../button/buttonController";
+import ButtonController from '../../button/buttonController';
 import IDate, {IDateValue} from '@dvrd/idate';
 
 export interface DateNumParts {
@@ -64,8 +63,8 @@ export default class DateField extends PureComponent<Props, State> {
         this.state = {
             pickerOpen: false,
             pickerState: this.getDefaultPickerState(),
-            pickerValue: this.getInitPickerValue(),
-        }
+            pickerValue: this.getInitPickerValue()
+        };
     }
 
     onMouseEnterSelector = (forState: PickerState) => (evt: MouseEvent) => {
@@ -102,7 +101,7 @@ export default class DateField extends PureComponent<Props, State> {
                 month: currentMoment.month(),
                 year: currentMoment.year(),
                 hour: currentMoment.hours(),
-                minute: currentMoment.minutes(),
+                minute: currentMoment.minutes()
             };
         } else {
             nextValue = Object.assign({}, this.state.pickerValue, {[key]: value});
@@ -208,7 +207,7 @@ export default class DateField extends PureComponent<Props, State> {
                 day: today.day(),
                 minute: today.minutes(),
                 hour: today.hours(),
-                year: today.year(),
+                year: today.year()
             }
         }, () => {
             if (this.props.dateType === DateType.DATE) {
@@ -242,20 +241,28 @@ export default class DateField extends PureComponent<Props, State> {
         return PickerState.DATE;
     };
 
-    getInitPickerValue = () => {
-        const dateParts = Object.assign({}, this.props.dateParts);
+    getInitPickerValue = (): DateNumParts => {
+        const dateParts = this.props.dateParts;
         const now = IDate.now();
         if (!isNaN(Number(dateParts.month))) dateParts.month = (Number(dateParts.month) - 1).toString();
-        return mergeWith(dateParts, {
-            day: now.day(),
-            month: now.month(),
-            year: now.year(),
-            hour: now.hours(),
-            minute: now.minutes(),
-        }, (source1: string, source2: number) => {
-            if (!source1 || source1.length === 0 || ['dd', 'mm', 'yyyy', 'hh'].includes(source1)) return source2;
-            return Number(source1);
-        });
+        const merged: DateNumParts = {
+            day: now.day(), month: now.month(), year: now.year(), hour: now.hours(), minute: now.minutes()
+        };
+        for (const [key, value] of Object.entries(dateParts)) {
+            if(!value || !value.length || ['dd', 'mm', 'yyyy', 'hh'].includes(value)) continue;
+            merged[key as keyof DateNumParts] = Number(value);
+        }
+        return merged;
+        // return mergeWith(dateParts, {
+        //     day: now.day(),
+        //     month: now.month(),
+        //     year: now.year(),
+        //     hour: now.hours(),
+        //     minute: now.minutes()
+        // }, (source1: string, source2: number) => {
+        //     if (!source1 || source1.length === 0 || ['dd', 'mm', 'yyyy', 'hh'].includes(source1)) return source2;
+        //     return Number(source1);
+        // });
     };
 
     scrollToCurrent = () => {
@@ -330,7 +337,7 @@ export default class DateField extends PureComponent<Props, State> {
                                           primary={false}/>}
                 </div>
             </div>
-        )
+        );
     };
 
     renderStateSelector = () => {
@@ -345,7 +352,7 @@ export default class DateField extends PureComponent<Props, State> {
                              onMouseEnter={this.onMouseEnterSelector(PickerState.TIME)}
                              onMouseLeave={this.onMouseLeaveSelector(PickerState.TIME)}/>
             </div>
-        )
+        );
     };
 
     componentDidUpdate = (prevProps: Props, prevState: State) => {
@@ -364,6 +371,6 @@ export default class DateField extends PureComponent<Props, State> {
                            fullWidth={fullWidth} disabled={disabled}/>
                 <WithBackground onClose={this.onClosePicker} active={pickerOpen}>{this.renderPicker()}</WithBackground>
             </>
-        )
+        );
     };
 }

package/src/js/input/date/dateFieldController.tsx

@@ -4,7 +4,7 @@
 
 import React, {PureComponent} from 'react';
 import {ControlVariant} from "../../util/interfaces";
-import DateField from "./dateField";
+import DateField, {DateNumParts} from './dateField';
 import {DefaultInputProps, DVRInputControllerProps} from "../v2/inputController_v2";
 import IDate, {IDateValue} from '@dvrd/idate';
 
@@ -28,7 +28,7 @@ interface State {
     value: string;
 }
 
-export interface DateTimeParts {
+export interface DateTimeParts extends Record<keyof DateNumParts, string> {
     day: string;
     month: string;
     year: string;

package/src/js/label/label.tsx

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import {ControlContext} from "../util/controlContext";
 import {convertColor} from "../util/colorUtil";
 import {calculateTextWidth, getComputedProperty, remToPx} from "../util/controlUtil";
-import defer from 'lodash.defer';
 
 export enum LabelType {
     LABEL, SPAN, PAR,
@@ -154,7 +153,7 @@ export default function Label(props: Props) {
     }
 
     useEffect(() => {
-        defer(renderText);
+        window.setTimeout(renderText);
     }, []);
 
     switch (labelType) {

package/src/js/navigation/mobileNavigation.tsx

@@ -17,7 +17,6 @@ import React, {
 import {useMatch, useNavigate} from 'react-router';
 import {NavigationItem} from "../util/interfaces";
 import {AwesomeIcon, hasHover} from "../../../index";
-import defer from 'lodash.defer';
 
 interface Props {
     onClickItem?: (item: NavigationItem) => MouseEventHandler;
@@ -116,7 +115,7 @@ function MobileNavigation(props: Props, ref: ForwardedRef<MobileNavigationRef>)
     }
 
     useEffect(() => {
-        defer(() => {
+        window.setTimeout(() => {
             if (open) document.addEventListener('click', outsideClickListener);
             else document.removeEventListener('click', outsideClickListener);
         });

package/src/js/pdf/image/pdfImage.tsx

@@ -9,7 +9,6 @@ import {
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
 import {nullify} from "../../util/miscUtil";
-import merge from 'lodash.merge';
 import {AwesomeIcon, directTimeout, PAGE_HEIGHT, PAGE_WIDTH} from "../../../../index";
 
 interface Props {
@@ -42,12 +41,13 @@ export default class PdfImage extends PdfElement<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            settings: merge({}, {
-                img: props.values?.default_image || '',
+            settings: {
                 persistent: PDFElementPersist.NOT_PERSISTENT,
                 alignment: undefined,
                 display: PDFDisplay.ALL_PAGES,
-            }, props.defaultSettings),
+                ...props.defaultSettings,
+                img: (props.defaultSettings?.img ?? (props.values?.default_image || '')) as string,
+            },
             dragging: false,
         };
     };

package/src/js/pdf/invoiceTable/pdfInvoiceTable.tsx

@@ -9,7 +9,6 @@ import {
     PDFElementParams, PDFElementPersist, PDFElementType, PdfFont, PDFInvoiceTableParams
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
-import merge from 'lodash.merge';
 import {parsePrice, pxToPt} from "../../util/pdfUtil";
 import {WithEvents} from "../../../../index";
 
@@ -37,7 +36,7 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            settings: merge({}, {
+            settings: {
                 widths: [40, 20, 20, 20],
                 fontSize: 12,
                 font: props.mainFont,
@@ -45,7 +44,8 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
                 headerColor: '#000',
                 alignment: ElementPosition.CENTER,
                 persistent: PDFElementPersist.NOT_PERSISTENT,
-            }, props.defaultSettings),
+                ...props.defaultSettings
+            },
             dragging: false,
         };
     }

package/src/js/pdf/text/pdfText.tsx

@@ -17,7 +17,6 @@ import {
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
 import {debug, sanitizeHtml} from "../../util/miscUtil";
-import merge from 'lodash.merge';
 import {PAGE_WIDTH, pxToPt, setPdfVariables, waitForFonts} from "../../util/pdfUtil";
 import {directTimeout} from "../../util/componentUtil";
 import {dispatchCustomEvent, showDialog} from "../../util/eventUtil";
@@ -57,7 +56,7 @@ export default class PdfText extends PdfElement<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            settings: merge({}, {
+            settings: {
                 text: 'Klik hier om deze tekst aan te passen.',
                 bold: false,
                 underline: false,
@@ -68,7 +67,8 @@ export default class PdfText extends PdfElement<Props, State> {
                 color: '#000',
                 persistent: PDFElementPersist.NOT_PERSISTENT,
                 display: PDFDisplay.ALL_PAGES,
-            }, props.defaultSettings),
+                    ...props.defaultSettings
+            },
             dragging: false,
             focused: false,
         }

package/src/js/pdf/v2/pdfElement/pdfDraggableElement.tsx

@@ -16,8 +16,6 @@ import React, {
 import {ElementPosition, PDFElementPersist, RNDDimensions} from "../../../util/interfaces";
 import {generateComponentId} from "../../../util/componentUtil";
 import {DraggableData, HandleStyles, Position, ResizableDelta, ResizeEnable, Rnd, RndDragCallback} from 'react-rnd';
-import defer from 'lodash.defer';
-import delay from 'lodash.delay';
 import {PDFDraggableType, ResizeDirection} from "../types/pdfTemplateTypes";
 import {PAGE_WIDTH} from "../../../util/pdfUtil";
 import classNames from 'classnames';
@@ -95,7 +93,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
     function setSize(width: number, height: number, notifyResized: boolean = true) {
         setDimensions({width, height});
         if (notifyResized)
-            defer(props.onResized);
+            window.setTimeout(props.onResized);
     }
 
     function setFocus() {
@@ -104,7 +102,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
 
     function setPosition(_position: Position, callback?: VoidFunction) {
         _setPosition(Object.assign({}, position, _position));
-        if (callback) defer(callback);
+        if (callback) window.setTimeout(callback);
     }
 
     function getPosition(): Position {
@@ -129,7 +127,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
     function onResizeStop(evt: any, direction: ResizeDirection, ref: HTMLElement, delta: ResizableDelta, position: Position) {
         setDimensions({width: ref.style.width, height: ref.style.height});
         _setPosition(position);
-        defer(props.onResized);
+        window.setTimeout(props.onResized);
     }
 
     function setInitialPosition() {
@@ -153,7 +151,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
     }));
 
     useEffect(() => {
-        delay(setInitialPosition, 20);
+        window.setTimeout(setInitialPosition, 20);
     }, [props.alignment]);
 
     const axis = props.alignment ? 'y' : 'both';

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,7 +8,6 @@ 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;
@@ -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/style/dvrdGroupedSelect.scss

@@ -40,7 +40,6 @@
         padding: .75rem;
         color: #2A435F;
         border-radius: inherit;
-        font-family: avenir-light, sans-serif;
       }
 
       .grouped-select-placeholder, .grouped-select-value {

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

@@ -30,7 +30,6 @@
 
     .dvrd-select-value {
       color: $color-blue-text;
-      font-family: avenir-light, sans-serif;
     }
 
     .dvrd-select-search {
@@ -40,7 +39,6 @@
       padding: .75rem;
       color: #2A435F;
       border-radius: inherit;
-      font-family: avenir-light, sans-serif;
     }
 
     .dvrd-select-arrow {
@@ -73,7 +71,6 @@
       background-color: white;
       transition: background-color .2s ease-in-out;
       cursor: pointer;
-      font-family: avenir-light, sans-serif;
       white-space: nowrap;
 
       &:hover {

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -9,7 +9,6 @@ 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';
 
 interface Props {
@@ -160,7 +159,7 @@ export default function SidebarMenu(props: Props) {
 
     useEffect(() => {
         setColors();
-        defer(_setActiveItem);
+        window.setTimeout(_setActiveItem);
     }, []);
 
     useEffect(() => {

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);

package/src/js/util/controlContext.tsx

@@ -4,7 +4,6 @@
 
 import React, {Context, PropsWithChildren, useEffect} from 'react';
 import {ControlVariant} from "./interfaces";
-import defer from 'lodash.defer';
 import {convertColor, hexToRgb} from "./colorUtil";
 
 // noinspection JSUnusedGlobalSymbols
@@ -33,7 +32,7 @@ export const ControlContext: Context<ThemeShape> = React.createContext<ThemeShap
 export default function ThemeContextProvider(props: PropsWithChildren<ProviderProps>) {
     const {theme, children} = props;
     useEffect(() => {
-        defer(() => {
+        window.setTimeout(() => {
             const root = document.documentElement;
             const baseRgb = hexToRgb(convertColor(theme.baseColor));
             const contrastRgb = hexToRgb(convertColor(theme.contrastColor));

package/src/js/util/interfaces.ts

@@ -193,7 +193,7 @@ export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedO
     linkedID?: string;
 }>
 export type PDFImageParams = {
-    img: File | string | null,
+    img: File | string | null;
     persistent: PDFElementPersist;
     alignment?: ElementPosition;
     display?: PDFDisplay