@opengeoweb/form-fields 4.2.0 → 4.4.0

package/index.esm.js

@@ -5,9 +5,9 @@ import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-fo
 import moment from 'moment';
 import { isEqual } from 'lodash';
 import moment$1 from 'moment-timezone';
-import { DateTimePicker } from '@mui/lab';
-import AdapterMoment from '@mui/lab/AdapterMoment';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -281,16 +281,62 @@ var containsNoCommas = function containsNoCommas(val) {
   return true;
 };
 
+var radioCheckboxStyle = {
+  // hides unchecked values
+  display: 'none',
+  '&+.MuiFormControlLabel-label': {
+    display: 'none'
+  },
+  // shows checked value
+  '&.Mui-checked': {
+    display: 'inherit',
+    '&+.MuiFormControlLabel-label': {
+      display: 'inherit'
+    }
+  },
+  '&.Mui-checked+.MuiFormControlLabel-label': {
+    color: 'geowebColors.typographyAndIcons.text'
+  },
+  '&.Mui-disabled.Mui-checked': {
+    color: 'geowebColors.typographyAndIcons.iconLinkActive'
+  }
+};
+
 var ReactHookFormFormControl = function ReactHookFormFormControl(_a) {
   var children = _a.children,
       errors = _a.errors,
-      props = __rest(_a, ["children", "errors"]);
+      isReadOnly = _a.isReadOnly,
+      _a$sx = _a.sx,
+      sx = _a$sx === void 0 ? {} : _a$sx,
+      _a$className = _a.className,
+      className = _a$className === void 0 ? '' : _a$className,
+      props = __rest(_a, ["children", "errors", "isReadOnly", "sx", "className"]);
 
   return /*#__PURE__*/React.createElement(FormControl, Object.assign({
-    fullWidth: true
-  }, props, {
-    error: !!errors
-  }), children, errors && /*#__PURE__*/React.createElement(FormHelperText, {
+    fullWidth: true,
+    error: !!errors,
+    className: "".concat(isReadOnly ? 'is-read-only' : '', " ").concat(className),
+    sx: Object.assign(Object.assign({}, isReadOnly && {
+      // Radio input
+      '.MuiRadio-root': radioCheckboxStyle,
+      // Checkbox input
+      '.MuiCheckbox-root': radioCheckboxStyle,
+      // Select input
+      '.MuiSelect-select.Mui-disabled': {
+        color: 'geowebColors.typographyAndIcons.text',
+        WebkitTextFillColor: 'inherit',
+        '&:before': {
+          borderColor: 'transparent'
+        }
+      },
+      '.MuiSelect-nativeInput+.MuiSvgIcon-root': {
+        display: 'none'
+      },
+      '.Mui-disabled:before': {
+        border: 'transparent'
+      }
+    }), sx)
+  }, props), children, errors && /*#__PURE__*/React.createElement(FormHelperText, {
     variant: "filled"
   }, errors.message || errorMessages[errors.type]));
 };
@@ -317,7 +363,8 @@ var ReactHookFormSelect = function ReactHookFormSelect(_a) {
       disabled = _a.disabled,
       className = _a.className,
       sx = _a.sx,
-      otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "onChange", "disabled", "className", "sx"]);
+      isReadOnly = _a.isReadOnly,
+      otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "onChange", "disabled", "className", "sx", "isReadOnly"]);
 
   var labelId = "".concat(name, "-label");
   var inputRef = React.useRef(null);
@@ -331,7 +378,8 @@ var ReactHookFormSelect = function ReactHookFormSelect(_a) {
     className: className,
     sx: sx,
     disabled: disabled,
-    errors: errors
+    errors: errors,
+    isReadOnly: isReadOnly
   }, /*#__PURE__*/React.createElement(InputLabel, {
     variant: "filled",
     id: labelId
@@ -376,7 +424,8 @@ var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
       disabled = _a$disabled === void 0 ? false : _a$disabled,
       _a$onChange = _a.onChange,
       _onChange = _a$onChange === void 0 ? function () {} : _a$onChange,
-      otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "disabled", "onChange"]);
+      isReadOnly = _a.isReadOnly,
+      otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "disabled", "onChange", "isReadOnly"]);
 
   var labelId = "".concat(name, "-label");
   var inputRef = React.useRef(null);
@@ -388,7 +437,8 @@ var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
   var errors = getErrors(name, formErrors);
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     disabled: disabled,
-    errors: errors
+    errors: errors,
+    isReadOnly: isReadOnly
   }, /*#__PURE__*/React.createElement(InputLabel, {
     id: labelId
   }, label), /*#__PURE__*/React.createElement(Controller, {
@@ -440,7 +490,9 @@ var ReactHookFormTextField = function ReactHookFormTextField(_a) {
       sx = _a.sx,
       _a$onChange = _a.onChange,
       _onChange = _a$onChange === void 0 ? function () {} : _a$onChange,
-      otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "upperCase", "helperText", "className", "sx", "onChange"]);
+      isReadOnly = _a.isReadOnly,
+      InputProps = _a.InputProps,
+      otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "upperCase", "helperText", "className", "sx", "onChange", "isReadOnly", "InputProps"]);
 
   var inputRef = React.useRef(null);
 
@@ -453,7 +505,8 @@ var ReactHookFormTextField = function ReactHookFormTextField(_a) {
     className: className,
     sx: sx,
     disabled: disabled,
-    errors: errors
+    errors: errors,
+    isReadOnly: isReadOnly
   }, /*#__PURE__*/React.createElement(Controller, {
     render: function render(_props) {
       return /*#__PURE__*/React.createElement(TextField, Object.assign({
@@ -473,7 +526,10 @@ var ReactHookFormTextField = function ReactHookFormTextField(_a) {
           _onChange(null);
         },
         disabled: disabled,
-        inputRef: inputRef
+        inputRef: inputRef,
+        InputProps: Object.assign(Object.assign({}, InputProps), isReadOnly && {
+          readOnly: true
+        })
       }, otherProps));
     },
     name: name,
@@ -572,7 +628,8 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_a) {
       sx = _a.sx,
       _a$onChange = _a.onChange,
       _onChange = _a$onChange === void 0 ? function () {} : _a$onChange,
-      otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "inputMode", "helperText", "className", "sx", "onChange"]);
+      isReadOnly = _a.isReadOnly,
+      otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "inputMode", "helperText", "className", "sx", "onChange", "isReadOnly"]);
 
   var inputRef = React.useRef(null);
 
@@ -600,7 +657,8 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_a) {
     className: className,
     sx: sx,
     disabled: disabled,
-    errors: errors
+    errors: errors,
+    isReadOnly: isReadOnly
   }, /*#__PURE__*/React.createElement(Controller, {
     render: function render(_props) {
       return /*#__PURE__*/React.createElement(TextField, Object.assign({
@@ -622,7 +680,11 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_a) {
         },
         onKeyDown: onKeyDown,
         disabled: disabled,
-        inputRef: inputRef
+        inputRef: inputRef,
+        // eslint-disable-next-line react/jsx-no-duplicate-props
+        InputProps: Object.assign(Object.assign({}, isReadOnly && {
+          readOnly: true
+        }), otherProps.InputProps)
       }, otherProps));
     },
     name: name,
@@ -663,7 +725,8 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
       _onChange = _a$onChange === void 0 ? function () {} : _a$onChange,
       className = _a.className,
       sx = _a.sx,
-      otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx"]);
+      isReadOnly = _a.isReadOnly,
+      otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly"]);
 
   var inputRef = React.useRef(null);
 
@@ -677,7 +740,8 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
     disabled: disabled,
     errors: errors,
     className: className,
-    sx: sx
+    sx: sx,
+    isReadOnly: isReadOnly
   }, /*#__PURE__*/React.createElement(Controller, {
     render: function render(_props) {
       return /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({
@@ -694,18 +758,25 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
 
           _onChange(getFormattedValue(value));
         },
+        // if focusedView is removed, it will throw an error when switching day to month mode
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        focusedView: "month",
         inputRef: inputRef,
         InputAdornmentProps: {
           position: 'start'
         },
-        InputProps: {
+        InputProps: Object.assign(Object.assign({
           endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
             style: {
               paddingTop: '16px'
             },
             position: "end"
           }, "UTC")
-        },
+        }, isReadOnly && {
+          readOnly: true
+        }), otherProps.InputProps),
+        hideTabs: false,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         // eslint-disable-next-line react/jsx-no-duplicate-props
@@ -794,8 +865,8 @@ var ReactHookFormProviderWrapper = function ReactHookFormProviderWrapper(_ref2)
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_ref) {

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    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';
+    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/x-date-pickers'), require('@mui/x-date-pickers/AdapterMoment'), require('@mui/x-date-pickers/LocalizationProvider')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'moment', 'lodash', 'moment-timezone', '@mui/x-date-pickers', '@mui/x-date-pickers/AdapterMoment', '@mui/x-date-pickers/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.xDatePickers, global.AdapterMoment, global.LocalizationProvider));
+})(this, (function (exports, React, material, reactHookForm, moment, lodash, moment$1, xDatePickers, AdapterMoment, LocalizationProvider) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,8 +28,6 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var moment__default$1 = /*#__PURE__*/_interopDefaultLegacy(moment$1);
-    var AdapterMoment__default = /*#__PURE__*/_interopDefaultLegacy(AdapterMoment);
-    var LocalizationProvider__default = /*#__PURE__*/_interopDefaultLegacy(LocalizationProvider);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -348,16 +346,62 @@
       return true;
     };
 
+    var radioCheckboxStyle = {
+      // hides unchecked values
+      display: 'none',
+      '&+.MuiFormControlLabel-label': {
+        display: 'none'
+      },
+      // shows checked value
+      '&.Mui-checked': {
+        display: 'inherit',
+        '&+.MuiFormControlLabel-label': {
+          display: 'inherit'
+        }
+      },
+      '&.Mui-checked+.MuiFormControlLabel-label': {
+        color: 'geowebColors.typographyAndIcons.text'
+      },
+      '&.Mui-disabled.Mui-checked': {
+        color: 'geowebColors.typographyAndIcons.iconLinkActive'
+      }
+    };
+
     var ReactHookFormFormControl = function ReactHookFormFormControl(_a) {
       var children = _a.children,
           errors = _a.errors,
-          props = __rest(_a, ["children", "errors"]);
+          isReadOnly = _a.isReadOnly,
+          _b = _a.sx,
+          sx = _b === void 0 ? {} : _b,
+          _c = _a.className,
+          className = _c === void 0 ? '' : _c,
+          props = __rest(_a, ["children", "errors", "isReadOnly", "sx", "className"]);
 
       return /*#__PURE__*/React__namespace.createElement(material.FormControl, __assign({
-        fullWidth: true
-      }, props, {
-        error: !!errors
-      }), children, errors && /*#__PURE__*/React__namespace.createElement(material.FormHelperText, {
+        fullWidth: true,
+        error: !!errors,
+        className: (isReadOnly ? 'is-read-only' : '') + " " + className,
+        sx: __assign(__assign({}, isReadOnly && {
+          // Radio input
+          '.MuiRadio-root': radioCheckboxStyle,
+          // Checkbox input
+          '.MuiCheckbox-root': radioCheckboxStyle,
+          // Select input
+          '.MuiSelect-select.Mui-disabled': {
+            color: 'geowebColors.typographyAndIcons.text',
+            WebkitTextFillColor: 'inherit',
+            '&:before': {
+              borderColor: 'transparent'
+            }
+          },
+          '.MuiSelect-nativeInput+.MuiSvgIcon-root': {
+            display: 'none'
+          },
+          '.Mui-disabled:before': {
+            border: 'transparent'
+          }
+        }), sx)
+      }, props), children, errors && /*#__PURE__*/React__namespace.createElement(material.FormHelperText, {
         variant: "filled"
       }, errors.message || errorMessages[errors.type]));
     };
@@ -384,7 +428,8 @@
           disabled = _a.disabled,
           className = _a.className,
           sx = _a.sx,
-          otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "onChange", "disabled", "className", "sx"]);
+          isReadOnly = _a.isReadOnly,
+          otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "onChange", "disabled", "className", "sx", "isReadOnly"]);
 
       var labelId = name + "-label";
       var inputRef = React__namespace.useRef(null);
@@ -398,7 +443,8 @@
         className: className,
         sx: sx,
         disabled: disabled,
-        errors: errors
+        errors: errors,
+        isReadOnly: isReadOnly
       }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         variant: "filled",
         id: labelId
@@ -443,7 +489,8 @@
           disabled = _c === void 0 ? false : _c,
           _d = _a.onChange,
           _onChange = _d === void 0 ? function () {} : _d,
-          otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "disabled", "onChange"]);
+          isReadOnly = _a.isReadOnly,
+          otherProps = __rest(_a, ["name", "label", "defaultValue", "children", "rules", "disabled", "onChange", "isReadOnly"]);
 
       var labelId = name + "-label";
       var inputRef = React__namespace.useRef(null);
@@ -455,7 +502,8 @@
       var errors = getErrors(name, formErrors);
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
         disabled: disabled,
-        errors: errors
+        errors: errors,
+        isReadOnly: isReadOnly
       }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         id: labelId
       }, label), /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
@@ -507,7 +555,9 @@
           sx = _a.sx,
           _f = _a.onChange,
           _onChange = _f === void 0 ? function () {} : _f,
-          otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "upperCase", "helperText", "className", "sx", "onChange"]);
+          isReadOnly = _a.isReadOnly,
+          InputProps = _a.InputProps,
+          otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "upperCase", "helperText", "className", "sx", "onChange", "isReadOnly", "InputProps"]);
 
       var inputRef = React__namespace.useRef(null);
 
@@ -520,7 +570,8 @@
         className: className,
         sx: sx,
         disabled: disabled,
-        errors: errors
+        errors: errors,
+        isReadOnly: isReadOnly
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
           return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
@@ -540,7 +591,10 @@
               _onChange(null);
             },
             disabled: disabled,
-            inputRef: inputRef
+            inputRef: inputRef,
+            InputProps: __assign(__assign({}, InputProps), isReadOnly && {
+              readOnly: true
+            })
           }, otherProps));
         },
         name: name,
@@ -610,7 +664,8 @@
           sx = _a.sx,
           _f = _a.onChange,
           _onChange = _f === void 0 ? function () {} : _f,
-          otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "inputMode", "helperText", "className", "sx", "onChange"]);
+          isReadOnly = _a.isReadOnly,
+          otherProps = __rest(_a, ["name", "label", "defaultValue", "rules", "disabled", "inputMode", "helperText", "className", "sx", "onChange", "isReadOnly"]);
 
       var inputRef = React__namespace.useRef(null);
 
@@ -640,7 +695,8 @@
         className: className,
         sx: sx,
         disabled: disabled,
-        errors: errors
+        errors: errors,
+        isReadOnly: isReadOnly
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
           return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
@@ -662,7 +718,11 @@
             },
             onKeyDown: onKeyDown,
             disabled: disabled,
-            inputRef: inputRef
+            inputRef: inputRef,
+            // eslint-disable-next-line react/jsx-no-duplicate-props
+            InputProps: __assign(__assign({}, isReadOnly && {
+              readOnly: true
+            }), otherProps.InputProps)
           }, otherProps));
         },
         name: name,
@@ -703,7 +763,8 @@
           _onChange = _g === void 0 ? function () {} : _g,
           className = _a.className,
           sx = _a.sx,
-          otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx"]);
+          isReadOnly = _a.isReadOnly,
+          otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly"]);
 
       var inputRef = React__namespace.useRef(null);
 
@@ -717,10 +778,11 @@
         disabled: disabled,
         errors: errors,
         className: className,
-        sx: sx
+        sx: sx,
+        isReadOnly: isReadOnly
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(lab.DateTimePicker, __assign({
+          return /*#__PURE__*/React__namespace.createElement(xDatePickers.DateTimePicker, __assign({
             desktopModeMediaQuery: "@media (min-width: 720px)",
             ampm: false,
             mask: "____/__/__ __:__",
@@ -734,18 +796,25 @@
 
               _onChange(getFormattedValue(value));
             },
+            // if focusedView is removed, it will throw an error when switching day to month mode
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            focusedView: "month",
             inputRef: inputRef,
             InputAdornmentProps: {
               position: 'start'
             },
-            InputProps: {
+            InputProps: __assign(__assign({
               endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
                 style: {
                   paddingTop: '16px'
                 },
                 position: "end"
               }, "UTC")
-            },
+            }, isReadOnly && {
+              readOnly: true
+            }), otherProps.InputProps),
+            hideTabs: false,
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             // eslint-disable-next-line react/jsx-no-duplicate-props
@@ -798,8 +867,8 @@
       var children = _a.children,
           _b = _a.options,
           options = _b === void 0 ? defaultFormOptions : _b;
-      return /*#__PURE__*/React__default["default"].createElement(LocalizationProvider__default["default"], {
-        dateAdapter: AdapterMoment__default["default"]
+      return /*#__PURE__*/React__default["default"].createElement(LocalizationProvider.LocalizationProvider, {
+        dateAdapter: AdapterMoment.AdapterMoment
       }, /*#__PURE__*/React__default["default"].createElement(ReactHookFormProvider, {
         options: options
       }, children));

package/lib/components/Providers.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { UseFormOptions } from 'react-hook-form';
+export declare const zeplinLinks: {
+    name: string;
+    link: string;
+}[];
+export interface StoryLayoutProps {
+    children?: React.ReactNode;
+}
+export interface FormFieldsWrapperProps {
+    children?: React.ReactNode;
+    options?: UseFormOptions;
+    isDarkTheme?: boolean;
+}
+export declare const FormFieldsWrapper: React.FC<FormFieldsWrapperProps>;
+interface FormFieldsWrapperOldThemeProps {
+    children: React.ReactNode;
+    options?: UseFormOptions;
+}
+export declare const FormFieldsWrapperOldTheme: React.FC<FormFieldsWrapperOldThemeProps>;
+export {};

package/lib/components/Providers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/ReactHookFormDateTime.d.ts

@@ -1,19 +1,16 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material';
 import { Moment } from 'moment-timezone';
-import { DateTimePickerProps } from '@mui/lab';
-import { Rules } from './types';
+import { DateTimePickerProps } from '@mui/x-date-pickers';
+import { DateTimePickerSlotsComponent } from '@mui/x-date-pickers/DateTimePicker/DateTimePicker';
+import { ReactHookFormInput } from './types';
 export declare const getFormattedValue: (value: Moment | string) => string | Moment;
-declare type ReactHookKeyboardDateTimePickerProps = Partial<DateTimePickerProps> & {
-    rules: Rules;
+declare type ReactHookKeyboardDateTimePickerProps = Partial<Partial<DateTimePickerProps<DateTimePickerSlotsComponent, Moment>>> & ReactHookFormInput<{
     defaultNullValue?: string | null;
     value?: string;
     onChange?: (value: any) => void;
-    name: string;
-    helperText?: string;
-    label?: string;
     format?: string;
     sx?: SxProps<Theme>;
-};
+}>;
 declare const ReactHookKeyboardDateTimePicker: React.FC<ReactHookKeyboardDateTimePickerProps>;
 export default ReactHookKeyboardDateTimePicker;

package/lib/components/ReactHookFormDateTime.stories.d.ts

@@ -3,8 +3,36 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const DateTime: () => React.ReactElement;
-export declare const DateTimeSnapshot: {
+export declare const DateTime: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const DateTimeLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const DateTimeDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const DateTimeOldTheme: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/ReactHookFormFormControl.d.ts

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { FormControlProps } from '@mui/material';
 import { FieldErrors } from 'react-hook-form';
 interface ReactHookFormFormControlProps extends FormControlProps {
+    children?: React.ReactNode;
     errors?: FieldErrors;
+    isReadOnly?: boolean;
 }
 declare const ReactHookFormFormControl: React.FC<ReactHookFormFormControlProps>;
 export default ReactHookFormFormControl;

package/lib/components/ReactHookFormHiddenInput.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { RegisterOptions } from 'react-hook-form';
-interface ReactHookFormHiddenInputProps {
-    name: string;
+import { ReactHookFormInput } from './types';
+declare type ReactHookFormHiddenInputProps = ReactHookFormInput<{
     defaultValue?: unknown;
-    rules?: RegisterOptions;
-}
+}>;
 declare const ReactHookFormHiddenInput: React.FC<ReactHookFormHiddenInputProps>;
 export default ReactHookFormHiddenInput;

package/lib/components/ReactHookFormHiddenInput.stories.d.ts

@@ -4,3 +4,5 @@ declare const _default: {
 };
 export default _default;
 export declare const HiddenInput: () => React.ReactElement;
+export declare const HiddenInputDarkTheme: () => React.ReactElement;
+export declare const HiddenInputOldTheme: () => React.ReactElement;

package/lib/components/ReactHookFormNumberField.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material';
-import { Rules } from './types';
+import { ReactHookFormInput } from './types';
 declare type InputMode = 'numeric' | 'decimal';
 export declare const convertNumericInputValue: (value: string, inputMode: InputMode) => number | string;
 export declare const parseInput: (value?: string | number | null | undefined) => string;
 export declare const getAllowedKeys: (inputMode?: InputMode) => string[];
-declare type ReactHookFormNumberFieldProps = Partial<TextFieldProps> & {
-    rules: Rules;
+declare type ReactHookFormNumberFieldProps = Partial<TextFieldProps> & ReactHookFormInput<{
     inputMode?: InputMode;
-};
+}>;
 declare const ReactHookFormNumberField: React.FC<ReactHookFormNumberFieldProps>;
 export default ReactHookFormNumberField;

package/lib/components/ReactHookFormNumberField.stories.d.ts

@@ -3,8 +3,36 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const NumberField: () => React.ReactElement;
-export declare const NumberFieldSnapshotWrapped: {
+export declare const NumberField: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLinks: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const NumberFieldLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const NumberFieldDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const NumberFieldOldTheme: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/ReactHookFormProvider.stories.d.ts

@@ -3,4 +3,36 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const FormProvider: () => React.ReactElement;
+export declare const FormProvider: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const FormProviderLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const FormProviderDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const FormProviderOldTheme: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/ReactHookFormRadioGroup.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { RadioGroupProps } from '@mui/material';
-import { Rules } from './types';
-declare type ReactHookFormRadioGroupProps = Partial<RadioGroupProps> & {
-    rules: Rules;
-    label?: string;
+import { ReactHookFormInput } from './types';
+declare type ReactHookFormRadioGroupProps = Partial<RadioGroupProps> & ReactHookFormInput<{
     disabled?: boolean;
-};
+    children?: React.ReactNode;
+}>;
 declare const ReactHookFormRadioGroup: React.FC<ReactHookFormRadioGroupProps>;
 export default ReactHookFormRadioGroup;

package/lib/components/ReactHookFormRadioGroup.stories.d.ts

@@ -3,8 +3,36 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const RadioGroup: () => React.ReactElement;
-export declare const RadioGroupSnapshot: {
+export declare const RadioGroup: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const RadioGroupLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const RadioGroupDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const RadioGroupOldTheme: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/ReactHookFormSelect.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { SelectProps } from '@mui/material';
-import { Rules } from './types';
-declare type ReactHookFormSelectProps = Partial<SelectProps> & {
-    rules: Rules;
+import { ReactHookFormInput } from './types';
+declare type ReactHookFormSelectProps = Partial<SelectProps> & ReactHookFormInput<{
     onChange?: (value: any) => void;
-};
+}>;
 declare const ReactHookFormSelect: React.FC<ReactHookFormSelectProps>;
 export default ReactHookFormSelect;

package/lib/components/ReactHookFormSelect.stories.d.ts

@@ -4,7 +4,27 @@ declare const _default: {
 };
 export default _default;
 export declare const Select: () => React.ReactElement;
-export declare const SelectSnapshot: {
+export declare const SelectLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const SelectDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const SelectOldTheme: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/ReactHookFormTextField.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material';
-import { Rules } from './types';
+import { ReactHookFormInput } from './types';
 export declare const convertTextInputValue: (value: string, inCapitals: boolean) => number | string;
-declare type ReactHookFormTextFieldProps = Partial<TextFieldProps> & {
-    rules: Rules;
+declare type ReactHookFormTextFieldProps = Partial<TextFieldProps> & ReactHookFormInput<{
     upperCase?: boolean;
-};
+}>;
 declare const ReactHookFormTextField: React.FC<ReactHookFormTextFieldProps>;
 export default ReactHookFormTextField;

package/lib/components/ReactHookFormTextField.stories.d.ts

@@ -3,8 +3,36 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const TextField: () => React.ReactElement;
-export declare const TextFieldSnapshot: {
+export declare const TextField: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const TextFieldLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const TextFieldDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const TextFieldOldTheme: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/types.d.ts

@@ -1,9 +1,8 @@
-import { FormControlProps } from '@mui/material';
 import { RegisterOptions } from 'react-hook-form';
-export declare type Rules = RegisterOptions;
-export interface ReactHookFormInput extends FormControlProps {
+export declare type ReactHookFormInput<T> = T & {
     name: string;
     label?: string;
-    rules?: Rules;
+    rules?: RegisterOptions;
     helperText?: string;
-}
+    isReadOnly?: boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   "peerDependencies": {
     "react-hook-form": "^6.12.1",
     "react": "^17.0.2",
-    "@mui/material": "^5.2.8",
+    "@mui/material": "^5.10.8",
+    "@opengeoweb/theme": "4.4.0",
     "moment": "^2.29.0",
-    "@opengeoweb/theme": "4.2.0",
     "moment-timezone": "^0.5.31",
-    "@mui/lab": "^5.0.0-alpha.64",
+    "@mui/x-date-pickers": "^5.0.4",
     "lodash": "^4.17.20"
   }
 }