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,13 +101,13 @@ 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'}
           onClose={handleDialogVisibility}
           contentStyle={{ width: '530px' }}
-          >
+        >
           <Upload
             batch={false}
             multiple={true}
@@ -119,10 +119,10 @@ export const FileManagerToolbar = (props) => {
             onStatusChange={handleFileChange}
             saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
             removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
-            />
+          />
           <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 >
       }
@@ -132,7 +132,7 @@ export const FileManagerToolbar = (props) => {
           togglable={true}
           selected={props.sort[0].dir === 'asc'}
           onClick={handleAscBtnClick}
-          >
+        >
           <span className="k-icon k-i-sort-asc-sm"></span>
         </Button>
         <Button
@@ -140,7 +140,7 @@ export const FileManagerToolbar = (props) => {
           togglable={true}
           selected={props.sort[0].dir === 'desc'}
           onClick={handleDescSortBtnClick}
-          >
+        >
           <span className="k-icon k-i-sort-desc-sm"></span>
         </Button>
       </ButtonGroup>
@@ -148,7 +148,7 @@ export const FileManagerToolbar = (props) => {
         text={'Sort By'}
         items={props.splitItems}
         onItemClick={handleItemClick}
-        >
+      >
       </SplitButton>
       <ButtonGroup>
         <Button
@@ -156,7 +156,7 @@ export const FileManagerToolbar = (props) => {
           togglable={true}
           selected={viewBtnGroup.gridView}
           onClick={handleGridViewChange}
-          >
+        >
           <span className="k-icon k-i-grid-layout"></span>
         </Button>
         <Button
@@ -164,24 +164,17 @@ export const FileManagerToolbar = (props) => {
           togglable={true}
           selected={viewBtnGroup.listView}
           onClick={handleListViewChange}
-          >
+        >
           <span className="k-icon k-i-grid"></span>
         </Button>
       </ButtonGroup>
       <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/components/FolderTree.tsx

@@ -46,11 +46,11 @@ export const FolderTree = (props) => {
     if (props.item.edit) {
       return (
         <span>
-        <input className='k-textbox'
+          <input className='k-textbox'
-          autoFocus
+            autoFocus
-          value={props.item.path}
+            value={props.item.path}
-          onChange={(e) => handleEdit(e, props.item)}
+            onChange={(e) => handleEdit(e, props.item)}
-          onBlur={(e) => handleBlur(e, props.item)} />
+            onBlur={(e) => handleBlur(e, props.item)} />
         </span>
       );
     }

src/index.js

@@ -1,15 +1,12 @@
 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))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();

tsconfig.json

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