@dvrd/dvr-controls 1.0.82 → 1.0.84

package/index.ts

@@ -47,13 +47,13 @@ import Media from './src/js/media/media';
 import DvrdButton, {DvrdButtonProps} from './src/js/button/dvrdButton';
 import DvrdDatePicker, {DVRDDatePickerRef} from './src/js/date/dvrdDatePicker';
 import DvrdInputController from './src/js/textField/dvrdInputController';
-import DvrdNumberInput from './src/js/textField/dvrdNumberInput';
+import DVRDNumberInput from './src/js/textField/dvrdNumberInput';
 import DVRDPasswordInput from './src/js/textField/dvrdPasswordInput';
 import Link from './src/js/link/link';
 import DvrdOptionsList from './src/js/optionsList/dvrdOptionsList';
 import DvrdSelectController from './src/js/select/dvrdSelectController';
 import DVRDGroupedSelect, { GroupedSelectRef } from './src/js/select/dvrdGroupedSelect';
-import DvrdSwitch from './src/js/switch/dvrdSwitch';
+import DVRDSwitch from './src/js/switch/dvrdSwitch';
 import DvrdHeaderController from './src/js/header/v2/dvrdHeaderController';
 import FileUpload from './src/js/fileUpload/fileUpload';
 import DvrdRadioController from './src/js/radio/dvrdRadioController';
@@ -98,13 +98,13 @@ export {
     DvrdDatePicker,
     DVRDDatePickerRef,
     DvrdInputController as DvrdInput,
-    DvrdNumberInput,
+    DVRDNumberInput,
     DVRDPasswordInput,
     Link,
     DvrdOptionsList,
     DvrdSelectController as DvrdSelect,
     DVRDGroupedSelect,
-    DvrdSwitch,
+    DVRDSwitch,
     DvrdHeaderController as DvrdHeader,
     FileUpload,
     DvrdRadioController as DvrdRadio,

package/package.json

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

package/src/js/pdf/settings/invoiceTable/pdfInvoiceTableSettings.tsx

@@ -8,8 +8,8 @@ import PdfInvoiceTable from "../../invoiceTable/pdfInvoiceTable";
 import {debug} from "../../../util/miscUtil";
 import {ElementPosition} from "../../../util/interfaces";
 import {fontItems} from "../../../util/pdfUtil";
-import {ColorPicker, DvrdNumberInput, DvrdSelect} from "../../../../../index";
 import IconButton, {IconButtonType} from "../buttons/iconButton";
+import {ColorPicker, DVRDNumberInput, DvrdSelect} from "../../../../../index";
 
 interface Props {
     element: PdfInvoiceTable;
@@ -116,7 +116,7 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
     renderWidth = (value: number, index: number) => {
         const title = TITLES[index];
         return (
-            <DvrdNumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
+            <DVRDNumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
                          ornaments={{
                              element: <span style={{cursor: 'text'}}>%</span>,
                              placement: ElementPosition.RIGHT,
@@ -145,7 +145,7 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
                 <label className='settings-label'>Tekstgrootte</label>
                 <DvrdSelect items={fontItems} value={settings.font} onChange={element.changeSetting('font')}
                             label='Lettertype' optionsContainerHeight='15rem' unControlled/>
-                <DvrdNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
+                <DVRDNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
                                  asNumber
                                  ornaments={{
                                      element: <span style={{cursor: 'text'}}>px</span>,

package/src/js/pdf/settings/text/pdfTextSettings.tsx

@@ -14,7 +14,7 @@ import {
     PDFTextVariables,
     SelectItemShape
 } from "../../../util/interfaces";
-import {ColorPicker, DvrdNumberInput, DvrdSelect, fontItems, getPdfVariables} from "../../../../../index";
+import {ColorPicker, DVRDNumberInput, DvrdSelect, fontItems, getPdfVariables} from "../../../../../index";
 import classNames from 'classnames';
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 
@@ -177,7 +177,7 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
                 <div className='font-settings'>
                     <DvrdSelect items={fontItems} value={settings.font} onChange={element.changeSetting('font')}
                                 label='Lettertype' optionsContainerHeight='15rem' unControlled/>
-                    <DvrdNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
+                    <DVRDNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
                                      label='Tekstgrootte' className='font-size'
                                      ornaments={{
                                          element: <span style={{cursor: 'text'}}>px</span>,

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -5,10 +5,10 @@ import './style/sidebarMenu.scss';
 
 import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
 import {NavLink, useLocation} from 'react-router-dom';
-import {SidebarItem, SideMenuMode} from "../util/interfaces";
+import {SidebarItem, SideMenuMode} from '../util/interfaces';
 import classNames from 'classnames';
-import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
-import {ControlContext} from "../util/controlContext";
+import {AwesomeIcon, generateComponentId, isAbsoluteLink} from '../../../index';
+import {ControlContext} from '../util/controlContext';
 import defer from 'lodash.defer';
 import {IconName} from '@fortawesome/fontawesome-svg-core';
 
@@ -29,7 +29,7 @@ function getTopItems(items: SidebarItem[]): SidebarItem[] {
 }
 
 function getBottomItems(items: SidebarItem[]): SidebarItem[] {
-    return items.filter((item: SidebarItem) => item.onBottom)
+    return items.filter((item: SidebarItem) => item.onBottom);
 }
 
 function getActiveItem(items: SidebarItem[], pathname: string): SidebarItem | null {
@@ -52,7 +52,8 @@ function itemIsActive(item: SidebarItem, pathname: string): boolean {
 
 function itemHasActiveId(item: SidebarItem, activeId: string): boolean {
     if (item.id === activeId) return true;
-    else if (Array.isArray(item.children) && item.children.find((child: SidebarItem) => itemHasActiveId(child, activeId))) return true;
+    else if (Array.isArray(item.children) && item.children.find(
+        (child: SidebarItem) => itemHasActiveId(child, activeId))) return true;
     return false;
 }
 
@@ -77,7 +78,7 @@ export default function SidebarMenu(props: Props) {
             if (_route && !isAbsoluteLink(_route))
                 setActiveItem(item.id);
             onClickItem(item)(evt);
-        }
+        };
     }
 
     function renderItem(isChild: boolean = false) {
@@ -87,11 +88,12 @@ export default function SidebarMenu(props: Props) {
                 cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
                     isChild && 'child', children !== undefined && 'with-children');
 
-            const content = (
+            const content = (active: boolean) => (
                 <>
-                    {renderIcon(isChild, label, icon)}
-                    {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
-                    <span className='item-label'>{label}</span>
+                    {renderIcon(isChild, label, active, icon)}
+                    {mode === SideMenuMode.COMPACT &&
+                        <div className={classNames('active-indicator', active && 'active')}/>}
+                    <span className={classNames('item-label', active && 'active')}>{label}</span>
                     {children !== undefined && (
                         <>
                             {isActive && <div className='line'/>}
@@ -103,15 +105,15 @@ export default function SidebarMenu(props: Props) {
 
             if (asNavLink) return (
                 <NavLink key={id} to={item.route as string} className={cls} id={id}>
-                    {content}
+                    {({isActive}) => content(isActive)}
                 </NavLink>
             );
             return (
-                <div key={id} className={classNames(cls, isActive && 'active')} onClick={_onClickItem(item)} id={id}>
-                    {content}
+                <div key={id} className={cls} onClick={_onClickItem(item)} id={id}>
+                    {content(isActive)}
                 </div>
-            )
-        }
+            );
+        };
     }
 
     function renderChildren(isActive: boolean) {
@@ -121,12 +123,12 @@ export default function SidebarMenu(props: Props) {
                 <div className='children-container' style={{display}}>
                     {children.map(renderItem(true))}
                 </div>
-            )
-        }
+            );
+        };
     }
 
-    function renderIcon(isChild: boolean, label: string, icon?: IconName | ReactNode): ReactNode {
-        const className = 'item-icon'
+    function renderIcon(isChild: boolean, label: string, active: boolean, icon?: IconName | ReactNode): ReactNode {
+        const className = classNames('item-icon', active && 'active');
         if (icon) {
             if (typeof icon === 'string') return <AwesomeIcon name={icon as IconName} className={className}/>;
             else if (React.isValidElement(icon))
@@ -135,7 +137,7 @@ export default function SidebarMenu(props: Props) {
         }
         if (label.length) {
             if (isChild) return <span/>;
-            return <span className={classNames(className, 'letter')}>{label[0]}</span>
+            return <span className={classNames(className, 'letter')}>{label[0]}</span>;
         }
         return null;
     }
@@ -162,7 +164,7 @@ export default function SidebarMenu(props: Props) {
     }, []);
 
     useEffect(() => {
-        _setActiveItem()
+        _setActiveItem();
     }, [location]);
 
     return (
@@ -175,5 +177,5 @@ export default function SidebarMenu(props: Props) {
                 {getBottomItems(items).map(renderItem())}
             </div>
         </div>
-    )
+    );
 }

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

@@ -34,6 +34,10 @@
       color: $color-gray-4;
       font-size: 1.5rem;
       transition: color .2s ease-in-out;
+
+      &.active {
+        color: var(--base-color);
+      }
     }
 
     .item-label {
@@ -61,24 +65,18 @@
       visibility: hidden;
       opacity: 0;
       transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
-    }
 
-    &:hover {
-      .item-label {
+      &.active {
         visibility: visible;
         opacity: 1;
       }
     }
 
-    &.active {
-      .active-indicator {
+    &:hover {
+      .item-label {
         visibility: visible;
         opacity: 1;
       }
-
-      .item-icon {
-        color: var(--base-color);
-      }
     }
   }
 
@@ -119,11 +117,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,18 +162,6 @@
       &.with-children {
         margin-bottom: -.5rem;
       }
-
-      &.active {
-        .item-icon {
-          color: var(--base-color);
-          opacity: 1;
-        }
-
-        .item-label {
-          font-weight: 600;
-          color: black;
-        }
-      }
     }
   }
 }

package/src/js/switch/dvrdSwitch.tsx

@@ -4,7 +4,7 @@
 import './style/dvrdSwitch.scss';
 
 import classNames from 'classnames';
-import React, {useContext} from 'react';
+import React, {useContext, useMemo} from 'react';
 import {ControlContext} from "../util/controlContext";
 import {convertColor} from "../util/colorUtil";
 
@@ -12,13 +12,29 @@ interface Props {
     onChange: (value: boolean, evt?: React.MouseEvent | React.ChangeEvent) => void;
     value: boolean;
     className?: string;
+    labelClassName?: string;
     disabled?: boolean;
     activeColor?: string;
+    trackColor?: string;
+    baseColor?: string;
+    contrastColor?: string;
+    labels?: [string, string]; // Labels placed to the left and right of the switch
+    label?: string;  // Label placed to the right of the switch
 }
 
-export default function DvrdSwitch(props: Props) {
-    const context = useContext(ControlContext),
-        {className, onChange, disabled, value, activeColor} = props;
+export default function DVRDSwitch(props: Props) {
+    const context = useContext(ControlContext);
+    const {
+        onChange, disabled, value, activeColor, labels, label, trackColor, baseColor, contrastColor,
+        labelClassName
+    } = props;
+    const className = useMemo(() => {
+        const names: Array<string | undefined> = ['dvrd-switch', props.className];
+        if (!!labels || !!label) names.push('with-labels');
+        if (value) names.push('active');
+        if (disabled) names.push('disabled');
+        return classNames(names);
+    }, [props.className, labels, label, value, disabled]);
 
     function onToggle(evt: React.MouseEvent) {
         if (!disabled)
@@ -27,10 +43,11 @@ export default function DvrdSwitch(props: Props) {
 
     function getTrackColor(): string {
         let color: string;
-        if (disabled) color = 'color-gray-4';
+        if (trackColor) color = trackColor;
+        else if (disabled) color = 'color-gray-4';
         else if (value) {
             if (activeColor) color = activeColor;
-            else color = context.baseColor;
+            else color = baseColor ?? context.baseColor;
         } else color = 'color-gray-7';
         return convertColor(color);
     }
@@ -38,16 +55,26 @@ export default function DvrdSwitch(props: Props) {
     function getHandleColor(): string {
         let color: string;
         if (disabled) color = 'color-gray-3';
-        else color = context.contrastColor;
+        else color = contrastColor ?? context.contrastColor;
         return convertColor(color);
     }
 
+    function renderLabel(position?: 'left' | 'right') {
+        const _label = position === 'left' ? labels?.[0] : position === 'right' ? labels?.[1] : label;
+        if(!_label) return null;
+        return (
+            <label className={classNames('dvrd-switch-label', position, labelClassName)}>{_label}</label>
+        );
+    }
+
     return (
-        <div className={classNames('dvrd-switch', value && 'active', disabled && 'disabled', className)}
-             onClick={onToggle}>
+        <div className={className} onClick={onToggle}>
+            {renderLabel('left')}
             <div className='track' style={{backgroundColor: getTrackColor()}}>
                 <div className='handle' style={{backgroundColor: getHandleColor()}}/>
             </div>
+            {renderLabel('right')}
+            {renderLabel()}
         </div>
     )
 }

package/src/js/switch/style/dvrdSwitch.scss

@@ -7,6 +7,7 @@
 .dvrd-switch {
   $track-height: 14px;
   $handle-size: 18px;
+  cursor: pointer;
 
   .track {
     width: $handle-size * 1.3;
@@ -23,12 +24,21 @@
       border-radius: 100%;
       width: $handle-size;
       height: $handle-size;
-      cursor: pointer;
       transition: transform .2s ease-in-out, left .2s ease-in-out;
       will-change: left;
     }
   }
 
+  .dvrd-switch-label {
+    user-select: none;
+  }
+
+  &.with-labels {
+    display: flex;
+    column-gap: 1rem;
+    align-items: center;
+  }
+
   &.active {
     .track {
       .handle {
@@ -38,10 +48,6 @@
   }
 
   &.disabled {
-    .track {
-      .handle {
-        cursor: default;
-      }
-    }
+    cursor: default;
   }
 }

package/src/js/textField/dvrdNumberInput.tsx

@@ -2,10 +2,12 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-import React, {FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, PureComponent} from 'react';
+import React, {FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, useEffect, useRef, useState} from 'react';
+import {generateComponentId} from '../util/componentUtil';
 import {ChangeFunction, ErrorType, OrnamentShape} from '../util/interfaces';
 import {roundTo} from '../util/miscUtil';
 import DvrdInputController from "./dvrdInputController";
+import {isPasting, positionIsAfterComma, textIsSelected} from "../util/inputUtil";
 
 interface Props {
     onChange: ChangeFunction<string | number>;
@@ -28,130 +30,114 @@ interface Props {
     error?: ErrorType;
     id?: string;
     placeholder?: string;
-    multipleSeparators: boolean;
-    wholeNumbers: boolean;
+    multipleSeparators?: boolean;
+    wholeNumbers?: boolean;
     asNumber?: boolean;
-    asCurrency: boolean;
+    asCurrency?: boolean;
     autoSelect?: boolean;
     unControlled?: boolean;
+    disableSymbols?: boolean;
 }
 
-// TODO Add option to disable symbols (+,-)
+export default function DVRDNumberInput(props: Props) {
+    const {
+        onKeyDown, inputProps, asCurrency, asNumber, wholeNumbers, disableSymbols, onChange, value, unControlled
+    } = props;
+    const [innerValue, setInnerValue] = useState(value);
+    const id = useRef(generateComponentId(props.id));
 
-interface State {
-    value: number | string;
-}
+    function _onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
+        const {key} = evt,
+            numValue = Number(value);
+        // Allow only number and simple edit keys
+        const editKeys = /\d|Backspace|ArrowRight|ArrowLeft|ArrowUp|ArrowDown|Escape|Esc|Enter|[,.\-+]|Tab/;
+        if (!editKeys.test(key) && !isPasting(evt))
+            evt.preventDefault();
 
-export default class DvrdNumberInput extends PureComponent<Props, State> {
-    static defaultProps = {
-        asCurrency: false,
-        wholeNumbers: false,
-        multipleSeparators: false,
-    }
+        // Handle Arrow events
+        if (['ArrowUp', 'ArrowDown'].includes(key)) {
+            evt.preventDefault();
+            if (!isNaN(numValue))
+                return onArrowEvent(evt, numValue);
+        }
 
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            value: props.value,
-        };
+        // Handle event if no selected text
+        onKeyDownSelected(evt);
+
+        if (onKeyDown)
+            onKeyDown(evt);
     }
 
+    function onArrowEvent(evt: React.KeyboardEvent<HTMLInputElement>, numValue: number) {
+        const {key} = evt,
+            step = Number(inputProps?.step || asCurrency ? .01 : 1);
+        if (key === 'ArrowUp')
+            numValue += step;
+        else if (key === 'ArrowDown')
+            numValue -= step;
+        let stringValue = numValue.toString();
+        if (asCurrency) stringValue = roundTo(numValue, 2);
+        if (asNumber) change(Number(stringValue));
+        else change(stringValue);
+    }
 
-    onKeyDown = (evt: React.KeyboardEvent) => {
-        const {onKeyDown, asCurrency, wholeNumbers, inputProps, asNumber, multipleSeparators} = this.props;
-        const {value} = this.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|Delete|Del/.test(key) &&
-            !this.isPasting(evt))
+    function onKeyDownSelected(evt: React.KeyboardEvent<HTMLInputElement>) {
+        if (textIsSelected(evt)) return;
+        const {currentTarget, key} = evt,
+            position = currentTarget.selectionStart;
+        if (/[,.]/.test(key) && /[,.]/.test(value.toString()) && asCurrency)
+            // Prevent double points or commas
             evt.preventDefault();
 
-        if (key === 'ArrowUp') {
+        if (wholeNumbers && /[.,]/.test(key))
             evt.preventDefault();
-            if (!isNaN(numValue)) {
-                const step = Number(inputProps?.step || asCurrency ? .01 : 1);
-                numValue += step;
-                let stringValue = numValue.toString();
-                if (asCurrency) stringValue = roundTo(numValue, 2);
-                if (asNumber) this.change(Number(stringValue), evt);
-                else this.change(stringValue, evt);
-            }
-            return;
-        }
-        if (key === 'ArrowDown') {
+        else if (asCurrency && /[.,]\d{2}/.test(value.toString()) && /\d/.test(key) &&
+            positionIsAfterComma(position, value.toString()))
+            // Prevent more than 2 decimals when working with currencies
             evt.preventDefault();
-            if (!isNaN(numValue)) {
-                const step = Number(inputProps?.step || asCurrency ? .01 : 1);
-                numValue -= step;
-                let stringValue = numValue.toString();
-                if (asCurrency) stringValue = roundTo(numValue, 2);
-                if (asNumber) this.change(Number(stringValue), evt);
-                else this.change(stringValue, evt);
-            }
-            return;
-        }
 
-        const textIsSelected = this.textIsSelected(evt), position = (target as HTMLInputElement).selectionStart;
-        if (!textIsSelected) {
-            if (/[,.]/.test(key) && /[,.]/.test(value.toString()) && !multipleSeparators)
-                // Prevent double points or commas
-                evt.preventDefault();
-
-            if (wholeNumbers && /[.,]/.test(key))
-                evt.preventDefault();
-            else if (asCurrency && /[.,]\d{2}/.test(value.toString()) && /\d/.test(key) &&
-                this.positionIsAfterComma(position, value.toString()))
-                // Prevent more than 2 decimals when working with currencies
-                evt.preventDefault();
-
-            if ((position && position !== 0) && /[\-+]/.test(key))
-                // Prevent - or + sign after first position
-                evt.preventDefault();
-        }
-
-        if (onKeyDown !== undefined && onKeyDown !== null)
-            onKeyDown(evt);
-    };
+        if (/[\-+]/.test(key) && (disableSymbols || (position && position !== 0)))
+            // Prevent - or + sign completely or after first position
+            evt.preventDefault();
+    }
 
-    onChange = (value: string, evt: React.ChangeEvent) => {
-        const {asNumber} = this.props;
+    function _onChange(value: string, evt: React.ChangeEvent<HTMLInputElement>) {
+        value = value.replace(/ /g, '');
         if (!/^-?[\d.,]*$/.test(value)) evt.preventDefault();
         else {
-            let changeValue: string | number = value;
-            if (value.startsWith('.') || value.startsWith(',')) value = 0 + value;
-            if (asNumber) changeValue = Number(value.replace(',', '.'));
-            this.change(changeValue, evt);
+            if (value.startsWith('.') || value.startsWith(',')) value = '0' + value;
+            if (wholeNumbers)
+                // Only allow numbers and minus sign for negative numbers
+                value = value.replace(/[^0-9-]/g, '').trim();
+            if (disableSymbols)
+                value = value.replace(/[\-+]/g, '').trim();
+            if (asNumber) {
+                const numValue = Number(value.replace(',', '.'));
+                change(numValue, evt);
+            } else change(value, evt);
         }
-    };
-
-    change = (value: string | number, evt: React.ChangeEvent | React.KeyboardEvent) => {
-        this.setState({value}, () => {
-            this.props.onChange(value, evt as React.ChangeEvent);
-        })
-    };
-
-    isPasting = (evt: React.KeyboardEvent) => {
-        return (evt.metaKey || evt.ctrlKey) && evt.key === 'v';
-    };
-
-    positionIsAfterComma = (position: number | null, value: string) => {
-        if (position === null) return true;
-        if (value.includes('.')) return position > value.indexOf('.');
-        if (value.includes(',')) return position > value.indexOf(',');
-        return false;
-    };
-
-    textIsSelected = (evt: React.KeyboardEvent) => {
-        const target = evt.target as HTMLInputElement, start = target.selectionStart, end = target.selectionEnd;
-        return start != end;
-    };
-
-    render = () => {
-        const value = this.props.unControlled ? this.state.value : this.props.value;
-        return (
-            <DvrdInputController {...this.props} value={value} onChange={this.onChange} onKeyDown={this.onKeyDown}
-                                 unControlled={false}/>
-        );
+        return value;
+    }
+
+    function change(value: number | string, evt?: React.ChangeEvent<HTMLInputElement>) {
+        setInnerValue(value);
+        onChange(value, evt);
+    }
+
+    function focusInput() {
+        document.getElementById(id.current + '-input')?.focus();
     }
+
+    useEffect(() => {
+        if (!unControlled) setInnerValue(value);
+    }, [value]);
+
+    useEffect(() => {
+        if (!props.disabled && props.autoFocus)
+            focusInput();
+    }, [props.disabled, props.autoFocus]);
+
+    return (
+        <DvrdInputController {...props} id={id.current} onChange={_onChange} onKeyDown={_onKeyDown} value={innerValue}/>
+    );
 }

package/src/js/util/inputUtil.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2024. Dave van Rijn Development
+ */
+
+export function isPasting(evt: React.KeyboardEvent): boolean {
+    return (evt.metaKey || evt.ctrlKey) && evt.key === 'v';
+}
+
+export function textIsSelected(evt: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): boolean {
+    const {currentTarget} = evt,
+        start = currentTarget.selectionStart,
+        end = currentTarget.selectionEnd;
+    return start != end;
+}
+
+export function positionIsAfterComma(position: number | null, value: string): boolean {
+    if (position === null) return true;
+    if (value.includes('.')) return position > value.indexOf('.');
+    if (value.includes(',')) return position > value.indexOf(',');
+    return false;
+}