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

package/esm/date-picker/date-picker.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MuiPickersUtilsProvider, DatePicker as MUIDatePicker } from '@material-ui/pickers';
-import MomentUtils from '@date-io/moment';
+import MUIDatePicker from "@mui/lab/DatePicker";
 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';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
+import TextField from "@mui/material/TextField";
 
 var DatePicker = function DatePicker(props) {
   var _useFieldApi = useFieldApi(props),
@@ -20,29 +20,27 @@ var DatePicker = function DatePicker(props) {
       description = _useFieldApi.description,
       validateOnMount = _useFieldApi.validateOnMount,
       meta = _useFieldApi.meta,
-      _useFieldApi$locale = _useFieldApi.locale,
-      locale = _useFieldApi$locale === void 0 ? 'en' : _useFieldApi$locale,
       FormFieldGridProps = _useFieldApi.FormFieldGridProps,
-      MuiPickersUtilsProviderProps = _useFieldApi.MuiPickersUtilsProviderProps,
       DatePickerProps = _useFieldApi.DatePickerProps;
 
   var invalid = validationError(meta, validateOnMount);
-  return /*#__PURE__*/React.createElement(FormFieldGrid, FormFieldGridProps, /*#__PURE__*/React.createElement(MuiPickersUtilsProvider, _extends({
-    locale: locale,
-    utils: MomentUtils
-  }, MuiPickersUtilsProviderProps), /*#__PURE__*/React.createElement(MUIDatePicker, _extends({
-    fullWidth: true,
-    margin: "normal",
-    label: label,
-    helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+  return /*#__PURE__*/React.createElement(FormFieldGrid, FormFieldGridProps, /*#__PURE__*/React.createElement(MUIDatePicker, _extends({
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+        fullWidth: true,
+        margin: "normal",
+        label: label,
+        helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+        placeholder: placeholder,
+        required: isRequired,
+        error: !!invalid
+      }));
+    },
     disabled: isDisabled || isReadOnly,
-    placeholder: placeholder,
-    required: isRequired,
-    error: !!invalid,
     readOnly: isReadOnly
   }, input, {
     value: input.value || null
-  }, DatePickerProps))));
+  }, DatePickerProps)));
 };
 
 DatePicker.propTypes = {
@@ -55,15 +53,12 @@ DatePicker.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
-  locale: PropTypes.string,
   description: PropTypes.node,
   FormFieldGridProps: PropTypes.object,
-  MuiPickersUtilsProviderProps: PropTypes.object,
   DatePickerProps: PropTypes.object
 };
 DatePicker.defaultProps = {
   FormFieldGridProps: {},
-  MuiPickersUtilsProviderProps: {},
   DatePickerProps: {}
 };
 export default DatePicker;

package/esm/dual-list-select/dual-list-select.js

@@ -1,81 +1,85 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 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; }
 
 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/styled";
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import Grid from "@material-ui/core/esm/Grid";
-import List from "@material-ui/core/esm/List";
-import ListItem from "@material-ui/core/esm/ListItem";
-import ListItemText from "@material-ui/core/esm/ListItemText";
-import ListItemIcon from "@material-ui/core/esm/ListItemIcon";
-import Checkbox from "@material-ui/core/esm/Checkbox";
-import ListItemSecondaryAction from "@material-ui/core/esm/ListItemSecondaryAction";
-import IconButton from "@material-ui/core/esm/IconButton";
-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 Toolbar from "@material-ui/core/esm/Toolbar";
-import TextField from "@material-ui/core/esm/TextField";
-import Typography from "@material-ui/core/esm/Typography";
-import Paper from "@material-ui/core/esm/Paper";
-import Button from "@material-ui/core/esm/Button";
-import SortIcon from '@material-ui/icons/ArrowUpward';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from "@mui/material/Grid";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Checkbox from "@mui/material/Checkbox";
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
+import IconButton from "@mui/material/IconButton";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import Toolbar from "@mui/material/Toolbar";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Button from "@mui/material/Button";
+import SortIcon from '@mui/icons-material/ArrowUpward';
 import DualListSelectCommon from '@data-driven-forms/common/dual-list-select';
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
-var useStyles = makeStyles(function (theme) {
-  return {
-    allToLeftIcon: {
-      transform: 'scaleX(-1)'
-    },
-    upsideDown: {
-      transform: 'scaleY(-1)'
-    },
-    list: {
-      height: 300,
-      overflow: 'auto'
-    },
-    button: {
-      display: 'flex',
-      justifyContent: 'center',
-      margin: theme.spacing(0.5, 0)
-    },
-    buttonsGrid: {
-      height: '100%',
-      alignContent: 'center'
-    },
-    filter: {
-      width: '100%'
-    },
-    toolbar: {
-      paddingLeft: 16,
-      paddingRight: 16
-    }
-  };
+var PREFIX = 'DualListSelectWrapper';
+var classes = {
+  allToLeftIcon: "".concat(PREFIX, "-allToLeftIcon"),
+  upsideDown: "".concat(PREFIX, "-upsideDown"),
+  list: "".concat(PREFIX, "-list"),
+  button: "".concat(PREFIX, "-button"),
+  buttonsGrid: "".concat(PREFIX, "-buttonsGrid"),
+  filter: "".concat(PREFIX, "-filter"),
+  toolbar: "".concat(PREFIX, "-toolbar")
+};
+var StyledDualListSelect = styled(FormFieldGrid)(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme;
+  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(classes.allToLeftIcon), {
+    transform: 'scaleX(-1)'
+  }), _defineProperty(_ref2, "& .".concat(classes.upsideDown), {
+    transform: 'scaleY(-1)'
+  }), _defineProperty(_ref2, "& .".concat(classes.list), {
+    height: 300,
+    overflow: 'auto'
+  }), _defineProperty(_ref2, "& .".concat(classes.button), {
+    display: 'flex',
+    justifyContent: 'center',
+    margin: theme.spacing(0.5, 0)
+  }), _defineProperty(_ref2, "& .".concat(classes.buttonsGrid), {
+    height: '100%',
+    alignContent: 'center'
+  }), _defineProperty(_ref2, "& .".concat(classes.filter), {
+    width: '100%'
+  }), _defineProperty(_ref2, "& .".concat(classes.toolbar), {
+    paddingLeft: 16,
+    paddingRight: 16
+  }), _ref2;
 });
 
-var ListInternal = function ListInternal(_ref) {
-  var value = _ref.value,
-      optionClick = _ref.optionClick,
-      noOptionsTitle = _ref.noOptionsTitle,
-      filterValue = _ref.filterValue,
-      filterValueText = _ref.filterValueText,
-      selectedValues = _ref.selectedValues,
-      ListProps = _ref.ListProps,
-      ListItemProps = _ref.ListItemProps,
-      ListItemIconProps = _ref.ListItemIconProps,
-      ListItemTextProps = _ref.ListItemTextProps,
-      ListItemSecondaryActionProps = _ref.ListItemSecondaryActionProps,
-      checkboxVariant = _ref.checkboxVariant,
-      PaperProps = _ref.PaperProps,
-      LeftPaperProps = _ref.LeftPaperProps;
-  var classes = useStyles();
+var ListInternal = function ListInternal(_ref3) {
+  var value = _ref3.value,
+      optionClick = _ref3.optionClick,
+      noOptionsTitle = _ref3.noOptionsTitle,
+      filterValue = _ref3.filterValue,
+      filterValueText = _ref3.filterValueText,
+      selectedValues = _ref3.selectedValues,
+      ListProps = _ref3.ListProps,
+      ListItemProps = _ref3.ListItemProps,
+      ListItemIconProps = _ref3.ListItemIconProps,
+      ListItemTextProps = _ref3.ListItemTextProps,
+      ListItemSecondaryActionProps = _ref3.ListItemSecondaryActionProps,
+      checkboxVariant = _ref3.checkboxVariant,
+      PaperProps = _ref3.PaperProps,
+      LeftPaperProps = _ref3.LeftPaperProps;
   return /*#__PURE__*/React.createElement(Paper, _extends({}, PaperProps, LeftPaperProps, {
     className: clsx(PaperProps && PaperProps.className, LeftPaperProps && LeftPaperProps.className)
   }), /*#__PURE__*/React.createElement(List, _extends({
@@ -89,16 +93,16 @@ var ListInternal = function ListInternal(_ref) {
     disabled: true
   }, ListItemProps), /*#__PURE__*/React.createElement(ListItemText, {
     primary: filterValue ? filterValueText : noOptionsTitle
-  })), value.length > 0 && value.map(function (_ref2) {
-    var value = _ref2.value,
-        label = _ref2.label,
-        icon = _ref2.icon,
-        isCheckbox = _ref2.isCheckbox,
-        secondaryActions = _ref2.secondaryActions,
-        ListItemPropsItem = _ref2.ListItemProps,
-        ListItemIconPropsItem = _ref2.ListItemIconProps,
-        ListItemTextPropsItem = _ref2.ListItemTextProps,
-        ListItemSecondaryActionPropsItem = _ref2.ListItemSecondaryActionProps;
+  })), value.length > 0 && value.map(function (_ref4) {
+    var value = _ref4.value,
+        label = _ref4.label,
+        icon = _ref4.icon,
+        isCheckbox = _ref4.isCheckbox,
+        secondaryActions = _ref4.secondaryActions,
+        ListItemPropsItem = _ref4.ListItemProps,
+        ListItemIconPropsItem = _ref4.ListItemIconProps,
+        ListItemTextPropsItem = _ref4.ListItemTextProps,
+        ListItemSecondaryActionPropsItem = _ref4.ListItemSecondaryActionProps;
     return /*#__PURE__*/React.createElement(ListItem, _extends({
       button: true,
       key: value,
@@ -143,21 +147,20 @@ ListInternal.defaultProps = {
   ListProps: {}
 };
 
-var ToolbarInternal = function ToolbarInternal(_ref3) {
-  var ToolbarProps = _ref3.ToolbarProps,
-      LeftToolbarProps = _ref3.LeftToolbarProps,
-      filterOptions = _ref3.filterOptions,
-      filterOptionsTitle = _ref3.filterOptionsTitle,
-      FilterFieldProps = _ref3.FilterFieldProps,
-      sortOptions = _ref3.sortOptions,
-      SortIconButtonProps = _ref3.SortIconButtonProps,
-      SortIconProps = _ref3.SortIconProps,
-      LeftSortIconProps = _ref3.LeftSortIconProps,
-      LeftFilterFieldProps = _ref3.LeftFilterFieldProps,
-      LeftSortIconButtonProps = _ref3.LeftSortIconButtonProps,
-      filter = _ref3.filter,
-      sortDesc = _ref3.sortDesc;
-  var classes = useStyles();
+var ToolbarInternal = function ToolbarInternal(_ref5) {
+  var ToolbarProps = _ref5.ToolbarProps,
+      LeftToolbarProps = _ref5.LeftToolbarProps,
+      filterOptions = _ref5.filterOptions,
+      filterOptionsTitle = _ref5.filterOptionsTitle,
+      FilterFieldProps = _ref5.FilterFieldProps,
+      sortOptions = _ref5.sortOptions,
+      SortIconButtonProps = _ref5.SortIconButtonProps,
+      SortIconProps = _ref5.SortIconProps,
+      LeftSortIconProps = _ref5.LeftSortIconProps,
+      LeftFilterFieldProps = _ref5.LeftFilterFieldProps,
+      LeftSortIconButtonProps = _ref5.LeftSortIconButtonProps,
+      filter = _ref5.filter,
+      sortDesc = _ref5.sortDesc;
   return /*#__PURE__*/React.createElement(Toolbar, _extends({
     variant: "dense"
   }, ToolbarProps, LeftToolbarProps, {
@@ -166,8 +169,8 @@ var ToolbarInternal = function ToolbarInternal(_ref3) {
     edge: "start",
     id: "options-search",
     label: filterOptionsTitle,
-    onChange: function onChange(_ref4) {
-      var value = _ref4.target.value;
+    onChange: function onChange(_ref6) {
+      var value = _ref6.target.value;
       return filterOptions(value);
     },
     value: filter,
@@ -179,7 +182,9 @@ var ToolbarInternal = function ToolbarInternal(_ref3) {
     edge: "end",
     onClick: sortOptions,
     color: "inherit"
-  }, SortIconButtonProps, LeftSortIconButtonProps), /*#__PURE__*/React.createElement(SortIcon, _extends({}, SortIconProps, LeftSortIconProps, {
+  }, SortIconButtonProps, LeftSortIconButtonProps, {
+    size: "large"
+  }), /*#__PURE__*/React.createElement(SortIcon, _extends({}, SortIconProps, LeftSortIconProps, {
     className: clsx(!sortDesc && classes.upsideDown, SortIconProps && SortIconProps.className, LeftSortIconProps && LeftSortIconProps.className)
   }))));
 };
@@ -201,99 +206,98 @@ ToolbarInternal.propTypes = {
   sortDesc: PropTypes.bool
 };
 
-var DualListSelect = function DualListSelect(_ref5) {
-  var handleOptionsClick = _ref5.handleOptionsClick,
-      rightValues = _ref5.rightValues,
-      noValueTitle = _ref5.noValueTitle,
-      filterValueText = _ref5.filterValueText,
-      leftValues = _ref5.leftValues,
-      noOptionsTitle = _ref5.noOptionsTitle,
-      state = _ref5.state,
-      filterOptionsText = _ref5.filterOptionsText,
-      handleValuesClick = _ref5.handleValuesClick,
-      handleMoveRight = _ref5.handleMoveRight,
-      moveRightTitle = _ref5.moveRightTitle,
-      handleClearLeftValues = _ref5.handleClearLeftValues,
-      moveAllRightTitle = _ref5.moveAllRightTitle,
-      handleClearRightValues = _ref5.handleClearRightValues,
-      moveAllLeftTitle = _ref5.moveAllLeftTitle,
-      handleMoveLeft = _ref5.handleMoveLeft,
-      moveLeftTitle = _ref5.moveLeftTitle,
-      allToRight = _ref5.allToRight,
-      allToLeft = _ref5.allToLeft,
-      checkboxVariant = _ref5.checkboxVariant,
-      isRequired = _ref5.isRequired,
-      meta = _ref5.meta,
-      validateOnMount = _ref5.validateOnMount,
-      label = _ref5.label,
-      helperText = _ref5.helperText,
-      description = _ref5.description,
-      filterOptionsTitle = _ref5.filterOptionsTitle,
-      leftTitle = _ref5.leftTitle,
-      filterOptions = _ref5.filterOptions,
-      sortOptions = _ref5.sortOptions,
-      sortValues = _ref5.sortValues,
-      filterValueTitle = _ref5.filterValueTitle,
-      filterValues = _ref5.filterValues,
-      rightTitle = _ref5.rightTitle,
-      isFilterable = _ref5.isFilterable,
-      FormFieldGridProps = _ref5.FormFieldGridProps,
-      InternalGridProps = _ref5.InternalGridProps,
-      ListGridProps = _ref5.ListGridProps,
-      LeftListGridProps = _ref5.LeftListGridProps,
-      ListProps = _ref5.ListProps,
-      LeftListProps = _ref5.LeftListProps,
-      ButtonsGridProps = _ref5.ButtonsGridProps,
-      ButtonsInternalGridProps = _ref5.ButtonsInternalGridProps,
-      ButtonGridProps = _ref5.ButtonGridProps,
-      ToRightGridProps = _ref5.ToRightGridProps,
-      IconButtonProps = _ref5.IconButtonProps,
-      ToRightIconButtonProps = _ref5.ToRightIconButtonProps,
-      AllToRightGridProps = _ref5.AllToRightGridProps,
-      AllToRightIconButtonProps = _ref5.AllToRightIconButtonProps,
-      AllToLeftGridProps = _ref5.AllToLeftGridProps,
-      AllToLeftIconButtonProps = _ref5.AllToLeftIconButtonProps,
-      ToLeftGridProps = _ref5.ToLeftGridProps,
-      ToLeftIconButtonProps = _ref5.ToLeftIconButtonProps,
-      RightListGridProps = _ref5.RightListGridProps,
-      RightListProps = _ref5.RightListProps,
-      ListItemProps = _ref5.ListItemProps,
-      ListItemIconProps = _ref5.ListItemIconProps,
-      ListItemTextProps = _ref5.ListItemTextProps,
-      ListItemSecondaryActionProps = _ref5.ListItemSecondaryActionProps,
-      LeftListItemProps = _ref5.LeftListItemProps,
-      LeftListItemIconProps = _ref5.LeftListItemIconProps,
-      LeftItemTextProps = _ref5.LeftItemTextProps,
-      LeftItemSecondaryActionProps = _ref5.LeftItemSecondaryActionProps,
-      RightListItemProps = _ref5.RightListItemProps,
-      RightListItemIconProps = _ref5.RightListItemIconProps,
-      RightItemTextProps = _ref5.RightItemTextProps,
-      RightItemSecondaryActionProps = _ref5.RightItemSecondaryActionProps,
-      FormControlProps = _ref5.FormControlProps,
-      FormLabelProps = _ref5.FormLabelProps,
-      FormHelperTextProps = _ref5.FormHelperTextProps,
-      TitleProps = _ref5.TitleProps,
-      ToolbarProps = _ref5.ToolbarProps,
-      FilterFieldProps = _ref5.FilterFieldProps,
-      SortIconButtonProps = _ref5.SortIconButtonProps,
-      SortIconProps = _ref5.SortIconProps,
-      LeftToolbarProps = _ref5.LeftToolbarProps,
-      LeftFilterFieldProps = _ref5.LeftFilterFieldProps,
-      LeftSortIconButtonProps = _ref5.LeftSortIconButtonProps,
-      LeftSortIconProps = _ref5.LeftSortIconProps,
-      LeftTitleProps = _ref5.LeftTitleProps,
-      RightToolbarProps = _ref5.RightToolbarProps,
-      RightFilterFieldProps = _ref5.RightFilterFieldProps,
-      RightSortIconButtonProps = _ref5.RightSortIconButtonProps,
-      RightSortIconProps = _ref5.RightSortIconProps,
-      RightTitleProps = _ref5.RightTitleProps,
-      PaperProps = _ref5.PaperProps,
-      LeftPaperProps = _ref5.LeftPaperProps,
-      RightPaperProps = _ref5.RightPaperProps;
-  var classes = useStyles();
+var DualListSelect = function DualListSelect(_ref7) {
+  var handleOptionsClick = _ref7.handleOptionsClick,
+      rightValues = _ref7.rightValues,
+      noValueTitle = _ref7.noValueTitle,
+      filterValueText = _ref7.filterValueText,
+      leftValues = _ref7.leftValues,
+      noOptionsTitle = _ref7.noOptionsTitle,
+      state = _ref7.state,
+      filterOptionsText = _ref7.filterOptionsText,
+      handleValuesClick = _ref7.handleValuesClick,
+      handleMoveRight = _ref7.handleMoveRight,
+      moveRightTitle = _ref7.moveRightTitle,
+      handleClearLeftValues = _ref7.handleClearLeftValues,
+      moveAllRightTitle = _ref7.moveAllRightTitle,
+      handleClearRightValues = _ref7.handleClearRightValues,
+      moveAllLeftTitle = _ref7.moveAllLeftTitle,
+      handleMoveLeft = _ref7.handleMoveLeft,
+      moveLeftTitle = _ref7.moveLeftTitle,
+      allToRight = _ref7.allToRight,
+      allToLeft = _ref7.allToLeft,
+      checkboxVariant = _ref7.checkboxVariant,
+      isRequired = _ref7.isRequired,
+      meta = _ref7.meta,
+      validateOnMount = _ref7.validateOnMount,
+      label = _ref7.label,
+      helperText = _ref7.helperText,
+      description = _ref7.description,
+      filterOptionsTitle = _ref7.filterOptionsTitle,
+      leftTitle = _ref7.leftTitle,
+      filterOptions = _ref7.filterOptions,
+      sortOptions = _ref7.sortOptions,
+      sortValues = _ref7.sortValues,
+      filterValueTitle = _ref7.filterValueTitle,
+      filterValues = _ref7.filterValues,
+      rightTitle = _ref7.rightTitle,
+      isFilterable = _ref7.isFilterable,
+      FormFieldGridProps = _ref7.FormFieldGridProps,
+      InternalGridProps = _ref7.InternalGridProps,
+      ListGridProps = _ref7.ListGridProps,
+      LeftListGridProps = _ref7.LeftListGridProps,
+      ListProps = _ref7.ListProps,
+      LeftListProps = _ref7.LeftListProps,
+      ButtonsGridProps = _ref7.ButtonsGridProps,
+      ButtonsInternalGridProps = _ref7.ButtonsInternalGridProps,
+      ButtonGridProps = _ref7.ButtonGridProps,
+      ToRightGridProps = _ref7.ToRightGridProps,
+      IconButtonProps = _ref7.IconButtonProps,
+      ToRightIconButtonProps = _ref7.ToRightIconButtonProps,
+      AllToRightGridProps = _ref7.AllToRightGridProps,
+      AllToRightIconButtonProps = _ref7.AllToRightIconButtonProps,
+      AllToLeftGridProps = _ref7.AllToLeftGridProps,
+      AllToLeftIconButtonProps = _ref7.AllToLeftIconButtonProps,
+      ToLeftGridProps = _ref7.ToLeftGridProps,
+      ToLeftIconButtonProps = _ref7.ToLeftIconButtonProps,
+      RightListGridProps = _ref7.RightListGridProps,
+      RightListProps = _ref7.RightListProps,
+      ListItemProps = _ref7.ListItemProps,
+      ListItemIconProps = _ref7.ListItemIconProps,
+      ListItemTextProps = _ref7.ListItemTextProps,
+      ListItemSecondaryActionProps = _ref7.ListItemSecondaryActionProps,
+      LeftListItemProps = _ref7.LeftListItemProps,
+      LeftListItemIconProps = _ref7.LeftListItemIconProps,
+      LeftItemTextProps = _ref7.LeftItemTextProps,
+      LeftItemSecondaryActionProps = _ref7.LeftItemSecondaryActionProps,
+      RightListItemProps = _ref7.RightListItemProps,
+      RightListItemIconProps = _ref7.RightListItemIconProps,
+      RightItemTextProps = _ref7.RightItemTextProps,
+      RightItemSecondaryActionProps = _ref7.RightItemSecondaryActionProps,
+      FormControlProps = _ref7.FormControlProps,
+      FormLabelProps = _ref7.FormLabelProps,
+      FormHelperTextProps = _ref7.FormHelperTextProps,
+      TitleProps = _ref7.TitleProps,
+      ToolbarProps = _ref7.ToolbarProps,
+      FilterFieldProps = _ref7.FilterFieldProps,
+      SortIconButtonProps = _ref7.SortIconButtonProps,
+      SortIconProps = _ref7.SortIconProps,
+      LeftToolbarProps = _ref7.LeftToolbarProps,
+      LeftFilterFieldProps = _ref7.LeftFilterFieldProps,
+      LeftSortIconButtonProps = _ref7.LeftSortIconButtonProps,
+      LeftSortIconProps = _ref7.LeftSortIconProps,
+      LeftTitleProps = _ref7.LeftTitleProps,
+      RightToolbarProps = _ref7.RightToolbarProps,
+      RightFilterFieldProps = _ref7.RightFilterFieldProps,
+      RightSortIconButtonProps = _ref7.RightSortIconButtonProps,
+      RightSortIconProps = _ref7.RightSortIconProps,
+      RightTitleProps = _ref7.RightTitleProps,
+      PaperProps = _ref7.PaperProps,
+      LeftPaperProps = _ref7.LeftPaperProps,
+      RightPaperProps = _ref7.RightPaperProps;
   var invalid = validationError(meta, validateOnMount);
   var text = invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description;
-  return /*#__PURE__*/React.createElement(FormFieldGrid, FormFieldGridProps, /*#__PURE__*/React.createElement(FormControl, _extends({
+  return /*#__PURE__*/React.createElement(StyledDualListSelect, FormFieldGridProps, /*#__PURE__*/React.createElement(FormControl, _extends({
     fullWidth: true,
     required: isRequired,
     error: !!invalid,

package/esm/field-array/field-array.js

@@ -7,49 +7,53 @@ var _excluded = ["remove"],
     _excluded2 = ["remove"],
     _excluded3 = ["arrayValidator", "label", "description", "fields", "defaultItem", "meta", "minItems", "maxItems", "noItemsMessage", "FormFieldGridProps", "FormControlProps", "buttonLabels", "GridContainerProps", "HeaderGridProps", "HeaderProps", "UndoButtonProps", "RedoButtonProps", "AddButtonProps", "DescriptionGridProps", "DescriptionProps", "BodyGridProps", "NoItemsProps", "FormHelperTextGridProps", "FormHelperTextProps", "FieldContainerProps", "FieldGroupGridProps", "RemoveButtonGridProps", "RemoveButtonProps"];
 
+var _styled;
+
 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; }
 
 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, { memo, useReducer } from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
 import FieldArray from "@data-driven-forms/react-form-renderer/field-array";
 import isEqual from 'lodash/isEqual';
-import Grid from "@material-ui/core/esm/Grid";
-import Button from "@material-ui/core/esm/Button";
-import Typography from "@material-ui/core/esm/Typography";
-import FormControl from "@material-ui/core/esm/FormControl";
-import FormHelperText from "@material-ui/core/esm/FormHelperText";
-import IconButton from "@material-ui/core/esm/IconButton";
-import { makeStyles } from '@material-ui/core/styles';
-import RedoIcon from '@material-ui/icons/Redo';
-import UndoIcon from '@material-ui/icons/Undo';
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import IconButton from "@mui/material/IconButton";
+import RedoIcon from '@mui/icons-material/Redo';
+import UndoIcon from '@mui/icons-material/Undo';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import clsx from 'clsx';
-var useFielArrayStyles = makeStyles({
-  formControl: {
-    width: '100%'
-  },
-  centerText: {
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  buttonsToEnd: {
-    display: 'flex',
-    justifyContent: 'flex-end'
-  },
-  header: {
-    display: 'flex'
-  },
-  label: {
-    flexGrow: 1
-  },
-  fieldArrayGroup: {
-    marginBottom: 32
-  }
-});
+var PREFIX = 'DynamicArray';
+var classes = {
+  formControl: "".concat(PREFIX, "-formControl"),
+  centerText: "".concat(PREFIX, "-centerText"),
+  buttonsToEnd: "".concat(PREFIX, "-buttonsToEnd"),
+  header: "".concat(PREFIX, "-header"),
+  label: "".concat(PREFIX, "-label"),
+  fieldArrayGroup: "".concat(PREFIX, "-fieldArrayGroup")
+};
+var StyledFormFieldGrid = styled(FormFieldGrid)((_styled = {}, _defineProperty(_styled, "& .".concat(classes.formControl), {
+  width: '100%'
+}), _defineProperty(_styled, "& .".concat(classes.centerText), {
+  display: 'flex',
+  justifyContent: 'center'
+}), _defineProperty(_styled, "& .".concat(classes.buttonsToEnd), {
+  display: 'flex',
+  justifyContent: 'flex-end'
+}), _defineProperty(_styled, "& .".concat(classes.header), {
+  display: 'flex'
+}), _defineProperty(_styled, "& .".concat(classes.label), {
+  flexGrow: 1
+}), _defineProperty(_styled, "&.".concat(classes.fieldArrayGroup), {
+  marginBottom: 32
+}), _styled));
 var ArrayItem = /*#__PURE__*/memo(function (_ref) {
   var fields = _ref.fields,
       fieldIndex = _ref.fieldIndex,
@@ -66,7 +70,6 @@ var ArrayItem = /*#__PURE__*/memo(function (_ref) {
   var _useFormApi = useFormApi(),
       renderForm = _useFormApi.renderForm;
 
-  var classes = useFielArrayStyles();
   var editedFields = fields.map(function (field, index) {
     var computedName = field.name ? "".concat(name, ".").concat(field.name) : name;
     return _objectSpread(_objectSpread({}, field), {}, {
@@ -202,13 +205,12 @@ var DynamicArray = function DynamicArray(_ref5) {
 
   var combinedButtonLabels = _objectSpread(_objectSpread({}, defaultButtonLabels), buttonLabels);
 
-  var classes = useFielArrayStyles();
   var dirty = meta.dirty,
       submitFailed = meta.submitFailed,
       error = meta.error,
       submitError = meta.submitError;
   var isError = (dirty || submitFailed) && error && typeof error === 'string';
-  return /*#__PURE__*/React.createElement(FormFieldGrid, _extends({}, FormFieldGridProps, {
+  return /*#__PURE__*/React.createElement(StyledFormFieldGrid, _extends({}, FormFieldGridProps, {
     className: clsx(classes.fieldArrayGroup, FormFieldGridProps.classname)
   }), /*#__PURE__*/React.createElement(FormControl, _extends({
     component: "fieldset",
@@ -275,13 +277,17 @@ var DynamicArray = function DynamicArray(_ref5) {
       component: "span",
       disabled: state.index === 0,
       onClick: undo
-    }, UndoButtonProps), /*#__PURE__*/React.createElement(UndoIcon, null)), /*#__PURE__*/React.createElement(IconButton, _extends({
+    }, UndoButtonProps, {
+      size: "large"
+    }), /*#__PURE__*/React.createElement(UndoIcon, null)), /*#__PURE__*/React.createElement(IconButton, _extends({
       color: "primary",
       "aria-label": "redo",
       component: "span",
       disabled: state.index === state.history.length,
       onClick: redo
-    }, RedoButtonProps), /*#__PURE__*/React.createElement(RedoIcon, null)), /*#__PURE__*/React.createElement(Button, _extends({
+    }, RedoButtonProps, {
+      size: "large"
+    }), /*#__PURE__*/React.createElement(RedoIcon, null)), /*#__PURE__*/React.createElement(Button, _extends({
       color: "primary",
       onClick: pushWrapper,
       disabled: value.length >= maxItems