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

package/esm/form-field-grid/form-field-grid.js

@@ -1,24 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "className"];
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import Grid from "@material-ui/core/esm/Grid";
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from "@mui/material/Grid";
 import clsx from 'clsx';
-var useFinalFormFieldStyles = makeStyles({
-  grid: {
-    position: 'relative'
-  }
-});
+var PREFIX = 'FormFieldGrid';
+var classes = {
+  grid: "".concat(PREFIX, "-grid")
+};
+var StyledGrid = styled(Grid)(_defineProperty({}, "&.".concat(classes.grid), {
+  position: 'relative'
+}));
 
 var FormFieldGrid = function FormFieldGrid(_ref) {
   var children = _ref.children,
       className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = useFinalFormFieldStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
+  return /*#__PURE__*/React.createElement(StyledGrid, _extends({
     xs: 12,
     item: true,
     className: clsx(classes.grid, className)

package/esm/form-template/form-template.js

@@ -1,6 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "GridContainerProps", "GridProps"],
     _excluded2 = ["children", "GridProps"],
     _excluded3 = ["children", "GridProps"],
@@ -8,32 +9,34 @@ var _excluded = ["children", "GridContainerProps", "GridProps"],
     _excluded5 = ["label", "variant", "children", "buttonType"],
     _excluded6 = ["title", "description", "TitleProps", "className"];
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import Grid from "@material-ui/core/esm/Grid";
-import MUIButton from "@material-ui/core/esm/Button";
-import Typography from "@material-ui/core/esm/Typography";
-import { makeStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
-import AlertTitle from '@material-ui/lab/AlertTitle';
+import Grid from "@mui/material/Grid";
+import MUIButton from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
 import FormTemplate from '@data-driven-forms/common/form-template';
 import clsx from 'clsx';
-var useStyles = 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 = styled(Grid)(function () {
+  return _defineProperty({}, "& .".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 = _objectWithoutProperties(_ref, _excluded);
+var Form = function Form(_ref2) {
+  var children = _ref2.children,
+      GridContainerProps = _ref2.GridContainerProps,
+      GridProps = _ref2.GridProps,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
@@ -42,8 +45,8 @@ var Form = function Form(_ref) {
     noValidate: true
   }, props), /*#__PURE__*/React.createElement(Grid, _extends({
     container: true,
+    rowSpacing: 2,
     item: true,
-    spacing: 2,
     xs: 12
   }, GridContainerProps), children)));
 };
@@ -54,10 +57,10 @@ Form.propTypes = {
   GridContainerProps: PropTypes.object
 };
 
-var Description = function Description(_ref2) {
-  var children = _ref2.children,
-      GridProps = _ref2.GridProps,
-      props = _objectWithoutProperties(_ref2, _excluded2);
+var Description = function Description(_ref3) {
+  var children = _ref3.children,
+      GridProps = _ref3.GridProps,
+      props = _objectWithoutProperties(_ref3, _excluded2);
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
@@ -73,10 +76,10 @@ Description.propTypes = {
   GridProps: PropTypes.object
 };
 
-var Title = function Title(_ref3) {
-  var children = _ref3.children,
-      GridProps = _ref3.GridProps,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+var Title = function Title(_ref4) {
+  var children = _ref4.children,
+      GridProps = _ref4.GridProps,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
@@ -92,13 +95,12 @@ Title.propTypes = {
   GridProps: PropTypes.object
 };
 
-var ButtonGroup = function ButtonGroup(_ref4) {
-  var children = _ref4.children,
-      GridProps = _ref4.GridProps,
-      props = _objectWithoutProperties(_ref4, _excluded4);
+var ButtonGroup = function ButtonGroup(_ref5) {
+  var children = _ref5.children,
+      GridProps = _ref5.GridProps,
+      props = _objectWithoutProperties(_ref5, _excluded4);
 
-  var classes = useStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
+  return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
     item: true,
     xs: 12
   }, GridProps), /*#__PURE__*/React.createElement("div", _extends({
@@ -111,12 +113,12 @@ ButtonGroup.propTypes = {
   GridProps: PropTypes.object
 };
 
-var Button = function Button(_ref5) {
-  var label = _ref5.label,
-      variant = _ref5.variant,
-      children = _ref5.children,
-      buttonType = _ref5.buttonType,
-      props = _objectWithoutProperties(_ref5, _excluded5);
+var Button = function Button(_ref6) {
+  var label = _ref6.label,
+      variant = _ref6.variant,
+      children = _ref6.children,
+      buttonType = _ref6.buttonType,
+      props = _objectWithoutProperties(_ref6, _excluded5);
 
   return /*#__PURE__*/React.createElement(MUIButton, _extends({
     color: variant,
@@ -130,20 +132,17 @@ Button.propTypes = {
   variant: PropTypes.string,
   buttonType: PropTypes.string
 };
-var useAlertStyles = makeStyles(function () {
+var StyledAlert = styled(Alert)(function () {
   return {
-    alert: {
+    '& .alert': {
       width: '100%',
       margin: 8
     }
   };
 });
-export var FormError = function FormError(_ref6) {
-  var formError = _ref6.formError,
-      alertProps = _ref6.alertProps;
-
-  var _useAlertStyles = useAlertStyles(),
-      alert = _useAlertStyles.alert;
+export var FormError = function FormError(_ref7) {
+  var formError = _ref7.formError,
+      alertProps = _ref7.alertProps;
 
   if (_typeof(formError) === 'object' && (formError.title || formError.title)) {
     var title = formError.title,
@@ -152,18 +151,18 @@ export var FormError = function FormError(_ref6) {
         className = formError.className,
         props = _objectWithoutProperties(formError, _excluded6);
 
-    return /*#__PURE__*/React.createElement(Alert, _extends({
+    return /*#__PURE__*/React.createElement(StyledAlert, _extends({
       severity: "error"
     }, props, alertProps, {
-      className: clsx(alert, alertProps === null || alertProps === void 0 ? void 0 : alertProps.className, className)
+      className: clsx('alert', alertProps === null || alertProps === void 0 ? void 0 : alertProps.className, className)
     }), title && /*#__PURE__*/React.createElement(AlertTitle, TitleProps, title), description);
   }
 
   if (formError) {
-    return /*#__PURE__*/React.createElement(Alert, _extends({
+    return /*#__PURE__*/React.createElement(StyledAlert, _extends({
       severity: "error"
     }, alertProps, {
-      className: clsx(alert, alertProps === null || alertProps === void 0 ? void 0 : alertProps.className)
+      className: clsx('alert', alertProps === null || alertProps === void 0 ? void 0 : alertProps.className)
     }), formError);
   }
 

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

@@ -11,13 +11,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
-import Grid from "@material-ui/core/esm/Grid";
-import Checkbox from "@material-ui/core/esm/Checkbox";
-import FormControlLabel from "@material-ui/core/esm/FormControlLabel";
-import FormLabel from "@material-ui/core/esm/FormLabel";
-import FormGroup from "@material-ui/core/esm/FormGroup";
-import FormControl from "@material-ui/core/esm/FormControl";
-import FormHelperText from "@material-ui/core/esm/FormHelperText";
+import Grid from "@mui/material/Grid";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormLabel from "@mui/material/FormLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
 import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/multiple-choice-list';
 import { validationError } from '../validation-error/validation-error';
 var CheckboxContext = /*#__PURE__*/createContext({});
@@ -70,7 +70,9 @@ var Wrapper = function Wrapper(_ref2) {
       FormHelperTextProps = _useContext2.FormHelperTextProps;
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
-    container: true
+    container: true,
+    item: true,
+    xs: 12
   }, FormFieldGridProps), /*#__PURE__*/React.createElement(FormControl, _extends({
     required: isRequired,
     error: !!invalid,

package/esm/plain-text/plain-text.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "name", "component", "element"];
 import React from 'react';
-import Typography from "@material-ui/core/esm/Typography";
+import Typography from "@mui/material/Typography";
 import PropTypes from 'prop-types';
 
 var PlainText = function PlainText(_ref) {

package/esm/radio/radio.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["inputProps"],
     _excluded2 = ["name", "option", "isDisabled", "isReadOnly", "FormControlLabelProps", "RadioProps"],
     _excluded3 = ["name"],
@@ -11,37 +11,39 @@ 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) { _defineProperty(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; }
 
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import MUIRadio from "@material-ui/core/esm/Radio";
-import FormControlLabel from "@material-ui/core/esm/FormControlLabel";
-import FormControl from "@material-ui/core/esm/FormControl";
-import FormLabel from "@material-ui/core/esm/FormLabel";
-import FormHelperText from "@material-ui/core/esm/FormHelperText";
+import MUIRadio from "@mui/material/Radio";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import FormHelperText from "@mui/material/FormHelperText";
 import { wrapperProps } from '@data-driven-forms/common/multiple-choice-list';
-import { makeStyles } from '@material-ui/core/styles';
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-var useStyles = makeStyles(function () {
-  return {
-    grid: {
-      '&:first-child': {
-        marginTop: 8
-      }
+var PREFIX = 'Radio';
+var classes = {
+  grid: "".concat(PREFIX, "-grid")
+};
+var StyledFormFieldGrid = styled(FormFieldGrid)(function () {
+  return _defineProperty({}, "&.".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 = _objectWithoutProperties(_ref$RadioProps, _excluded),
-      props = _objectWithoutProperties(_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 = _objectWithoutProperties(_ref2$RadioProps, _excluded),
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   var _useFieldApi = useFieldApi({
     name: name,
@@ -78,9 +80,9 @@ RadioOption.propTypes = {
   RadioProps: PropTypes.object
 };
 
-var Radio = function Radio(_ref2) {
-  var name = _ref2.name,
-      props = _objectWithoutProperties(_ref2, _excluded3);
+var Radio = function Radio(_ref3) {
+  var name = _ref3.name,
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   var _useFieldApi2 = useFieldApi(_objectSpread(_objectSpread({}, props), {}, {
     name: name,
@@ -101,10 +103,9 @@ var Radio = function Radio(_ref2) {
       FormHelperTextProps = _useFieldApi2.FormHelperTextProps,
       rest = _objectWithoutProperties(_useFieldApi2, _excluded4);
 
-  var classes = useStyles();
   var invalid = validationError(meta, validateOnMount);
   var text = invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description;
-  return /*#__PURE__*/React.createElement(FormFieldGrid, _extends({
+  return /*#__PURE__*/React.createElement(StyledFormFieldGrid, _extends({
     className: classes.grid
   }, FormFieldGridProps), /*#__PURE__*/React.createElement(FormControl, _extends({
     required: isRequired,

package/esm/select/select.js

@@ -18,10 +18,10 @@ import { meta } from '@data-driven-forms/common/prop-types-templates';
 import DDFSelect from '@data-driven-forms/common/select';
 import parseInternalValue from '@data-driven-forms/common/select/parse-internal-value';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import TextField from "@material-ui/core/esm/TextField";
-import CircularProgress from "@material-ui/core/esm/CircularProgress";
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import TextField from "@mui/material/TextField";
+import CircularProgress from "@mui/material/CircularProgress";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import Autocomplete from "@mui/material/Autocomplete";
 /**
  * Returns label of selected option
  * @param {Object|Array} option currently selected option

package/esm/slider/slider.js

@@ -3,12 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["input", "isReadOnly", "isDisabled", "isRequired", "label", "helperText", "description", "validateOnMount", "meta", "FormFieldGridProps", "FormControlProps", "FormGroupProps", "FormLabelProps", "FormHelperTextProps", "before", "after", "InputGridProps", "BeforeGridProps", "SliderGridProps", "AfterGridProps"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormControl from "@material-ui/core/esm/FormControl";
-import FormGroup from "@material-ui/core/esm/FormGroup";
-import FormHelperText from "@material-ui/core/esm/FormHelperText";
-import MUISlider from "@material-ui/core/esm/Slider";
-import FormLabel from "@material-ui/core/esm/FormLabel";
-import Grid from "@material-ui/core/esm/Grid";
+import FormControl from "@mui/material/FormControl";
+import FormGroup from "@mui/material/FormGroup";
+import FormHelperText from "@mui/material/FormHelperText";
+import MUISlider from "@mui/material/Slider";
+import FormLabel from "@mui/material/FormLabel";
+import Grid from "@mui/material/Grid";
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';

package/esm/sub-form/sub-form.js

@@ -1,38 +1,40 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["fields", "title", "description", "component", "TitleGridProps", "TitleProps", "DescriptionProps", "DescriptionGridProps", "ItemsGridProps"];
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import Typography from "@material-ui/core/esm/Typography";
-import Grid from "@material-ui/core/esm/Grid";
-import { makeStyles } from '@material-ui/core/styles';
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
 import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
-var useStyles = makeStyles(function () {
-  return {
-    grid: {
-      paddingRight: 0,
-      paddingLeft: 0
-    }
-  };
+var PREFIX = 'SubForm';
+var classes = {
+  grid: "".concat(PREFIX, "-grid")
+};
+var StyledGrid = styled(Grid)(function () {
+  return _defineProperty({}, "&.".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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_ref2, _excluded);
 
   var _useFormApi = useFormApi(),
       renderForm = _useFormApi.renderForm;
 
-  var classes = useStyles();
-  return /*#__PURE__*/React.createElement(Grid, _extends({
+  return /*#__PURE__*/React.createElement(StyledGrid, _extends({
     item: true,
     xs: 12,
     container: true,
@@ -50,7 +52,8 @@ var SubForm = function SubForm(_ref) {
   }, DescriptionProps), description)), /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
     xs: 12,
-    container: true
+    container: true,
+    rowSpacing: 2
   }, ItemsGridProps), renderForm(fields)));
 };
 

package/esm/switch/switch.js

@@ -9,12 +9,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormControlLabel from "@material-ui/core/esm/FormControlLabel";
-import FormHelperText from "@material-ui/core/esm/FormHelperText";
-import FormControl from "@material-ui/core/esm/FormControl";
-import FormGroup from "@material-ui/core/esm/FormGroup";
-import FormLabel from "@material-ui/core/esm/FormLabel";
-import MUISwitch from "@material-ui/core/esm/Switch";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormControl from "@mui/material/FormControl";
+import FormGroup from "@mui/material/FormGroup";
+import FormLabel from "@mui/material/FormLabel";
+import MUISwitch from "@mui/material/Switch";
 import { meta, input } from '@data-driven-forms/common/prop-types-templates';
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';

package/esm/tabs/tabs.js

@@ -1,34 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { Fragment, useState } from 'react';
-import PropTypes from 'prop-types';
-import AppBar from "@material-ui/core/esm/AppBar";
-import Tab from "@material-ui/core/esm/Tab";
-import Tabs from "@material-ui/core/esm/Tabs";
-import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
 
-var TabContent = function TabContent(_ref) {
-  var name = _ref.name,
-      fields = _ref.fields,
-      formOptions = _ref.formOptions;
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: name
-  }, formOptions.renderForm(fields, formOptions));
-};
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-TabContent.propTypes = {
-  name: PropTypes.string.isRequired,
-  fields: PropTypes.array.isRequired,
-  formOptions: PropTypes.shape({
-    renderForm: PropTypes.func.isRequired
-  }).isRequired
-};
+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) { _defineProperty(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 FormTabs = function FormTabs(_ref2) {
-  var fields = _ref2.fields,
-      AppBarProps = _ref2.AppBarProps,
-      TabsProps = _ref2.TabsProps,
-      TabProps = _ref2.TabProps;
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import AppBar from "@mui/material/AppBar";
+import Grid from "@mui/material/Grid";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import FormFieldGrid from '../form-field-grid';
+import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
+
+var FormTabs = function FormTabs(_ref) {
+  var fields = _ref.fields,
+      AppBarProps = _ref.AppBarProps,
+      TabsProps = _ref.TabsProps,
+      TabProps = _ref.TabProps,
+      FormFieldGridProps = _ref.FormFieldGridProps,
+      GridItemProps = _ref.GridItemProps;
   var formOptions = useFormApi();
 
   var _useState = useState(0),
@@ -36,28 +29,38 @@ var FormTabs = function FormTabs(_ref2) {
       activeTab = _useState2[0],
       setActiveTab = _useState2[1];
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AppBar, _extends({
+  return /*#__PURE__*/React.createElement(FormFieldGrid, _extends({
+    container: true
+  }, FormFieldGridProps), /*#__PURE__*/React.createElement(AppBar, _extends({
     position: "static"
   }, AppBarProps), /*#__PURE__*/React.createElement(Tabs, _extends({
+    textColor: "inherit",
     value: activeTab,
     onChange: function onChange(_e, tabIndex) {
       return setActiveTab(tabIndex);
     }
-  }, TabsProps), fields.map(function (_ref3) {
-    var title = _ref3.title,
-        name = _ref3.name;
+  }, TabsProps), fields.map(function (_ref2) {
+    var title = _ref2.title,
+        name = _ref2.name;
     return /*#__PURE__*/React.createElement(Tab, _extends({
       key: name,
       label: title
     }, TabProps));
-  }))), fields.map(function (field, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: field.name,
-      hidden: index !== activeTab
-    }, /*#__PURE__*/React.createElement(TabContent, _extends({}, field, {
-      name: field.name,
-      formOptions: formOptions
-    })));
+  }))), fields.map(function (_ref3, index) {
+    var fields = _ref3.fields,
+        name = _ref3.name;
+    return /*#__PURE__*/React.createElement(Grid, _extends({
+      key: name || index,
+      container: true,
+      item: true,
+      xs: 12,
+      rowSpacing: 2,
+      sx: _objectSpread({
+        mt: 1
+      }, index !== activeTab && {
+        display: 'none'
+      })
+    }, GridItemProps), formOptions.renderForm(fields));
   }));
 };
 
@@ -65,11 +68,26 @@ FormTabs.propTypes = {
   fields: PropTypes.array.isRequired,
   AppBarProps: PropTypes.object,
   TabsProps: PropTypes.object,
-  TabProps: PropTypes.object
+  TabProps: PropTypes.object,
+  FormFieldGridProps: PropTypes.object,
+  GridItemProps: PropTypes.object
 };
 FormTabs.defaultProps = {
   AppBarProps: {},
   TabsProps: {},
-  TabProps: {}
+  TabProps: {},
+  FormFieldGridProps: {},
+  GridItemProps: {}
 };
-export default FormTabs;
+export default FormTabs;
+/*
+        {fields.map(({ fields }, index) =>
+          index === activeTab ? (
+            formOptions.renderForm(fields)
+          ) : (
+            <Grid container item xs={12} sx={{ display: 'none' }}>
+              {formOptions.renderForm(fields)}
+            </Grid>
+          )
+        )}
+        */

package/esm/text-field/text-field.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import MuiTextField from "@material-ui/core/esm/TextField";
+import MuiTextField from "@mui/material/TextField";
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
 import { meta, input } from '@data-driven-forms/common/prop-types-templates';