@opengeoweb/form-fields 2.1.3 → 2.2.1

package/{form-fields.esm.js → index.esm.js}

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import React__default from 'react';
-import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@material-ui/core';
+import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
 import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-form';
 import moment from 'moment';
 import { isEqual } from 'lodash';
-import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import moment$1 from 'moment-timezone';
-import MomentUtils from '@date-io/moment';
+import { DateTimePicker } from '@mui/lab';
+import AdapterMoment from '@mui/lab/AdapterMoment';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -399,7 +400,7 @@ var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
 
           _onChange(changeEvent, changeEvent.target.value);
         },
-        innerRef: inputRef,
+        ref: inputRef,
         name: name
       }, otherProps), children);
     },
@@ -685,28 +686,24 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
     className: className
   }, /*#__PURE__*/React.createElement(Controller, {
     render: function render(_props) {
-      return /*#__PURE__*/React.createElement(KeyboardDateTimePicker, Object.assign({
-        autoOk: true,
-        name: name,
+      return /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({
+        desktopModeMediaQuery: "@media (min-width: 720px)",
         ampm: false,
-        format: format,
+        mask: "____/__/__ __:__",
+        inputFormat: format,
         label: label,
         value: _props.value,
         openTo: openTo,
-        error: !!errors,
         disabled: disabled,
         onChange: function onChange(value) {
           _props.onChange(getFormattedValue(value));
 
           _onChange(getFormattedValue(value));
         },
-        invalidDateMessage: null,
-        inputVariant: "filled",
         inputRef: inputRef,
         InputAdornmentProps: {
           position: 'start'
         },
-        helperText: helperText,
         InputProps: {
           endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
             style: {
@@ -714,6 +711,24 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
             },
             position: "end"
           }, "UTC")
+        },
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line react/jsx-no-duplicate-props
+        inputProps: disabled ? {
+          placeholder: ''
+        } : undefined,
+        renderInput: function renderInput(_a) {
+          _a.error;
+              var props = __rest(_a, ["error"]);
+
+          return /*#__PURE__*/React.createElement(TextField, Object.assign({
+            helperText: helperText,
+            error: !!errors,
+            name: name,
+            "data-testid": otherProps['data-testid'],
+            variant: "filled"
+          }, props));
         }
       }, otherProps));
     },
@@ -765,10 +780,10 @@ var ReactHookFormProviderWrapper = function ReactHookFormProviderWrapper(_ref2)
   var children = _ref2.children,
       _ref2$options = _ref2.options,
       options = _ref2$options === void 0 ? defaultFormOptions : _ref2$options;
-  return /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
+  return /*#__PURE__*/React__default.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
     options: options
-  }, /*#__PURE__*/React__default.createElement(MuiPickersUtilsProvider, {
-    utils: MomentUtils
   }, children));
 };
 

package/{form-fields.umd.js → index.umd.js}

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@material-ui/core'), require('react-hook-form'), require('moment'), require('lodash'), require('@material-ui/pickers'), require('moment-timezone'), require('@date-io/moment')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', 'react-hook-form', 'moment', 'lodash', '@material-ui/pickers', 'moment-timezone', '@date-io/moment'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FormFields = {}, global.React, global.core, global.reactHookForm, global.moment, global.lodash, global.pickers, global.moment$1, global.MomentUtils));
-})(this, (function (exports, React, core, reactHookForm, moment, lodash, pickers, moment$1, MomentUtils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('moment'), require('lodash'), require('moment-timezone'), require('@mui/lab'), require('@mui/lab/AdapterMoment'), require('@mui/lab/LocalizationProvider')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'moment', 'lodash', 'moment-timezone', '@mui/lab', '@mui/lab/AdapterMoment', '@mui/lab/LocalizationProvider'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FormFields = {}, global.React, global.material, global.reactHookForm, global.moment, global.lodash, global.moment$1, global.lab, global.AdapterMoment, global.LocalizationProvider));
+})(this, (function (exports, React, material, reactHookForm, moment, lodash, moment$1, lab, AdapterMoment, LocalizationProvider) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,7 +28,8 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var moment__default$1 = /*#__PURE__*/_interopDefaultLegacy(moment$1);
-    var MomentUtils__default = /*#__PURE__*/_interopDefaultLegacy(MomentUtils);
+    var AdapterMoment__default = /*#__PURE__*/_interopDefaultLegacy(AdapterMoment);
+    var LocalizationProvider__default = /*#__PURE__*/_interopDefaultLegacy(LocalizationProvider);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -85,10 +86,14 @@
         return ar;
     }
 
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
 
     /* *
@@ -348,11 +353,11 @@
           errors = _a.errors,
           props = __rest(_a, ["children", "errors"]);
 
-      return /*#__PURE__*/React__namespace.createElement(core.FormControl, __assign({
+      return /*#__PURE__*/React__namespace.createElement(material.FormControl, __assign({
         fullWidth: true
       }, props, {
         error: !!errors
-      }), children, errors && /*#__PURE__*/React__namespace.createElement(core.FormHelperText, {
+      }), children, errors && /*#__PURE__*/React__namespace.createElement(material.FormHelperText, {
         variant: "filled"
       }, errors.message || errorMessages[errors.type]));
     };
@@ -392,12 +397,12 @@
         className: className,
         disabled: disabled,
         errors: errors
-      }, /*#__PURE__*/React__namespace.createElement(core.InputLabel, {
+      }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         variant: "filled",
         id: labelId
       }, label), /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.Select, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
             labelId: labelId,
             label: label,
             inputRef: inputRef,
@@ -451,18 +456,18 @@
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
         disabled: disabled,
         errors: errors
-      }, /*#__PURE__*/React__namespace.createElement(core.InputLabel, {
+      }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         id: labelId
       }, label), /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.RadioGroup, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.RadioGroup, __assign({
             value: _props.value,
             onChange: function onChange(changeEvent) {
               _props.onChange(changeEvent.target.value);
 
               _onChange(changeEvent, changeEvent.target.value);
             },
-            innerRef: inputRef,
+            ref: inputRef,
             name: name
           }, otherProps), children);
         },
@@ -523,7 +528,7 @@
         errors: errors
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.TextField, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
             label: label,
             style: otherProps.multiline ? styles.textEditor : {},
             error: !!errors,
@@ -644,7 +649,7 @@
         errors: errors
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.TextField, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
             label: label,
             error: !!errors,
             helperText: helperText,
@@ -721,35 +726,49 @@
         className: className
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(pickers.KeyboardDateTimePicker, __assign({
-            autoOk: true,
-            name: name,
+          return /*#__PURE__*/React__namespace.createElement(lab.DateTimePicker, __assign({
+            desktopModeMediaQuery: "@media (min-width: 720px)",
             ampm: false,
-            format: format,
+            mask: "____/__/__ __:__",
+            inputFormat: format,
             label: label,
             value: _props.value,
             openTo: openTo,
-            error: !!errors,
             disabled: disabled,
             onChange: function onChange(value) {
               _props.onChange(getFormattedValue(value));
 
               _onChange(getFormattedValue(value));
             },
-            invalidDateMessage: null,
-            inputVariant: "filled",
             inputRef: inputRef,
             InputAdornmentProps: {
               position: 'start'
             },
-            helperText: helperText,
             InputProps: {
-              endAdornment: /*#__PURE__*/React__namespace.createElement(core.InputAdornment, {
+              endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
                 style: {
                   paddingTop: '16px'
                 },
                 position: "end"
               }, "UTC")
+            },
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // eslint-disable-next-line react/jsx-no-duplicate-props
+            inputProps: disabled ? {
+              placeholder: ''
+            } : undefined,
+            renderInput: function renderInput(_a) {
+              _a.error;
+                  var props = __rest(_a, ["error"]);
+
+              return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
+                helperText: helperText,
+                error: !!errors,
+                name: name,
+                "data-testid": otherProps['data-testid'],
+                variant: "filled"
+              }, props));
             }
           }, otherProps));
         },
@@ -785,10 +804,10 @@
       var children = _a.children,
           _b = _a.options,
           options = _b === void 0 ? defaultFormOptions : _b;
-      return /*#__PURE__*/React__default["default"].createElement(ReactHookFormProvider, {
+      return /*#__PURE__*/React__default["default"].createElement(LocalizationProvider__default["default"], {
+        dateAdapter: AdapterMoment__default["default"]
+      }, /*#__PURE__*/React__default["default"].createElement(ReactHookFormProvider, {
         options: options
-      }, /*#__PURE__*/React__default["default"].createElement(pickers.MuiPickersUtilsProvider, {
-        utils: MomentUtils__default["default"]
       }, children));
     };
 

package/lib/components/ReactHookFormDateTime.d.ts

@@ -1,13 +1,17 @@
 import * as React from 'react';
-import { KeyboardDateTimePickerProps } from '@material-ui/pickers';
 import { Moment } from 'moment-timezone';
+import { DateTimePickerProps } from '@mui/lab';
 import { Rules } from './types';
 export declare const getFormattedValue: (value: Moment | string) => string | Moment;
-declare type ReactHookKeyboardDateTimePickerProps = Partial<KeyboardDateTimePickerProps> & {
+declare type ReactHookKeyboardDateTimePickerProps = Partial<DateTimePickerProps> & {
     rules: Rules;
     defaultNullValue?: string;
     value?: string;
     onChange?: (value: any) => void;
+    name: string;
+    helperText?: string;
+    label?: string;
+    format?: string;
 };
 declare const ReactHookKeyboardDateTimePicker: React.FC<ReactHookKeyboardDateTimePickerProps>;
 export default ReactHookKeyboardDateTimePicker;

package/lib/components/ReactHookFormFormControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormControlProps } from '@material-ui/core';
+import { FormControlProps } from '@mui/material';
 import { FieldErrors } from 'react-hook-form';
 interface ReactHookFormFormControlProps extends FormControlProps {
     errors?: FieldErrors;

package/lib/components/ReactHookFormNumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextFieldProps } from '@material-ui/core';
+import { TextFieldProps } from '@mui/material';
 import { Rules } from './types';
 declare type InputMode = 'numeric' | 'decimal';
 export declare const convertNumericInputValue: (value: string, inputMode: InputMode) => number | string;

package/lib/components/ReactHookFormRadioGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RadioGroupProps } from '@material-ui/core';
+import { RadioGroupProps } from '@mui/material';
 import { Rules } from './types';
 declare type ReactHookFormRadioGroupProps = Partial<RadioGroupProps> & {
     rules: Rules;

package/lib/components/ReactHookFormSelect.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SelectProps } from '@material-ui/core';
+import { SelectProps } from '@mui/material';
 import { Rules } from './types';
 declare type ReactHookFormSelectProps = Partial<SelectProps> & {
     rules: Rules;

package/lib/components/ReactHookFormTextField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextFieldProps } from '@material-ui/core';
+import { TextFieldProps } from '@mui/material';
 import { Rules } from './types';
 export declare const convertTextInputValue: (value: string, inCapitals: boolean) => number | string;
 declare type ReactHookFormTextFieldProps = Partial<TextFieldProps> & {

package/lib/components/types.d.ts

@@ -1,4 +1,4 @@
-import { FormControlProps } from '@material-ui/core';
+import { FormControlProps } from '@mui/material';
 import { RegisterOptions } from 'react-hook-form';
 export declare type Rules = RegisterOptions;
 export interface ReactHookFormInput extends FormControlProps {

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
-  "main": "./form-fields.umd.js",
-  "module": "./form-fields.esm.js",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
     "react-hook-form": "^6.12.1",
-    "react": "16.14.0",
-    "@material-ui/core": "^4.11.0",
+    "react": "^17.0.2",
+    "@mui/material": "^5.2.8",
     "moment": "^2.29.0",
-    "@opengeoweb/theme": "2.1.3",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/pickers": "^3.2.10",
+    "@mui/icons-material": "^5.2.5",
+    "@opengeoweb/theme": "2.2.1",
+    "@mui/styles": "^5.2.3",
     "moment-timezone": "^0.5.31",
-    "@date-io/moment": "^1.3.13",
+    "@mui/lab": "^5.0.0-alpha.64",
     "lodash": "^4.17.20"
   }
 }