@data-driven-forms/mui-component-mapper 3.15.7 → 3.16.1

package/README.md

@@ -8,7 +8,7 @@ Material-UI component mapper for [Data Driven Forms](https://github.com/data-dri
 
 :book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:
 
-[Material-IU docs](https://material-ui.com/)
+[Material-IU docs](https://mui.com/)
 
 
 **Table of Contents**
@@ -102,7 +102,7 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
 ### Useful links
 
 - [Data Driven Forms documentation](https://data-driven-forms.org/)
-- [Material-UI documentation](https://material-ui.com/)
+- [Material-UI documentation](https://mui.com/)
 - NPM
   - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
   - [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)

package/checkbox/checkbox.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig } from '@data-driven-forms/react-form-renderer';
-import { CheckboxProps as MuiCheckboxProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@material-ui/core';
+import { CheckboxProps as MuiCheckboxProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@mui/material';
 
 interface InternalCheckboxProps extends MuiCheckboxProps {
   FormFieldGridProps?: GridProps;

package/checkbox/checkbox.js

@@ -17,17 +17,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/node/Checkbox"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _FormControl = _interopRequireDefault(require("@mui/material/node/FormControl"));
 
-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 _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 _propTypesTemplates = require("@data-driven-forms/common/prop-types-templates");
 

package/date-picker/date-picker.d.ts

@@ -1,11 +1,8 @@
-import { DatePickerProps as MuiDatePickerProps } from "@material-ui/pickers/DatePicker";
+import { DatePickerProps as MuiDatePickerProps } from "@mui/lab/DatePicker";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { GridProps } from "@material-ui/core";
-import { MuiPickersUtilsProviderProps } from "@material-ui/pickers/MuiPickersUtilsProvider";
-
+import { GridProps } from "@mui/material";
 interface InternalDatePickerProps extends MuiDatePickerProps {
   FormFieldGridProps: GridProps;
-  MuiPickersUtilsProviderProps: MuiPickersUtilsProviderProps;
   DatePickerProps: MuiDatePickerProps;
 }
 

package/date-picker/date-picker.js

@@ -13,9 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _pickers = require("@material-ui/pickers");
-
-var _moment = _interopRequireDefault(require("@date-io/moment"));
+var _DatePicker = _interopRequireDefault(require("@mui/lab/node/DatePicker"));
 
 var _formFieldGrid = _interopRequireDefault(require("../form-field-grid/form-field-grid"));
 
@@ -25,6 +23,8 @@ var _propTypesTemplates = require("@data-driven-forms/common/prop-types-template
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
+var _TextField = _interopRequireDefault(require("@mui/material/node/TextField"));
+
 var DatePicker = function DatePicker(props) {
   var _useFieldApi = (0, _useFieldApi2["default"])(props),
       input = _useFieldApi.input,
@@ -37,29 +37,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 = (0, _validationError.validationError)(meta, validateOnMount);
-  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], FormFieldGridProps, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, (0, _extends2["default"])({
-    locale: locale,
-    utils: _moment["default"]
-  }, MuiPickersUtilsProviderProps), /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, (0, _extends2["default"])({
-    fullWidth: true,
-    margin: "normal",
-    label: label,
-    helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], FormFieldGridProps, /*#__PURE__*/_react["default"].createElement(_DatePicker["default"], (0, _extends2["default"])({
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({}, 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 = {
@@ -72,15 +70,12 @@ DatePicker.propTypes = {
   label: _propTypes["default"].node,
   helperText: _propTypes["default"].node,
   validateOnMount: _propTypes["default"].bool,
-  locale: _propTypes["default"].string,
   description: _propTypes["default"].node,
   FormFieldGridProps: _propTypes["default"].object,
-  MuiPickersUtilsProviderProps: _propTypes["default"].object,
   DatePickerProps: _propTypes["default"].object
 };
 DatePicker.defaultProps = {
   FormFieldGridProps: {},
-  MuiPickersUtilsProviderProps: {},
   DatePickerProps: {}
 };
 var _default = DatePicker;

package/dual-list-select/dual-list-select.d.ts

@@ -16,7 +16,7 @@ import {
   ToolbarProps,
   TextFieldProps,
   PaperProps,
-} from "@material-ui/core";
+} from "@mui/material";
 
 export interface DualListOption extends AnyObject {
   value: any;

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

@@ -7,51 +7,51 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+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 _clsx = _interopRequireDefault(require("clsx"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
-var _List = _interopRequireDefault(require("@material-ui/core/List"));
+var _List = _interopRequireDefault(require("@mui/material/node/List"));
 
-var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _ListItem = _interopRequireDefault(require("@mui/material/node/ListItem"));
 
-var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/node/ListItemText"));
 
-var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/node/ListItemIcon"));
 
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/node/Checkbox"));
 
-var _ListItemSecondaryAction = _interopRequireDefault(require("@material-ui/core/ListItemSecondaryAction"));
+var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/node/ListItemSecondaryAction"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/node/IconButton"));
 
-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 _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/node/Toolbar"));
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _TextField = _interopRequireDefault(require("@mui/material/node/TextField"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/node/Typography"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/node/Paper"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/node/Button"));
 
-var _ArrowUpward = _interopRequireDefault(require("@material-ui/icons/ArrowUpward"));
-
-var _styles = require("@material-ui/core/styles");
+var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
 
 var _dualListSelect = _interopRequireDefault(require("@data-driven-forms/common/dual-list-select"));
 
@@ -63,53 +63,57 @@ 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 (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 = (0, _styles.styled)(_formFieldGrid["default"])(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme;
+  return _ref2 = {}, (0, _defineProperty2["default"])(_ref2, "& .".concat(classes.allToLeftIcon), {
+    transform: 'scaleX(-1)'
+  }), (0, _defineProperty2["default"])(_ref2, "& .".concat(classes.upsideDown), {
+    transform: 'scaleY(-1)'
+  }), (0, _defineProperty2["default"])(_ref2, "& .".concat(classes.list), {
+    height: 300,
+    overflow: 'auto'
+  }), (0, _defineProperty2["default"])(_ref2, "& .".concat(classes.button), {
+    display: 'flex',
+    justifyContent: 'center',
+    margin: theme.spacing(0.5, 0)
+  }), (0, _defineProperty2["default"])(_ref2, "& .".concat(classes.buttonsGrid), {
+    height: '100%',
+    alignContent: 'center'
+  }), (0, _defineProperty2["default"])(_ref2, "& .".concat(classes.filter), {
+    width: '100%'
+  }), (0, _defineProperty2["default"])(_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["default"].createElement(_Paper["default"], (0, _extends2["default"])({}, PaperProps, LeftPaperProps, {
     className: (0, _clsx["default"])(PaperProps && PaperProps.className, LeftPaperProps && LeftPaperProps.className)
   }), /*#__PURE__*/_react["default"].createElement(_List["default"], (0, _extends2["default"])({
@@ -123,16 +127,16 @@ var ListInternal = function ListInternal(_ref) {
     disabled: true
   }, ListItemProps), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
     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["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
       button: true,
       key: value,
@@ -177,21 +181,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["default"].createElement(_Toolbar["default"], (0, _extends2["default"])({
     variant: "dense"
   }, ToolbarProps, LeftToolbarProps, {
@@ -200,8 +203,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,
@@ -213,7 +216,9 @@ var ToolbarInternal = function ToolbarInternal(_ref3) {
     edge: "end",
     onClick: sortOptions,
     color: "inherit"
-  }, SortIconButtonProps, LeftSortIconButtonProps), /*#__PURE__*/_react["default"].createElement(_ArrowUpward["default"], (0, _extends2["default"])({}, SortIconProps, LeftSortIconProps, {
+  }, SortIconButtonProps, LeftSortIconButtonProps, {
+    size: "large"
+  }), /*#__PURE__*/_react["default"].createElement(_ArrowUpward["default"], (0, _extends2["default"])({}, SortIconProps, LeftSortIconProps, {
     className: (0, _clsx["default"])(!sortDesc && classes.upsideDown, SortIconProps && SortIconProps.className, LeftSortIconProps && LeftSortIconProps.className)
   }))));
 };
@@ -235,99 +240,98 @@ ToolbarInternal.propTypes = {
   sortDesc: _propTypes["default"].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 = (0, _validationError.validationError)(meta, validateOnMount);
   var text = invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description;
-  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], FormFieldGridProps, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(StyledDualListSelect, FormFieldGridProps, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], (0, _extends2["default"])({
     fullWidth: true,
     required: isRequired,
     error: !!invalid,

package/esm/checkbox/checkbox.js

@@ -10,12 +10,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import MUICheckbox from "@material-ui/core/esm/Checkbox";
-import FormControl from "@material-ui/core/esm/FormControl";
-import FormControlLabel from "@material-ui/core/esm/FormControlLabel";
-import FormHelperText from "@material-ui/core/esm/FormHelperText";
-import FormGroup from "@material-ui/core/esm/FormGroup";
-import FormLabel from "@material-ui/core/esm/FormLabel";
+import MUICheckbox from "@mui/material/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormGroup from "@mui/material/FormGroup";
+import FormLabel from "@mui/material/FormLabel";
 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';