@data-driven-forms/mui-component-mapper 3.15.2 → 3.16.0-v5-beta

package/form-template/form-template.js

@@ -13,21 +13,23 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Button = _interopRequireDefault(require("@mui/material/node/Button"));
 
-var _styles = require("@material-ui/core/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/node/Typography"));
 
-var _Alert = _interopRequireDefault(require("@material-ui/lab/Alert"));
+var _Alert = _interopRequireDefault(require("@mui/material/node/Alert"));
 
-var _AlertTitle = _interopRequireDefault(require("@material-ui/lab/AlertTitle"));
+var _AlertTitle = _interopRequireDefault(require("@mui/material/node/AlertTitle"));
 
 var _formTemplate = _interopRequireDefault(require("@data-driven-forms/common/form-template"));
 
@@ -39,23 +41,25 @@ var _excluded = ["children", "GridContainerProps", "GridProps"],
     _excluded4 = ["children", "GridProps"],
     _excluded5 = ["label", "variant", "children", "buttonType"],
     _excluded6 = ["title", "description", "TitleProps", "className"];
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    buttonGroup: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      '&>button:not(last-child)': {
-        marginLeft: 8
-      }
+var PREFIX = 'MuiFormTemplate';
+var classes = {
+  buttonGroup: "".concat(PREFIX, "-buttonGroup")
+};
+var StyledButtonGroup = (0, _styles.styled)(_Grid["default"])(function () {
+  return (0, _defineProperty2["default"])({}, "& .".concat(classes.buttonGroup), {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    '&>button:not(last-child)': {
+      marginLeft: 8
     }
-  };
+  });
 });
 
-var Form = function Form(_ref) {
-  var children = _ref.children,
-      GridContainerProps = _ref.GridContainerProps,
-      GridProps = _ref.GridProps,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var Form = function Form(_ref2) {
+  var children = _ref2.children,
+      GridContainerProps = _ref2.GridContainerProps,
+      GridProps = _ref2.GridProps,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
     item: true,
     xs: 12
@@ -63,8 +67,8 @@ var Form = function Form(_ref) {
     noValidate: true
   }, props), /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
     container: true,
+    rowSpacing: 2,
     item: true,
-    spacing: 2,
     xs: 12
   }, GridContainerProps), children)));
 };
@@ -75,10 +79,10 @@ Form.propTypes = {
   GridContainerProps: _propTypes["default"].object
 };
 
-var Description = function Description(_ref2) {
-  var children = _ref2.children,
-      GridProps = _ref2.GridProps,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+var Description = function Description(_ref3) {
+  var children = _ref3.children,
+      GridProps = _ref3.GridProps,
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
   return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
     item: true,
     xs: 12
@@ -93,10 +97,10 @@ Description.propTypes = {
   GridProps: _propTypes["default"].object
 };
 
-var Title = function Title(_ref3) {
-  var children = _ref3.children,
-      GridProps = _ref3.GridProps,
-      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+var Title = function Title(_ref4) {
+  var children = _ref4.children,
+      GridProps = _ref4.GridProps,
+      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
   return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
     item: true,
     xs: 12
@@ -111,12 +115,11 @@ Title.propTypes = {
   GridProps: _propTypes["default"].object
 };
 
-var ButtonGroup = function ButtonGroup(_ref4) {
-  var children = _ref4.children,
-      GridProps = _ref4.GridProps,
-      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded4);
-  var classes = useStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
+var ButtonGroup = function ButtonGroup(_ref5) {
+  var children = _ref5.children,
+      GridProps = _ref5.GridProps,
+      props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded4);
+  return /*#__PURE__*/_react["default"].createElement(StyledButtonGroup, (0, _extends2["default"])({
     item: true,
     xs: 12
   }, GridProps), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
@@ -129,12 +132,12 @@ ButtonGroup.propTypes = {
   GridProps: _propTypes["default"].object
 };
 
-var Button = function Button(_ref5) {
-  var label = _ref5.label,
-      variant = _ref5.variant,
-      children = _ref5.children,
-      buttonType = _ref5.buttonType,
-      props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded5);
+var Button = function Button(_ref6) {
+  var label = _ref6.label,
+      variant = _ref6.variant,
+      children = _ref6.children,
+      buttonType = _ref6.buttonType,
+      props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded5);
   return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     color: variant,
     variant: "contained"
@@ -147,21 +150,18 @@ Button.propTypes = {
   variant: _propTypes["default"].string,
   buttonType: _propTypes["default"].string
 };
-var useAlertStyles = (0, _styles.makeStyles)(function () {
+var StyledAlert = (0, _styles.styled)(_Alert["default"])(function () {
   return {
-    alert: {
+    '& .alert': {
       width: '100%',
       margin: 8
     }
   };
 });
 
-var FormError = function FormError(_ref6) {
-  var formError = _ref6.formError,
-      alertProps = _ref6.alertProps;
-
-  var _useAlertStyles = useAlertStyles(),
-      alert = _useAlertStyles.alert;
+var FormError = function FormError(_ref7) {
+  var formError = _ref7.formError,
+      alertProps = _ref7.alertProps;
 
   if ((0, _typeof2["default"])(formError) === 'object' && (formError.title || formError.title)) {
     var title = formError.title,
@@ -169,18 +169,18 @@ var FormError = function FormError(_ref6) {
         TitleProps = formError.TitleProps,
         className = formError.className,
         props = (0, _objectWithoutProperties2["default"])(formError, _excluded6);
-    return /*#__PURE__*/_react["default"].createElement(_Alert["default"], (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(StyledAlert, (0, _extends2["default"])({
       severity: "error"
     }, props, alertProps, {
-      className: (0, _clsx["default"])(alert, alertProps === null || alertProps === void 0 ? void 0 : alertProps.className, className)
+      className: (0, _clsx["default"])('alert', alertProps === null || alertProps === void 0 ? void 0 : alertProps.className, className)
     }), title && /*#__PURE__*/_react["default"].createElement(_AlertTitle["default"], TitleProps, title), description);
   }
 
   if (formError) {
-    return /*#__PURE__*/_react["default"].createElement(_Alert["default"], (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(StyledAlert, (0, _extends2["default"])({
       severity: "error"
     }, alertProps, {
-      className: (0, _clsx["default"])(alert, alertProps === null || alertProps === void 0 ? void 0 : alertProps.className)
+      className: (0, _clsx["default"])('alert', alertProps === null || alertProps === void 0 ? void 0 : alertProps.className)
     }), formError);
   }
 

package/multiple-chioce-list/multiple-choice-list.d.ts

@@ -7,7 +7,7 @@ import {
   CheckboxProps as MUICheckboxProps,
   FormLabelProps as MUIFormLabelProps,
   FormHelperTextProps as MUIFormHelperTextProps
-} from '@material-ui/core';
+} from '@mui/material';
 
 interface InternalCheckboxProps extends AnyObject {
   FormFieldGridProps: GridProps,

package/multiple-chioce-list/multiple-choice-list.js

@@ -19,19 +19,19 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/node/Checkbox"));
 
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/node/FormControlLabel"));
 
-var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/node/FormLabel"));
 
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
+var _FormGroup = _interopRequireDefault(require("@mui/material/node/FormGroup"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _FormControl = _interopRequireDefault(require("@mui/material/node/FormControl"));
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/node/FormHelperText"));
 
 var _multipleChoiceList = _interopRequireWildcard(require("@data-driven-forms/common/multiple-choice-list"));
 
@@ -99,7 +99,9 @@ var Wrapper = function Wrapper(_ref2) {
       FormHelperTextProps = _useContext2.FormHelperTextProps;
 
   return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
-    container: true
+    container: true,
+    item: true,
+    xs: 12
   }, FormFieldGridProps), /*#__PURE__*/_react["default"].createElement(_FormControl["default"], (0, _extends2["default"])({
     required: isRequired,
     error: !!invalid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/mui-component-mapper",
-  "version": "3.15.2",
+  "version": "3.16.0-v5-beta",
   "description": "Component mapper for Material ui component mapper form data-driven-forms.",
   "main": "index.js",
   "module": "esm/index.js",
@@ -25,28 +25,25 @@
     "directory": "packages/mui-component-mapper"
   },
   "devDependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/styles": "^4.10.0"
+    "@mui/icons-material": "^5.0.4",
+    "@mui/material": "^5.0.4",
+    "@mui/styles": "^5.0.1"
   },
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": ">=3.2.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/styles": "^4.9.14",
+    "@mui/icons-material": "^5.0.4",
+    "@mui/material": "^5.0.4",
+    "@mui/styles": "^5.0.1",
     "prop-types": ">=15.7.2",
-    "react": "^16.13.1 || ^17.0.2",
-    "react-dom": "^16.13.1 || ^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",
-    "@date-io/date-fns": "^1.0.1",
-    "@date-io/moment": "^1.0.1",
-    "@material-ui/pickers": "^3.2.10",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/lab": "^5.0.0-alpha.51",
     "clsx": "^1.0.4",
-    "date-fns": "^1.30.1",
-    "lodash": "^4.17.21",
-    "moment": "^2.23.0",
-    "@material-ui/lab": "^4.0.0-alpha.53"
+    "lodash": "^4.17.21"
   }
 }

package/plain-text/plain-text.d.ts

@@ -1,4 +1,4 @@
-import { TypographyProps } from "@material-ui/core";
+import { TypographyProps } from "@mui/material";
 import { ElementType, ReactNode } from "react";
 
 export interface PlainTextProps extends Omit<TypographyProps, 'component'> {

package/plain-text/plain-text.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/node/Typography"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/radio/radio.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
-import { RadioProps as MuiRadioProps, GridProps, FormControlProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@material-ui/core';
+import { RadioProps as MuiRadioProps, GridProps, FormControlProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@mui/material';
 import { ReactNode } from "react";
 
 export interface RadioOption extends AnyObject {

package/radio/radio.js

@@ -9,28 +9,28 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _styles = require("@mui/material/styles");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
+var _Radio = _interopRequireDefault(require("@mui/material/node/Radio"));
 
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/node/FormControlLabel"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _FormControl = _interopRequireDefault(require("@mui/material/node/FormControl"));
 
-var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/node/FormLabel"));
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/node/FormHelperText"));
 
 var _multipleChoiceList = require("@data-driven-forms/common/multiple-choice-list");
 
-var _styles = require("@material-ui/core/styles");
-
 var _formFieldGrid = _interopRequireDefault(require("../form-field-grid/form-field-grid"));
 
 var _validationError = require("../validation-error/validation-error");
@@ -46,26 +46,28 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    grid: {
-      '&:first-child': {
-        marginTop: 8
-      }
+var PREFIX = 'Radio';
+var classes = {
+  grid: "".concat(PREFIX, "-grid")
+};
+var StyledFormFieldGrid = (0, _styles.styled)(_formFieldGrid["default"])(function () {
+  return (0, _defineProperty2["default"])({}, "&.".concat(classes.grid), {
+    '&:first-of-type': {
+      marginTop: 8
     }
-  };
+  });
 });
 
-var RadioOption = function RadioOption(_ref) {
-  var name = _ref.name,
-      option = _ref.option,
-      isDisabled = _ref.isDisabled,
-      isReadOnly = _ref.isReadOnly,
-      FormControlLabelProps = _ref.FormControlLabelProps,
-      _ref$RadioProps = _ref.RadioProps,
-      inputProps = _ref$RadioProps.inputProps,
-      RadioProps = (0, _objectWithoutProperties2["default"])(_ref$RadioProps, _excluded),
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
+var RadioOption = function RadioOption(_ref2) {
+  var name = _ref2.name,
+      option = _ref2.option,
+      isDisabled = _ref2.isDisabled,
+      isReadOnly = _ref2.isReadOnly,
+      FormControlLabelProps = _ref2.FormControlLabelProps,
+      _ref2$RadioProps = _ref2.RadioProps,
+      inputProps = _ref2$RadioProps.inputProps,
+      RadioProps = (0, _objectWithoutProperties2["default"])(_ref2$RadioProps, _excluded),
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
 
   var _useFieldApi = (0, _useFieldApi3["default"])({
     name: name,
@@ -102,9 +104,9 @@ RadioOption.propTypes = {
   RadioProps: _propTypes["default"].object
 };
 
-var Radio = function Radio(_ref2) {
-  var name = _ref2.name,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
+var Radio = function Radio(_ref3) {
+  var name = _ref3.name,
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
 
   var _useFieldApi2 = (0, _useFieldApi3["default"])(_objectSpread(_objectSpread({}, props), {}, {
     name: name,
@@ -125,10 +127,9 @@ var Radio = function Radio(_ref2) {
       FormHelperTextProps = _useFieldApi2.FormHelperTextProps,
       rest = (0, _objectWithoutProperties2["default"])(_useFieldApi2, _excluded4);
 
-  var classes = useStyles();
   var invalid = (0, _validationError.validationError)(meta, validateOnMount);
   var text = invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description;
-  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(StyledFormFieldGrid, (0, _extends2["default"])({
     className: classes.grid
   }, FormFieldGridProps), /*#__PURE__*/_react["default"].createElement(_FormControl["default"], (0, _extends2["default"])({
     required: isRequired,

package/select/select.d.ts

@@ -1,7 +1,7 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { AutocompleteProps } from "@material-ui/lab/Autocomplete";
+import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { ReactNode } from "react";
-import { GridProps, TextFieldProps, InputProps } from "@material-ui/core";
+import { GridProps, TextFieldProps, InputProps } from "@mui/material";
 
 interface InternalSelectProps<T> extends AutocompleteProps<T, boolean | undefined, boolean | undefined, boolean | undefined> {
   isRequired?: boolean;

package/select/select.js

@@ -31,13 +31,13 @@ var _parseInternalValue = _interopRequireDefault(require("@data-driven-forms/com
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _TextField = _interopRequireDefault(require("@mui/material/node/TextField"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/node/CircularProgress"));
 
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 
-var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));
+var _Autocomplete = _interopRequireDefault(require("@mui/material/node/Autocomplete"));
 
 var _excluded = ["inputProps"],
     _excluded2 = ["value", "options", "label", "helperText", "validateOnMount", "meta", "isSearchable", "description", "classNamePrefix", "isMulti", "placeholder", "onInputChange", "isFetching", "noOptionsMessage", "hideSelectedOptions", "closeMenuOnSelect", "required", "onChange", "onFocus", "onBlur", "FormFieldGridProps", "TextFieldProps", "inputProps", "isClearable", "isDisabled"],

package/slider/slider.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { SliderProps as MuiSliderProps, GridProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps } from '@material-ui/core';
+import { SliderProps as MuiSliderProps, GridProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps } from '@mui/material';
 import { ReactNode } from "react";
 
 interface InternalSliderProps extends MuiSliderProps {

package/slider/slider.js

@@ -15,17 +15,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _FormControl = _interopRequireDefault(require("@mui/material/node/FormControl"));
 
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
+var _FormGroup = _interopRequireDefault(require("@mui/material/node/FormGroup"));
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/node/FormHelperText"));
 
-var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));
+var _Slider = _interopRequireDefault(require("@mui/material/node/Slider"));
 
-var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/node/FormLabel"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 

package/sub-form/sub-form.d.ts

@@ -1,5 +1,5 @@
 import { Field } from "@data-driven-forms/react-form-renderer";
-import { GridProps, TypographyProps } from "@material-ui/core";
+import { GridProps, TypographyProps } from "@mui/material";
 import { ReactNode } from "react";
 
 export interface SubFormProps {

package/sub-form/sub-form.js

@@ -11,45 +11,48 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Typography = _interopRequireDefault(require("@mui/material/node/Typography"));
 
-var _styles = require("@material-ui/core/styles");
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
 var _useFormApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-form-api"));
 
 var _excluded = ["fields", "title", "description", "component", "TitleGridProps", "TitleProps", "DescriptionProps", "DescriptionGridProps", "ItemsGridProps"];
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    grid: {
-      paddingRight: 0,
-      paddingLeft: 0
-    }
-  };
+var PREFIX = 'SubForm';
+var classes = {
+  grid: "".concat(PREFIX, "-grid")
+};
+var StyledGrid = (0, _styles.styled)(_Grid["default"])(function () {
+  return (0, _defineProperty2["default"])({}, "&.".concat(classes.grid), {
+    paddingRight: 0,
+    paddingLeft: 0
+  });
 });
 
-var SubForm = function SubForm(_ref) {
-  var fields = _ref.fields,
-      title = _ref.title,
-      description = _ref.description,
-      component = _ref.component,
-      TitleGridProps = _ref.TitleGridProps,
-      TitleProps = _ref.TitleProps,
-      DescriptionProps = _ref.DescriptionProps,
-      DescriptionGridProps = _ref.DescriptionGridProps,
-      ItemsGridProps = _ref.ItemsGridProps,
-      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var SubForm = function SubForm(_ref2) {
+  var fields = _ref2.fields,
+      title = _ref2.title,
+      description = _ref2.description,
+      component = _ref2.component,
+      TitleGridProps = _ref2.TitleGridProps,
+      TitleProps = _ref2.TitleProps,
+      DescriptionProps = _ref2.DescriptionProps,
+      DescriptionGridProps = _ref2.DescriptionGridProps,
+      ItemsGridProps = _ref2.ItemsGridProps,
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
 
   var _useFormApi = (0, _useFormApi2["default"])(),
       renderForm = _useFormApi.renderForm;
 
-  var classes = useStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(StyledGrid, (0, _extends2["default"])({
     item: true,
     xs: 12,
     container: true,
@@ -67,7 +70,8 @@ var SubForm = function SubForm(_ref) {
   }, DescriptionProps), description)), /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
     item: true,
     xs: 12,
-    container: true
+    container: true,
+    rowSpacing: 2
   }, ItemsGridProps), renderForm(fields)));
 };
 

package/switch/switch.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { SwitchProps as MuiSwitchProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@material-ui/core';
+import { SwitchProps as MuiSwitchProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@mui/material';
 import { ReactNode } from "react";
 
 interface InternalSwitchProps extends MuiSwitchProps {

package/switch/switch.js

@@ -17,17 +17,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/node/FormControlLabel"));
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/node/FormHelperText"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _FormControl = _interopRequireDefault(require("@mui/material/node/FormControl"));
 
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
+var _FormGroup = _interopRequireDefault(require("@mui/material/node/FormGroup"));
 
-var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/node/FormLabel"));
 
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+var _Switch = _interopRequireDefault(require("@mui/material/node/Switch"));
 
 var _propTypesTemplates = require("@data-driven-forms/common/prop-types-templates");
 

package/tabs/tabs.d.ts

@@ -1,11 +1,13 @@
 import { Field } from "@data-driven-forms/react-form-renderer";
-import { AppBarProps, TabProps } from "@material-ui/core";
+import { AppBarProps, GridProps, TabProps } from "@mui/material";
 
 export interface TabsProps {
   fields: Field[];
   AppBarProps?: AppBarProps;
   TabsProps?: TabsProps;
   TabProps?: TabProps;
+  FormFieldGridProps?: GridProps,
+  GridItemProps?: GridProps,
 }
 
 declare const Tabs: React.ComponentType<TabsProps>;