5.0.0-beta.3 dependencies versions updated

Author: ahmetemrekilinc

components/NavSidebar.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 
-import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';
 import {
     Accordion,
     AccordionDetails,
@@ -193,7 +192,7 @@ const allMenuItems = [
                 itemId: '/examples/react-bootstrap',
             },
             {
-                title: 'React Native Usage',
+                title: 'React Native',
                 itemId: '/examples/react-native',
             },
             {

next.config.js

@@ -5,7 +5,7 @@ const nextConfig = {
     basePath: process.env.NEXT_PUBLIC_BASE_PATH,
     assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
     env: {
-        VERSION: '5.0.0-beta.2',
+        VERSION: '5.0.0-beta.3',
     },
 };
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-validatable-form-demo",
-    "version": "5.0.0-beta.2",
+    "version": "5.0.0-beta.3",
     "license": "MIT",
     "scripts": {
         "dev": "next dev -p 3155",
@@ -10,31 +10,31 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@date-io/date-fns": "2.16.0",
-        "@emotion/react": "11.10.4",
-        "@emotion/styled": "11.10.4",
-        "@mui/icons-material": "5.10.9",
-        "@mui/material": "5.10.9",
-        "@mui/x-date-pickers": "5.0.4",
-        "antd": "4.23.5",
-        "bootstrap": "5.2.2",
-        "date-fns": "2.29.3",
-        "next": "13.0.6",
-        "primereact": "8.6.1",
+        "@date-io/date-fns": "2.17.0",
+        "@emotion/react": "11.11.1",
+        "@emotion/styled": "11.11.0",
+        "@mui/icons-material": "5.14.16",
+        "@mui/material": "5.14.16",
+        "@mui/x-date-pickers": "6.17.0",
+        "antd": "5.10.3",
+        "bootstrap": "5.3.2",
+        "date-fns": "2.30.0",
+        "next": "14.0.1",
+        "primereact": "10.0.9",
         "react": "18.2.0",
-        "react-bootstrap": "2.5.0",
+        "react-bootstrap": "2.9.1",
         "react-dom": "18.2.0",
         "react-minimal-side-navigation": "1.9.2",
-        "react-validatable-form": "5.0.0-beta.2"
+        "react-validatable-form": "5.0.0-beta.3"
     },
     "devDependencies": {
-        "eslint": "8.23.1",
+        "eslint": "8.52.0",
         "eslint-config-next": "12.3.0",
-        "eslint-config-prettier": "8.5.0",
-        "eslint-plugin-prettier": "4.2.1",
-        "eslint-plugin-react": "7.31.8",
+        "eslint-config-prettier": "9.0.0",
+        "eslint-plugin-prettier": "5.0.1",
+        "eslint-plugin-react": "7.33.2",
         "eslint-plugin-react-hooks": "4.6.0",
-        "prettier": "2.7.1"
+        "prettier": "3.0.3"
     },
     "browserslist": {
         "production": [

pages/_app.js

@@ -378,7 +378,7 @@ function MyApp({ Component, pageProps }) {
                             focusToErrorAfterSubmit={currentSettings.focusToErrorAfterSubmit}
                             elementFocusHandler={customElementFocusHandler}
                         >
-                            <Component {...pageProps} />
+                            <Component openSettingsDialog={openSettingsDialog} {...pageProps} />
                         </ReactValidatableFormProvider>
                     </LocalizationProvider>
                 </div>

pages/customizations/apply-to-nulls.js

@@ -1,7 +1,7 @@
 import { useValidatableForm } from 'react-validatable-form';
 import TextField from '@mui/material/TextField';
 import { Autocomplete, Button } from '@mui/material';
-import { DesktopDatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { options } from '../../constants/Data';
@@ -124,14 +124,11 @@ const ApplyToNulls = () => {
                 />
             </div>
             <div>
-                <DesktopDatePicker
+                <DatePicker
                     label="dateApplyToNulls"
-                    inputFormat="MM/dd/yyyy"
                     value={getValue('val5') || null}
                     onChange={(val) => setPathValue('val5', val)}
-                    renderInput={(params) => (
-                        <TextField {...params} error={!!getError('val5')} helperText={getError('val5') || ' '} />
-                    )}
+                    slotProps={{ textField: { error: !!getError('val5'), helperText: getError('val5') || ' ' } }}
                 />
             </div>
             <div>

pages/examples/antd.js

@@ -126,12 +126,7 @@ const Antd = () => {
                 <ValidationResult isValid={isValid} />
                 <CurrentRulesInfo currentRules={rules} />
             </div>
-            <Modal
-                title={'Form Data Submitted'}
-                visible={dialogOpen}
-                footer={null}
-                onCancel={() => setDialogOpen(false)}
-            >
+            <Modal title={'Form Data Submitted'} open={dialogOpen} footer={null} onCancel={() => setDialogOpen(false)}>
                 <FormSubmitResult formData={formData} />
             </Modal>
         </ExampleUsageWrapper>

pages/rules/date.js

@@ -6,7 +6,7 @@ import Checkbox from '@mui/material/Checkbox';
 import { ruleOptions } from '../../constants/Constants';
 import ExampleUsageWrapper from '../../components/ExampleUsageWrapper';
 import TextField from '@mui/material/TextField';
-import { DesktopDatePicker, DateTimePicker } from '@mui/x-date-pickers';
+import { DatePicker, DateTimePicker } from '@mui/x-date-pickers';
 import Autocomplete from '@mui/material/Autocomplete';
 import ValidationResult from '../../components/ValidationResult';
 import CurrentRulesInfo from '../../components/CurrentRulesInfo';
@@ -69,7 +69,7 @@ const DateRule = () => {
         setWithTime(newValue);
     };
 
-    const PickerComponent = withTime ? DateTimePicker : DesktopDatePicker;
+    const PickerComponent = withTime ? DateTimePicker : DatePicker;
     const pickerFormat = withTime ? 'MM/dd/yyyy HH:mm' : 'MM/dd/yyyy';
 
     return (
@@ -85,9 +85,7 @@ const DateRule = () => {
                     inputFormat={pickerFormat}
                     value={getValue('val')}
                     onChange={(val) => setPathValue('val', val)}
-                    renderInput={(params) => (
-                        <TextField {...params} error={!!getError('val')} helperText={getError('val') || ' '} />
-                    )}
+                    slotProps={{ textField: { error: !!getError('val'), helperText: getError('val') || ' ' } }}
                 />
 
                 <Autocomplete
@@ -105,7 +103,7 @@ const DateRule = () => {
                         inputFormat={pickerFormat}
                         value={getValue('comparisonValue')}
                         onChange={(val) => setPathValue('comparisonValue', val)}
-                        renderInput={(params) => <TextField className="comparisonDateComponent" {...params} />}
+                        slotProps={{ textField: { className: 'comparisonDateComponent' } }}
                     />
                 ) : (
                     <PickerComponent
@@ -114,7 +112,7 @@ const DateRule = () => {
                         inputFormat={pickerFormat}
                         value={today}
                         onChange={() => {}}
-                        renderInput={(params) => <TextField className="comparisonDateComponent" {...params} />}
+                        slotProps={{ textField: { className: 'comparisonDateComponent' } }}
                     />
                 )}
                 <FormGroup className={'checkboxOnRight'}>

styles/globals.css

@@ -19,11 +19,6 @@ a {
     text-align: center;
 }
 
-select,
-input {
-    border: 1px solid;
-}
-
 .pureButton {
     border: 1px solid;
     padding-left: 20px;
@@ -148,10 +143,6 @@ input {
     width: 200px !important;
 }
 
-.comparisonDateComponent {
-    width: 250px !important;
-}
-
 .comparisonDiv {
     display: flex;
     gap: 10px;