@hipay/hipay-material-ui 3.9.2 → 3.11.0-beta.0

package/HiDatePicker/Overlays/CustomOverlayLayoutWithoutFooter.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -17,9 +17,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var styles = function styles(theme) {
   return {
@@ -98,7 +98,7 @@ var CustomOverlayLayoutWithoutFooter = function CustomOverlayLayoutWithoutFooter
   );
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   name: 'HmuiCustomOverlayLayoutWithoutFooter'
 })(CustomOverlayLayoutWithoutFooter);
 

package/HiDatePicker/Overlays/Overlay.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -17,9 +17,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var styles = function styles() {
   return {
@@ -72,7 +72,7 @@ var Overlay = function Overlay(_ref) {
   );
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   name: 'HmuiOverlay'
 })(Overlay);
 

package/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -27,7 +27,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _react = _interopRequireDefault(require("react"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _Calendar = _interopRequireDefault(require("mdi-material-ui/Calendar"));
 
@@ -35,7 +35,7 @@ var _CustomOverlayLayout = _interopRequireDefault(require("./CustomOverlayLayout
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -185,7 +185,8 @@ var TimePickerOverlay = /*#__PURE__*/function (_React$Component) {
           className: classes.clockIconButton,
           onClick: function onClick() {
             return onCalendarClick();
-          }
+          },
+          size: "large"
         }, _ref)
       }, props), /*#__PURE__*/_react.default.createElement("div", {
         className: classes.column
@@ -212,7 +213,7 @@ TimePickerOverlay.defaultProps = {
   }
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   name: 'HmuiTimePickerOverlay'
 })(TimePickerOverlay);
 

package/HiDatePicker/Overlays/index.js

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Overlay", {
-  enumerable: true,
-  get: function get() {
-    return _Overlay.default;
-  }
-});
 Object.defineProperty(exports, "CustomOverlayLayout", {
   enumerable: true,
   get: function get() {
@@ -23,6 +17,12 @@ Object.defineProperty(exports, "MonthPickerOverlay", {
     return _MonthPickerOverlay.default;
   }
 });
+Object.defineProperty(exports, "Overlay", {
+  enumerable: true,
+  get: function get() {
+    return _Overlay.default;
+  }
+});
 Object.defineProperty(exports, "TimePickerOverlay", {
   enumerable: true,
   get: function get() {

package/HiDatePicker/stylesheet.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+var _styles = require("@mui/material/styles");
 
 var _default = function _default(theme) {
   return {
@@ -188,7 +188,7 @@ var _default = function _default(theme) {
       fontWeight: theme.typography.fontWeightMedium,
       textTransform: 'uppercase',
       '&:hover': {
-        backgroundColor: (0, _colorManipulator.alpha)(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
+        backgroundColor: (0, _styles.alpha)(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'

package/HiDialog/HiDialog.js

@@ -13,15 +13,15 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles.default)(function (theme) {
   return {
     paper: {
       backgroundColor: theme.palette.background3,

package/HiDotsStepper/HiDot.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -23,7 +23,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
@@ -96,7 +96,7 @@ HiDot.defaultProps = {
   status: 'unreviewed'
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiDot'
 })(HiDot);

package/HiDotsStepper/HiDotsStepper.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
 
@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiDot = _interopRequireDefault(require("./HiDot"));
 
@@ -108,7 +108,7 @@ var HiDotsStepper = /*#__PURE__*/function (_React$PureComponent) {
   return HiDotsStepper;
 }(_react.default.PureComponent);
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiDotsStepper'
 })(HiDotsStepper);

package/HiExpansionPanel/HiExpansionPanel.js

@@ -21,13 +21,13 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
 
-var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
 
-var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -37,7 +37,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles.default)(function (theme) {
   return {
     summaryContent: {
       display: 'flex',

package/HiForm/HiFormControl.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -31,15 +31,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+var _Warning = _interopRequireDefault(require("@mui/icons-material/Warning"));
 
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiFormLabel = _interopRequireDefault(require("./HiFormLabel"));
 
@@ -244,7 +244,8 @@ var HiFormControl = /*#__PURE__*/function (_React$PureComponent) {
         fullWidth: fullWidth,
         className: className,
         error: error,
-        ref: rootRef
+        ref: rootRef,
+        variant: "standard"
       }, others), error && errorText && helperOpen && /*#__PURE__*/_react.default.createElement("div", {
         className: classes.errorDiv
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -273,11 +274,13 @@ var HiFormControl = /*#__PURE__*/function (_React$PureComponent) {
         className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError, (0, _defineProperty2.default)({}, classes.iconFullWidth, fullWidth)),
         onClick: this.handleHelperClick
       }, /*#__PURE__*/_react.default.createElement(_Warning.default, {
+        fontSize: "small",
         className: (0, _classnames.default)(classes.icon)
       })), helperIcon && helperText && !error && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
         className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconButtonInfoActive, helperOpen), (0, _defineProperty2.default)(_classNames2, classes.iconFullWidth, fullWidth), _classNames2)),
         onClick: this.handleHelperClick
       }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+        fontSize: "small",
         className: (0, _classnames.default)(classes.icon)
       }))), /*#__PURE__*/_react.default.createElement("div", {
         onMouseEnter: this.handleHover(true),
@@ -308,7 +311,7 @@ HiFormControl.defaultProps = {
   maxLength: 280
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiFormControl'
 })(HiFormControl);

package/HiForm/HiFormLabel.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -25,11 +25,11 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _react = _interopRequireDefault(require("react"));
 
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -118,7 +118,7 @@ HiFormLabel.defaultProps = {
   }
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiFormLabel'
 })(HiFormLabel);

package/HiForm/HiInput.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
 
@@ -33,13 +33,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _index = _interopRequireDefault(require("keycode/index"));
 
-var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
+var _Input = _interopRequireDefault(require("@mui/material/Input"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -145,8 +145,7 @@ var styles = function styles(theme) {
     },
     eraseButton: {
       height: 40,
-      width: 40,
-      display: 'inline-block'
+      width: 40
     },
     eraseButtonLabel: {
       position: 'relative',
@@ -220,7 +219,9 @@ var HiInput = /*#__PURE__*/function (_React$PureComponent) {
     value: function getInputElement(el) {
       this.inputElement = el;
 
-      if (this.props.inputRef) {
+      if (this.props.customRef) {
+        this.props.customRef(this.inputElement);
+      } else if (this.props.inputRef) {
         this.props.inputRef(this.inputElement);
       }
     }
@@ -442,7 +443,7 @@ var HiInput = /*#__PURE__*/function (_React$PureComponent) {
           }
         }, eraseIcon, endAdornment),
         inputProps: (0, _objectSpread2.default)({
-          spellCheck: spellcheck ? "true" : "false",
+          spellCheck: spellcheck ? 'true' : 'false',
           className: (0, _classnames.default)(inputClassName, classes.inputPropsClassName, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.inputText, !multiline), (0, _defineProperty2.default)(_classNames4, classes.inputTextArea, multiline), _classNames4))
         }, inputProps)
       }));
@@ -476,7 +477,7 @@ HiInput.defaultProps = {
   spellcheck: false
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HiMuiHiInput'
 })(HiInput);

package/HiForm/HiPasswordField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -31,7 +31,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiTextField = _interopRequireDefault(require("./HiTextField"));
 
@@ -108,7 +108,7 @@ var HiPasswordField = /*#__PURE__*/function (_React$Component) {
   return HiPasswordField;
 }(_react.default.Component);
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiPasswordField'
 })(HiPasswordField);

package/HiForm/HiSlider.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -23,7 +23,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
 
@@ -279,7 +279,7 @@ var HiSlider = /*#__PURE__*/function (_React$Component) {
   return HiSlider;
 }(_react.default.Component);
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HiSlider',
   withTheme: true

package/HiForm/HiTextField.js

@@ -113,7 +113,8 @@ var HiTextField = /*#__PURE__*/function (_React$PureComponent) {
           HiInputLabelProps = _this$props.HiInputLabelProps,
           name = _this$props.name,
           rows = _this$props.rows,
-          maxLength = _this$props.maxLength;
+          maxLength = _this$props.maxLength,
+          customRef = _this$props.customRef;
       var nbChars = this.state.nbChars;
       return /*#__PURE__*/_react.default.createElement(_HiFormControl.default, {
         label: label,
@@ -146,6 +147,7 @@ var HiTextField = /*#__PURE__*/function (_React$PureComponent) {
         onRightIconClick: this.props.onRightIconClick,
         onLeftIconClick: this.props.onLeftIconClick,
         rows: rows,
+        customRef: customRef,
         inputRef: function inputRef(input) {
           _this2.input = input;
         }

package/HiForm/HiUpload.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -29,7 +29,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _index = _interopRequireDefault(require("keycode/index"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiUploadInput = _interopRequireDefault(require("./HiUploadInput"));
 
@@ -388,7 +388,7 @@ var HiUpload = /*#__PURE__*/function (_React$PureComponent) {
   return HiUpload;
 }(_react.default.PureComponent);
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiUpload'
 })(HiUpload);

package/HiForm/HiUploadInput.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.styles = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -25,13 +25,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
 
-var _RemoveRedEye = _interopRequireDefault(require("@material-ui/icons/RemoveRedEye"));
+var _RemoveRedEye = _interopRequireDefault(require("@mui/icons-material/RemoveRedEye"));
 
-var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -137,7 +137,7 @@ var styles = function styles(theme) {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      padding: "".concat(theme.spacing(2) - 2, "px 0 ").concat(theme.spacing(2) - 1, "px"),
+      padding: "calc(".concat(theme.spacing(2) - 2, "px 0 ").concat(theme.spacing(2), " - 1px)"),
       height: 39,
       display: 'inline-flex',
       width: '100%',
@@ -393,7 +393,7 @@ HiUploadInput.defaultProps = {
   }
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiUploadInput'
 })(HiUploadInput);

package/HiIcon/HiIcon.js

@@ -7,7 +7,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.useStyles = void 0;
+exports.useStyles = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -21,9 +21,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 var _helpers = require("../utils/helpers");
 
@@ -33,7 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles.default)(function (theme) {
   return {
     /* Styles applied to the root element. */
     root: {
@@ -62,46 +62,46 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
   var classes = useStyles(props);
   var iconName = icon !== null ? icon : children;
 
-  if (iconName && (0, _typeof2.default)(iconName) === "object") {
+  if (iconName && (0, _typeof2.default)(iconName) === 'object') {
     return iconName;
   }
 
   var iconType = (0, _react.useMemo)(function () {
     if (iconName && iconName.indexOf('fa-') === 0) {
-      return "line_awesome";
+      return 'line_awesome';
     } else if (iconName && iconName.indexOf('hi_') === 0) {
-      return "hipay";
+      return 'hipay';
     } else {
-      return "mui";
+      return 'mui';
     }
   }, [iconName]);
 
   switch (iconType) {
-    case "line_awesome":
+    case 'line_awesome':
       return /*#__PURE__*/_react.default.createElement("i", (0, _extends2.default)({
         ref: ref,
-        className: (0, _classnames.default)('fa', iconName, className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        className: (0, _classnames.default)('fa', iconName, className, (0, _defineProperty2.default)({}, classes.root, color !== 'inherit')),
         style: {
           fontSize: size
         }
       }, other));
 
-    case "hipay":
+    case 'hipay':
       var HipayIconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
       return /*#__PURE__*/_react.default.createElement(HipayIconName, (0, _extends2.default)({
         ref: ref,
-        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
-        color: "currentColor",
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== 'inherit')),
+        color: 'currentColor',
         size: size
       }, other));
 
-    case "mui":
+    case 'mui':
     default:
       // console.log({ ...props });
       return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
         ref: ref,
-        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
-        color: "inherit",
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== 'inherit')),
+        color: 'inherit',
         style: {
           fontSize: size
         }