@dvrd/dvr-controls 1.1.13 → 1.1.15

package/src/js/header/style/header.scss

@@ -2,7 +2,9 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
+@use '../../../style/common-variables' as commons;
+@use 'sass:color';
 
 .dvr-header {
   width: fit-content;
@@ -28,7 +30,7 @@
   $height: 4rem;
 
   .dvr-header-container {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
     padding: .5rem 2rem;
     display: flex;
     align-items: center;
@@ -60,7 +62,7 @@
         position: relative;
 
         .children-container {
-          @include centerX;
+          @include commons.centerX;
           visibility: hidden;
           opacity: 0;
           transition: visibility .1s ease-in-out, opacity .1s ease-in-out, box-shadow .1s ease-in-out;
@@ -70,15 +72,15 @@
 
           .child-item {
             padding: .5rem;
-            color: $color-gray-header;
-            border-bottom: 1px solid $color-gray-4;
+            color: colors.$color-gray-header;
+            border-bottom: 1px solid colors.$color-gray-4;
             transition: background-color .2s ease-in-out;
             display: flex;
             justify-content: center;
 
             label {
               font-size: .9rem;
-              color: $color-gray-header;
+              color: colors.$color-gray-header;
               font-weight: normal;
             }
 
@@ -87,7 +89,7 @@
             }
 
             &:hover {
-              background-color: $color-gray-6;
+              background-color: colors.$color-gray-6;
             }
           }
         }
@@ -96,7 +98,7 @@
           border-color: currentColor;
 
           .children-container {
-            @include backgroundShadow;
+            @include commons.backgroundShadow;
             visibility: visible;
             opacity: 1;
           }
@@ -122,13 +124,13 @@
       background-color: transparent;
 
       .items-container .header-item-container {
-        color: $color-gray-header;
+        color: colors.$color-gray-header;
       }
     }
   }
 
   .dvr-menu {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
     position: fixed;
     height: 100%;
     top: $height;
@@ -137,7 +139,7 @@
     box-shadow: 0 1px 5px 0 rgba(black, 0.2), 0 2px 2px 0 rgba(black, 0.14), 0 3px 1px -2px rgba(black, 0.12);
     transition: transform .2s ease-in-out;
     padding: 1rem;
-    background-color: $color-gray-header;
+    background-color: colors.$color-gray-header;
     max-width: 100vw;
     box-sizing: border-box;
     z-index: 9999;
@@ -147,7 +149,7 @@
     }
 
     .menu-item-container {
-      color: $color-gray-header-text;
+      color: colors.$color-gray-header-text;
       padding: .75rem 1rem;
       cursor: pointer;
       transition: background-color .2s ease-in-out;
@@ -188,7 +190,7 @@
       }
 
       &:hover {
-        background-color: darken($color-gray-header, 10%);
+        background-color: color.scale(colors.$color-gray-header, $lightness: -10%);
       }
     }
 
@@ -201,6 +203,6 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: $z-index-menu + 1;
+    z-index: commons.$z-index-menu + 1;
   }
 }

package/src/js/image/style/imageUpload.scss

@@ -2,8 +2,6 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
-
 .dvr-upload-container {
   border: 1px dashed #2A435F;
   background-color: rgba(0, 0, 0, 0.05);

package/src/js/info/style/info.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
 
 .dvr-info-container {
   position: relative;
@@ -16,12 +16,12 @@
   }
 
   .dvr-message-container {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
     padding: .2rem;
     border-radius: .2rem;
     background-color: white;
     position: absolute;
-    z-index: $z-index-high;
+    z-index: commons.$z-index-high;
     top: 0;
     right: 0;
     width: 15rem;

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/input/date/datePicker/style/datePicker.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/colors';
 
 .datepicker-container {
   height: 21.5rem;
@@ -28,7 +28,7 @@
   }
 
   .dvr-month-container {
-    color: $color-gray-header;
+    color: colors.$color-gray-header;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -73,7 +73,7 @@
       .weekday-label {
         width: 100%;
         text-align: center;
-        border-bottom: 1px solid $color-gray-7;
+        border-bottom: 1px solid colors.$color-gray-7;
       }
 
       .day-label {
@@ -87,12 +87,12 @@
 
       &.disabled .day-label{
         cursor: not-allowed;
-        color: $color-gray-4;
+        color: colors.$color-gray-4;
       }
 
       &.other-month {
         .day-label {
-          color: $color-gray-4;
+          color: colors.$color-gray-4;
           cursor: default;
           transition: none;
         }

package/src/js/input/date/style/dateField.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-datepicker-container {
-  @include backgroundShadow;
+  @include commons.backgroundShadow;
   background-color: white;
   min-width: 16rem;
   max-width: 100vw;
@@ -19,10 +20,10 @@
     justify-content: center;
     align-items: center;
     padding: .5rem 0;
-    border-top: 1px solid $color-gray-7;
+    border-top: 1px solid colors.$color-gray-7;
 
     .selector {
-      color: $color-gray-4;
+      color: colors.$color-gray-4;
       cursor: pointer;
       transition: color .2s ease-in-out;
 

package/src/js/input/date/timePicker/style/timePicker.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/common-variables' as commons;
+@use '../../../../../style/colors';
 
 .timepicker-container {
   height: 21.5rem;
@@ -51,17 +52,17 @@
         position: relative;
 
         .selected-background {
-          @include centerY;
+          @include commons.centerY;
           position: absolute;
           width: 100%;
           height: calc(100% / 3);
           z-index: 0;
-          background-color: $color-gray-4;
+          background-color: colors.$color-gray-4;
         }
 
         .time-select-container {
           position: relative;
-          border: 1px solid $color-gray-7;
+          border: 1px solid colors.$color-gray-7;
           border-radius: .25rem;
           height: 6rem;
           overflow-y: auto;

package/src/js/input/password/style/passwordInput.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .dvr-password-field-container {
   position: relative;
@@ -29,11 +29,11 @@
   }
 
   .passwordOrnament {
-    color: $color-gray-3;
+    color: colors.$color-gray-3;
     transition: color .2s ease;
 
     &:hover {
-      color: $color-gray-5;
+      color: colors.$color-gray-5;
     }
   }
 }

package/src/js/input/password/style/passwordRules.scss

@@ -2,16 +2,16 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .password-rules-container {
-  @include borderRadius(.2rem);
+  border-radius: .2rem;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: white;
   padding: .3rem;
-  border: 1px solid $color-gray-5;
+  border: 1px solid colors.$color-gray-5;
   z-index: 1;
   display: flex;
   flex-direction: column;
@@ -31,7 +31,7 @@
     transition: color .2s ease;
 
     &.passed {
-      color: $color-green-whatsapp;
+      color: colors.$color-green-whatsapp;
     }
 
     &.failed {

package/src/js/input/simple/style/simpleInput.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .dvr-simple-input-container {
   display: inline-flex;
@@ -43,7 +43,7 @@
   }
 
   .dvr-simple-input-ornament {
-    color: $color-gray-header;
+    color: colors.$color-gray-header;
 
     .dvr-simple-input-clear {
       cursor: pointer;

package/src/js/input/style/input.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/common-variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .inputContainer {
   position: relative;
@@ -45,13 +46,13 @@
       font-size: 1rem;
 
       &:disabled {
-        color: $color-gray-4 !important;
+        color: colors.$color-gray-4 !important;
       }
     }
 
     .clearButton {
       font-size: .8rem;
-      color: $color-gray-5;
+      color: colors.$color-gray-5;
       transition: color .2s ease-in-out;
       cursor: pointer;
       margin-right: .3rem;
@@ -64,7 +65,7 @@
   }
 
   &.outlined {
-    @include borderRadius(.2rem);
+    border-radius: .2rem;
     border-width: 2px;
     border-style: solid;
     padding: .2rem;
@@ -108,7 +109,7 @@
 
       &:not(.filled) {
         .label {
-          @include centerY;
+          @include commons.centerY;
 
           &.multiLine {
             top: calc(.2rem + 2px);

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/link/link.tsx

@@ -5,10 +5,11 @@
 import './style/link.scss';
 import classNames from 'classnames';
 import React, {MouseEventHandler} from 'react';
-import {navigate} from '../util/componentUtil';
+import { NavigateFunction, useNavigate } from 'react-router';
 
 interface Props {
     onClick?: MouseEventHandler;
+    navigate?: NavigateFunction;
     route?: string;
     className?: string;
     disabled?: boolean;
@@ -18,6 +19,7 @@ interface Props {
 
 export default function Link(props: React.PropsWithChildren<Props>) {
     const {className, disabled, route, children, underline, target, onClick} = props;
+    const navigate = props.navigate ?? useNavigate();
 
     function _onClick(evt: React.MouseEvent) {
         evt.preventDefault();

package/src/js/link/style/link.scss

@@ -2,10 +2,10 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
 
 .app-link {
-  color: $color-blue-1;
+  color: colors.$color-blue-1;
   text-decoration: none;
   transition: color .2s ease-in-out, border-bottom-color .2s ease-in-out;
   cursor: pointer;
@@ -15,7 +15,7 @@
   }
 
   &:hover {
-    color: $color-blue-1-darken;
+    color: colors.$color-blue-1-darken;
 
     &.underline {
       border-bottom: 1px solid currentColor;
@@ -24,7 +24,7 @@
 
   &.disabled {
     cursor: default;
-    color: $color-gray-4 !important;
+    color: colors.$color-gray-4 !important;
     border-bottom: 1px solid transparent !important;
   }
 }

package/src/js/loader/style/loader.scss

@@ -2,14 +2,15 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .loader-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  z-index: $z-index-high;
+  z-index: commons.$z-index-high;
   background-color: rgba(white, .6);
   top: 0;
   left: 0;
@@ -21,9 +22,9 @@
   }
 
   .loader-label {
-    @include borderRadius(.2rem);
+    border-radius: .2rem;
     font-size: .9rem;
-    color: $color-gray-6;
+    color: colors.$color-gray-6;
     text-align: center;
     margin-top: .5rem;
     display: block;
@@ -32,7 +33,7 @@
   }
 
   .loader {
-    @include borderRadius(50%);
+    border-radius: 50%;
     border: 1rem solid;
     animation: rotate 1s ease-in-out infinite;
     min-width: 2rem;

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