@dvrd/dvr-controls 1.0.85 → 1.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.85",
+  "version": "1.0.86",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -25,12 +25,12 @@
     ]
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "6.15.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.1.3"
   },
   "dependencies": {
-    "@dvrd/idate": "^1.8.6",
+    "@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",
@@ -44,9 +44,9 @@
     "@types/lodash.merge": "^4.6.7",
     "@types/lodash.mergewith": "^4.6.7",
     "@types/node": "18.14.0",
-    "@types/react": "^18.2.28",
+    "@types/react": "^19.0.8",
     "@types/react-color": "2.13.5",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^19.0.3",
     "@types/uuid": "9.0.0",
     "classnames": "2.5.1",
     "dompurify": "3.0.0",
@@ -59,7 +59,7 @@
     "react-color": "2.19.3",
     "react-rnd": "10.4.1",
     "swiper": "^11.1.4",
-    "typescript": "4.9.5",
+    "typescript": "5.6.3",
     "uuid": "9.0.0"
   }
 }

package/src/js/checkbox/checkbox.tsx

@@ -110,9 +110,9 @@ export default function DvrdCheckbox(props: Props) {
     }
 
     function renderCheck() {
-        if (React.isValidElement(checkIcon)) return React.cloneElement((checkIcon as React.ReactElement), {
-            className: classNames(checkIcon.props.className, checkClassName),
-            style: {...checkIcon.props.style, ...checkStyle}
+        if (React.isValidElement(checkIcon)) return React.cloneElement((checkIcon as React.ReactElement<any>), {
+            className: classNames((checkIcon as React.ReactElement<any>).props.className, checkClassName),
+            style: {...(checkIcon as React.ReactElement<any>).props.style, ...checkStyle}
         });
         else if (checked === 'partial') return (
             <div className={classNames(checkClassName, 'partial-icon')} style={partialCheckStyle}/>

package/src/js/dialog/dialogController.tsx

@@ -61,7 +61,7 @@ export default class DialogController extends PureComponent<Props, State> {
     render = () => {
         const {className} = this.props;
         return <WithEvents events={this.getEvents()}>
-            {Object.values(this.state.dialogs).map((element: ReactElement, key: number) => (
+            {Object.values(this.state.dialogs).map((element: ReactElement<any>, key: number) => (
                 <Fragment key={key}>
                     {React.cloneElement(element, {className})}
                 </Fragment>

package/src/js/head/DVRHead.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-import React, {PureComponent, ReactElement} from 'react';
+import {PureComponent, ReactElement} from 'react';
 
 interface Props {
     children?: any;
@@ -19,7 +19,7 @@ export default class DVRHead extends PureComponent<Props> {
         }
     };
 
-    private includeChild = (child: ReactElement) => {
+    private includeChild = (child: ReactElement<any>) => {
         const {type, props} = child,
             elem = document.createElement(type as keyof HTMLElementTagNameMap);
         for (const key of Object.keys(props)) {

package/src/js/header/DVRHeader.tsx

@@ -15,8 +15,8 @@ import { IconName } from '@fortawesome/fontawesome-svg-core';
 
 export interface HeaderItem {
     label?: string;
-    component?: React.ReactElement;
-    icon?: IconName | React.ReactElement;
+    component?: React.ReactElement<any>;
+    icon?: IconName | React.ReactElement<any>;
     iconOnly?: boolean;
     forceBar?: boolean;
     onClick: MouseEventHandler | null;
@@ -243,7 +243,7 @@ export default class DVRHeader extends PureComponent<Props, State> {
         if (iconOnly) {
             if (typeof icon === 'string') renderAble.toRender = <AwesomeIcon name={icon} className={className}/>;
             // Type cast since props are checked by constructor
-            else renderAble.toRender = React.cloneElement((icon as React.ReactElement), {className});
+            else renderAble.toRender = React.cloneElement((icon as React.ReactElement<any>), {className});
         } else if (component !== undefined) {
             renderAble.isComp = true;
             renderAble.toRender = React.cloneElement(component, {className});

package/src/js/header/v2/dvrdHeader.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-import React, {CSSProperties, MouseEventHandler, useContext, useMemo} from 'react';
+import React, {CSSProperties, MouseEventHandler, ReactElement, useContext, useMemo} from 'react';
 import {HeaderItem} from "../../util/interfaces";
 import {ControlContext} from "../../util/controlContext";
 import classNames from 'classnames';
@@ -32,7 +32,8 @@ export default function DvrdHeader(props: Props) {
     function renderItem(item: HeaderItem, index: number) {
         const {label} = item;
         if (React.isValidElement(label))
-            return React.cloneElement(label, Object.assign(label.props, {onClick: onClickItem(item), key: index}));
+            return React.cloneElement(label,
+                Object.assign((label as ReactElement<any>).props, {onClick: onClickItem(item), key: index}));
         return (
             <div key={index} className={classNames('dvrd-header-item', itemClassName)} onClick={onClickItem(item)}
                  style={itemStyle}>

package/src/js/header/v2/dvrdHeaderController.tsx

@@ -3,7 +3,7 @@
  */
 
 import React, {MouseEventHandler} from 'react';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import {HeaderItem} from "../../util/interfaces";
 import DvrdHeader from "./dvrdHeader";
 

package/src/js/input/animated/animatedTextField.tsx

@@ -13,7 +13,7 @@ interface Props extends DVRInputControllerProps {
     typingTime: number;
     randomise: boolean;
     doBackspace: boolean;
-    Input?: ReactElement;
+    Input?: ReactElement<any>;
     className?: string;
 }
 

package/src/js/navigation/mobileNavigation.tsx

@@ -23,7 +23,7 @@ interface Props {
     onClickItem?: (item: NavigationItem) => MouseEventHandler;
     navigationItems: Array<NavigationItem>;
     className?: string;
-    menuIcon?: ReactElement;
+    menuIcon?: ReactElement<any>;
     id?: string;
     keepOpen?: true;
 }

package/src/js/navigator/navigator.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import {debug} from '../util/miscUtil';
 
 export default function AppNavigator() {

package/src/js/optionsMenu/optionsMenu.tsx

@@ -15,7 +15,7 @@ import {getScreenHeight, getScreenWidth} from '../util/responsiveUtil';
 interface Props {
     onClickOption?: (option: React.ReactNode | OptionsMenuItem, evt: React.MouseEvent) => void;
     onClickOptionIcon?: Function;
-    optionsComponent?: React.ReactElement;
+    optionsComponent?: React.ReactElement<any>;
     options: OptionsMenuItem[];
     placement: MenuPlacement;
     containerClass?: string;

package/src/js/select/dvrdGroupedSelect.tsx

@@ -185,7 +185,7 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
     function renderValueCustom() {
         if (selectedLabel === null || searchable) return null; // Nothing selected, or using a search input
         if (['string', 'number'].includes(typeof selectedLabel)) return null; // Not a custom element
-        const element = selectedLabel as React.ReactElement;
+        const element = selectedLabel as React.ReactElement<any>;
         return React.cloneElement(element, {
             ...element.props,
             className: classNames(element.props?.className, 'grouped-select-value')
@@ -245,7 +245,7 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
         }
     }
 
-    function renderCustomLabel(label: React.ReactElement, padding: string, isGroupHead: boolean, isSelectable: boolean,
+    function renderCustomLabel(label: React.ReactElement<any>, padding: string, isGroupHead: boolean, isSelectable: boolean,
                                isSelected: boolean) {
         const style = label.props?.style ?? {};
         return React.cloneElement(label, {

package/src/js/select/dvrdMultiSelect.tsx

@@ -170,7 +170,7 @@ export default function DvrdMultiSelect(props: Props) {
                    onClick={onClickItem(value)}>{isSelected &&
                 <AwesomeIcon name='check' className='check-icon'/>} {label}</label>
         );
-        const labelElement: ReactElement = label as ReactElement;
+        const labelElement: ReactElement<any> = label as ReactElement;
         const onClick = (evt: React.MouseEvent) => {
             onClickItem(value)(evt);
             labelElement.props.onClick?.(evt);

package/src/js/select/dvrdSelect.tsx

@@ -152,7 +152,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
             <label key={index} className={classNames('dvrd-select-item', itemClassName)}
                    onClick={this.onClickItem(value)}>{label}</label>
         );
-        const labelElement: ReactElement = label as ReactElement;
+        const labelElement: ReactElement<any> = label as ReactElement;
         const onClick = (evt: React.MouseEvent) => {
             this.onClickItem(value)(evt);
             labelElement.props.onClick?.(evt);

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -4,7 +4,7 @@
 import './style/sidebarMenu.scss';
 
 import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
-import {NavLink, useLocation} from 'react-router-dom';
+import {NavLink, useLocation} from 'react-router';
 import {SidebarItem, SideMenuMode} from '../util/interfaces';
 import classNames from 'classnames';
 import {AwesomeIcon, generateComponentId, isAbsoluteLink} from '../../../index';
@@ -132,8 +132,8 @@ export default function SidebarMenu(props: Props) {
         if (icon) {
             if (typeof icon === 'string') return <AwesomeIcon name={icon as IconName} className={className}/>;
             else if (React.isValidElement(icon))
-                return React.cloneElement((icon as React.ReactElement),
-                    {className: classNames(className, icon.props.className)});
+                return React.cloneElement((icon as React.ReactElement<any>),
+                    {className: classNames(className, (icon.props as any).className)});
         }
         if (label.length) {
             if (isChild) return <span/>;

package/src/js/snackbar/snackbar.tsx

@@ -43,9 +43,9 @@ export default function Snackbar(props: Props) {
         if (typeof text === 'string')
             element = <label className={classNames('snackbar-text', textClass)} style={textStyle}>{text}</label>;
         else if (text) {
-            const className = classNames(text.props?.className, 'snackbar-text', textClass);
-            const style = {...text.props?.style, ...textStyle};
-            element = React.cloneElement(text, {className, style});
+            const className = classNames((text.props as any)?.className, 'snackbar-text', textClass);
+            const style = {...(text.props as any)?.style, ...textStyle};
+            element = React.cloneElement(text as any, {className, style});
         }
         return element;
     }

package/src/js/textField/dvrdInput.tsx

@@ -168,15 +168,15 @@ export default function DvrdInput(props: Props) {
             return <span className={classNames('dvrd-input-ornament', ornamentClassName)}
                          onClick={onClickElement}>{ornament.element}</span>;
         else return React.cloneElement(ornament.element, {
-            className: classNames(ornament.element.props.className, ornamentClassName),
+            className: classNames((ornament.element.props as any).className, ornamentClassName),
             onClick: (evt: React.MouseEvent) => {
                 onClickElement(evt);
                 if (React.isValidElement(ornament.element)) {
-                    const element: React.ReactElement = ornament.element;
+                    const element: React.ReactElement<any> = ornament.element;
                     element.props.onClick?.(evt);
                 }
             }
-        });
+        } as any);
     }
 
     useEffect(() => {

package/src/js/util/interfaces.ts

@@ -46,7 +46,7 @@ export interface ColorSet {
 
 export interface OrnamentShape {
     placement?: ElementPosition;
-    element: React.ReactElement | string;
+    element: React.ReactElement<any> | string;
     allowPropagation?: boolean;
 }