chore: update dependencies

package.json

@@ -4,33 +4,33 @@
   "private": true,
   "homepage": "http://telerik.github.io/kendo-react-file-manager",
   "dependencies": {
-    "@progress/kendo-data-query": "^1.5.5",
+    "@progress/kendo-data-query": "^1.6.0",
-    "@progress/kendo-drawing": "^1.11.0",
+    "@progress/kendo-drawing": "^1.17.2",
-    "@progress/kendo-licensing": "^1.2.0",
+    "@progress/kendo-licensing": "^1.2.2",
-    "@progress/kendo-react-buttons": "^4.9.0",
+    "@progress/kendo-react-buttons": "^5.9.0",
-    "@progress/kendo-react-data-tools": "^4.9.0",
+    "@progress/kendo-react-data-tools": "^5.9.0",
-    "@progress/kendo-react-dateinputs": "^4.9.0",
+    "@progress/kendo-react-dateinputs": "^5.9.0",
-    "@progress/kendo-react-dialogs": "^4.9.0",
+    "@progress/kendo-react-dialogs": "^5.9.0",
-    "@progress/kendo-react-dropdowns": "^4.9.0",
+    "@progress/kendo-react-dropdowns": "^5.9.0",
-    "@progress/kendo-react-grid": "^4.9.0",
+    "@progress/kendo-react-grid": "^5.9.0",
-    "@progress/kendo-react-inputs": "^4.9.0",
+    "@progress/kendo-react-inputs": "^5.9.0",
-    "@progress/kendo-react-intl": "^4.9.0",
+    "@progress/kendo-react-intl": "^5.9.0",
-    "@progress/kendo-react-labels": "^4.9.0",
+    "@progress/kendo-react-labels": "^5.9.0",
-    "@progress/kendo-react-layout": "^4.9.0",
+    "@progress/kendo-react-layout": "^5.9.0",
-    "@progress/kendo-react-progressbars": "^4.9.0",
+    "@progress/kendo-react-progressbars": "^5.9.0",
-    "@progress/kendo-react-treeview": "^4.9.0",
+    "@progress/kendo-react-treeview": "^5.9.0",
-    "@progress/kendo-react-upload": "^4.9.0",
+    "@progress/kendo-react-upload": "^5.9.0",
-    "@progress/kendo-theme-default": "^4.41.2",
+    "@progress/kendo-theme-default": "^5.12.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^17.0.15",
+    "@types/react": "^18.0.26",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.0.9",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
-    "typescript": "^4.3.5",
+    "typescript": "^4.9.4",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -59,6 +59,6 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^3.2.3"
+    "gh-pages": "^4.0.0"
   }
 }

src/components/FileInformation.tsx

@@ -23,8 +23,8 @@ const NoDataRendering = () => {
 
 const FileSelectionRendering = (item: DataModel) => {
   const intl = useInternationalization();
-  const dateCreated: Date = convertDateFormat(item.dateCreated ? item.dateCreated : null, intl);
+  const dateCreated: String = convertDateFormat(item.dateCreated ? item.dateCreated : null, intl);
-  const dateModified: Date = convertDateFormat(item.dateModified ? item.dateModified : null, intl);
+  const dateModified: String = convertDateFormat(item.dateModified ? item.dateModified : null, intl);
 
   return (
     <div className="k-filemanager-preview" style={{ width: '100%', border: 0 }}>
@@ -32,10 +32,10 @@ const FileSelectionRendering = (item: DataModel) => {
         <span className="k-file-preview">
           <span className={classNames("k-file-icon k-icon", item.icon ? item.icon.iconClass : '')}></span>
         </span>
-        <span className="k-file-name k-single-file-selected">{item.path? getName(item.path) : ''}</span>
+        <span className="k-file-name k-single-file-selected">{item.path ? getName(item.path) : ''}</span>
         <dl className="k-file-meta">
           <dt className="k-file-meta-label">Type:  </dt>
-          <dd className= {"k-file-meta-value k-file-type"}> {item.icon ? item.icon.type : ''}</dd>
+          <dd className={"k-file-meta-value k-file-type"}> {item.icon ? item.icon.type : ''}</dd>
           <dd className="k-line-break"></dd>
           <dt className="k-file-meta-label">Size:  </dt>
           <dd className="k-file-meta-value k-file-size"> {item.size ? formatBytes(item.size) : ''}</dd>

src/components/FileManagerToolbar.tsx

@@ -101,7 +101,7 @@ export const FileManagerToolbar = (props) => {
     <Toolbar className="k-filemanager-toolbar">
       <Button onClick={handleNewFolderClick}>New Folder</Button>
       <Button onClick={handleDialogVisibility}>Upload</Button>
-      { dialogVisible &&
+      {dialogVisible &&
         <Dialog
           title={'Upload Files'}
           className={'k-filemanager-upload-dialog'}
@@ -122,7 +122,7 @@ export const FileManagerToolbar = (props) => {
           />
           <DialogActionsBar layout={'end'}>
             <Button onClick={handleUploadClearList} > Clear List</Button>
-            <Button primary={true} onClick={handleUploadDone}> Done </Button>
+            <Button themeColor={'primary'} onClick={handleUploadDone}> Done </Button>
           </DialogActionsBar>
         </Dialog >
       }
@@ -171,17 +171,10 @@ export const FileManagerToolbar = (props) => {
       <div className="k-spacer">&nbsp;</div>
       <div className="k-filemanager-details-toggle">
         <label>View Details</label>
-        <Switch defaultChecked={true} onChange={handleSwitchChange} >
+        <Switch defaultChecked={true} onChange={handleSwitchChange} />
-          <Input type="checkbox"/>
-          <span className="k-switch-container">
-            <span className="k-switch-label-on">On</span>
-            <span className="k-switch-label-off">Off</span>
-            <span className="k-switch-handle"></span>
-          </span>
-        </Switch>
       </div>
       <div className="k-filemanager-search-tool k-textbox k-toolbar-last-visible" >
-        <Input className="k-input" placeholder="Search" onChange={handleSearchChange}/>
+        <Input className="k-input" placeholder="Search" onChange={handleSearchChange} />
         <span className="k-input-icon">
           <span className="k-icon k-i-search"></span>
         </span>

src/index.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { createRoot } from 'react-dom/client';
 
-ReactDOM.render(
+createRoot(document.getElementById('root')).render(<App />);
-  <App />,
-  document.getElementById('root')
-);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "strict": true
   },
   "include": [
     "src"