diff --git a/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js b/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js
index c9d9d93b8..8c847bdd8 100644
--- a/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js
+++ b/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js
@@ -2,24 +2,21 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { styled } from '@material-ui/core/styles';
-const useFinalFormFieldStyles = makeStyles({
- grid: {
- position: 'relative'
- }
-});
-
-const FormFieldGrid = ({ children, className, ...props }) => {
- const classes = useFinalFormFieldStyles();
+const StyledGrid = styled(Grid)({position: 'relative'});
- return (
-
- {children}
-
- );
-};
+const FormFieldGrid = React.forwardRef(
+ function RefRenderFn(props, ref) {
+ const { children, ...rest } = props;
+
+ return (
+
+ {children}
+
+ );
+ }
+);
FormFieldGrid.propTypes = {
children: PropTypes.node,
@@ -27,3 +24,25 @@ FormFieldGrid.propTypes = {
};
export default FormFieldGrid;
+
+export const withFormFieldGrid = (WrappedComponent) => {
+ const WithFormFieldGrid = forwardRef(
+ function RefRenderFn(props, ref) {
+ const { GridItemProps, ...rest } = props;
+ return (
+
+
+
+ )
+ }
+ );
+ WithFormFieldGrid.displayName = `WithFormFieldGrid(${getDisplayName(WrappedComponent)})`;
+ WithFormFieldGrid.propTypes = {
+ GridItemProps: PropTypes.object
+ };
+ return WithFormFieldGrid;
+};
+
+const getDisplayName = (WrappedComponent) => {
+ return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+};