fix: issues resolved

Author: vip-git

package-lock.json

@@ -34,7 +34,7 @@
     "test"
   ],
   "dependencies": {
-    "@date-io/moment": "1.3.9",
+    "@date-io/moment": "2.11.0",
     "@emotion/react": "11.4.1",
     "@emotion/styled": "11.3.0",
     "@mui/icons-material": "5.0.0",

package.json

@@ -90,7 +90,7 @@
             "utils": ["@react-jsonschema-form-utils/enum-utils"]
         },
         "@react-jsonschema-form-components/material-picker": {
-            "version": "4.0.2",
+            "version": "4.0.3",
             "type": "string",
             "hasDist": true,
             "isEnum": false,

scripts/generator/components.json

@@ -15,7 +15,7 @@
     "@react-jsonschema-form-components/material-auto-complete": "3.0.0",
     "@react-jsonschema-form-components/material-checkbox": "3.0.0",
     "@react-jsonschema-form-components/material-input": "3.0.0",
-    "@react-jsonschema-form-components/material-picker": "4.0.1",
+    "@react-jsonschema-form-components/material-picker": "4.0.3",
     "@react-jsonschema-form-components/material-radio-group": "3.0.0",
     "@react-jsonschema-form-components/material-select": "3.0.0",
     "@react-jsonschema-form-components/react-select": "4.0.0",

scripts/generator/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-jsonschema-form-components/material-picker",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "author": "Vipin Tanna",
   "main": "dist/index.js",
   "scripts": {

scripts/generator/package.json

@@ -1,6 +1,9 @@
 // Library
 import React from 'react';
 import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import EventIcon from '@mui/icons-material/Event';
 import pickerProps, { renderPickerComp } from './picker.props';
 
 export default ({
@@ -15,6 +18,7 @@ export default ({
   onChange, 
   ...rest
 }) => {
+  const [open, setOpen] = React.useState(false)
   const pickerType = uiSchema['ui:props']?.variant || uiSchema['ui:widget'] || type;
   const { PickerComp, placeholder, format } = renderPickerComp(pickerType);
   return (
@@ -29,9 +33,30 @@ export default ({
             <PickerComp
                 mask={placeholder}
                 label={label}
-                value={(value === undefined) ? null : value}
-                maxDate={'2200-01-01'}
-                renderInput={(params) => <TextField {...params} value={(value === undefined) ? null : value} />}
+                toolbarTitle={label}
+                value={typeof value === 'undefined' ? null : value}
+                inputFormat={format}
+                open={open}
+                onClose={() => setOpen(false)}
+                renderInput={(params) => (
+                  <TextField 
+                    {...params} 
+                    style={{ width: '100%'}}
+                    onClick={() => setOpen(true)}
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position='end'>
+                          <IconButton
+                            aria-label='date'
+                            onClick={() => setOpen(true)}
+                          >
+                            <EventIcon />
+                          </IconButton>
+                        </InputAdornment>
+                      )
+                    }}
+                  />
+                )}
                 {...pickerProps({ onChange })}
                 {...options}
             />

src/fields/components/Picker/package.json

@@ -1,10 +1,18 @@
 // Library
 import MobileDatePicker from '@mui/lab/MobileDatePicker';
+import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
 import MobileDateTimePicker from '@mui/lab/MobileDateTimePicker';
 import TimePicker from '@mui/lab/TimePicker';
 
 export const renderPickerComp = (type) => {
   switch (type) {
+    case 'material-desktop-date':
+      return {
+        PickerComp: DesktopDatePicker,
+        maskInput: [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+        format: 'DD-MM-YYYY',
+        placeholder: '__-__-____',
+      };
     case 'material-date':
       return {
         PickerComp: MobileDatePicker,