@agilemotion/oui-react-js 1.8.2 → 1.8.4

package/dist/components/card/CardHeader.js

@@ -7,7 +7,7 @@ exports.default = CardHeader;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _cardHeaderStyle = _interopRequireDefault(require("../../assets/jss/components/cardHeaderStyle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // nodejs library that concatenates classes

package/dist/components/card/CardIcon.js

@@ -7,7 +7,7 @@ exports.default = CardIcon;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _cardIconStyle = _interopRequireDefault(require("../../assets/jss/components/cardIconStyle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // nodejs library that concatenates classes

package/dist/components/card/CardText.js

@@ -7,7 +7,7 @@ exports.default = CardText;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _cardTextStyle = _interopRequireDefault(require("../../assets/jss/components/cardTextStyle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // nodejs library that concatenates classes

package/dist/components/customInput/CustomInput.js

@@ -7,11 +7,11 @@ exports.default = CustomInput;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _styles = require("@material-ui/core/styles");
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
-var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
+var _styles = require("@mui/styles");
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
+var _Input = _interopRequireDefault(require("@mui/material/Input"));
 var _customInputStyle = _interopRequireDefault(require("../../assets/jss/components/customInputStyle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }

package/dist/components/customInput/File.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./Form.css");
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,7 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const {
   electron
 } = window;
-const File = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const File = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [files, setFiles] = _react.default.useState(!props.value ? [] : props.value);
   const handleChange = () => event => {
     let targetFiles = event.target.files;

package/dist/components/dashboard/FoldingSideTabDashboard.js

@@ -9,7 +9,6 @@ var _withWidth = require("material-ui/utils/withWidth");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _ViewPort = _interopRequireDefault(require("../layout/ViewPort"));
-var _Window = _interopRequireDefault(require("../layout/Window"));
 var _reactRouterDom = require("react-router-dom");
 var _perfectScrollbar = _interopRequireDefault(require("perfect-scrollbar"));
 var _FoldingTabSidebar = _interopRequireDefault(require("./components/blackDashboard/sidebar/FoldingTabSidebar"));
@@ -19,6 +18,8 @@ var _DashboardStore = require("../../redux/store/DashboardStore");
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _SocketManager = _interopRequireDefault(require("../SocketManager"));
 var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
+var _styles = require("@mui/material/styles");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let ps;

package/dist/components/dashboard/SideMenuModuleDashboard.js

@@ -117,7 +117,6 @@ const SideMenuModuleDashboard = props => {
       }
       let newRoutes = [];
       let newRoute = {};
-      console.log(props.settings.systemProfileDto);
       if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
         for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
           let module = props.settings.systemProfileDto.modules[i];
@@ -223,7 +222,7 @@ const SideMenuModuleDashboard = props => {
   };
   function launchDashboard() {
     _ApplicationManager.default.closeAllViews();
-    _ApplicationManager.default.navigate('/switch');
+    //applicationManager.navigate('/switch');
     _ApplicationManager.default.navigate('/view/dashboard');
   }
   return loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/dashboard/components/UserIdentity.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _colors = require("material-ui/styles/colors");
 var _Avatar = _interopRequireDefault(require("material-ui/Avatar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const UserIdentity = exports.UserIdentity = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const UserIdentity = props => {
   const style = {
     avatar: {
       div: {
@@ -42,5 +42,6 @@ const UserIdentity = exports.UserIdentity = /*#__PURE__*/_react.default.forwardR
     size: 24,
     style: style.avatar.icon
   }));
-});
+};
+exports.UserIdentity = UserIdentity;
 var _default = exports.default = UserIdentity;

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.js

@@ -10,7 +10,7 @@ var _Utils = _interopRequireDefault(require("../../../../../Utils"));
 var _reactstrap = require("reactstrap");
 var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
 var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 var _RestUtils = require("../../../../../RestUtils");
 require("./FoldingTabSidebar.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -211,7 +211,7 @@ class FoldingTabSidebar extends _react.default.Component {
         className: `${'menu-link-li' + (this.activeRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')}`,
         key: key,
         style: this.activeRoute(prop.id) ? {
-          backgroundColor: (0, _core.lighten)(secondaryThemeColor, .9),
+          backgroundColor: (0, _material.lighten)(secondaryThemeColor, .9),
           borderRadius: '16px',
           color: secondaryThemeColor,
           fontWeight: 500
@@ -232,7 +232,7 @@ class FoldingTabSidebar extends _react.default.Component {
         viewId: "menuBar",
         icon: prop.icon,
         iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? secondaryThemeColor : null,
-        backgroundColor: this.activeRoute(prop.id) ? (0, _core.lighten)(secondaryThemeColor, .9) : null,
+        backgroundColor: this.activeRoute(prop.id) ? (0, _material.lighten)(secondaryThemeColor, .9) : null,
         name: prop.name,
         id: prop.id,
         level: prop.level,

package/dist/components/dashboard/components/blackDashboard/sidebar/ModuleMenu.js

@@ -10,7 +10,7 @@ var _Utils = _interopRequireDefault(require("../../../../../Utils"));
 var _reactstrap = require("reactstrap");
 var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
 var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 var _RestUtils = require("../../../../../RestUtils");
 require("./FoldingTabSidebar.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/dashboard/components/blackDashboard/sidebar/ModuleMenuSidebar.js

@@ -10,7 +10,7 @@ var _Utils = _interopRequireDefault(require("../../../../../Utils"));
 var _reactstrap = require("reactstrap");
 var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
 var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 var _RestUtils = require("../../../../../RestUtils");
 require("./ModuleMenuSidebar.css");
 var _Event = _interopRequireDefault(require("../../../../../event/Event"));
@@ -69,6 +69,28 @@ const ModuleMenuSidebar = props => {
       getMenu(currentModule).then(result => {});
     }
   }, [activeModule]);
+  _react.default.useEffect(() => {
+    if (selectedMenuRoutes) {
+      let defaultMenu = selectedMenuRoutes.find(m => m.item.defaultItem);
+      if (defaultMenu) {
+        if (defaultMenu.id === 'Dashboard') {
+          props.dashboardLauncher();
+        }
+        setActiveRouteMenu({
+          id: defaultMenu.id,
+          name: defaultMenu.name
+        });
+        let event = new _Event.default({
+          api: {
+            get id() {
+              return defaultMenu.id;
+            }
+          }
+        }, "menuBar");
+        _Observable.default.fireEvent(_EventType.default.CLICK, event);
+      }
+    }
+  }, [selectedMenuRoutes]);
   const getViews = (menus, level) => {
     let newViews = [];
     for (let i = 0; i < menus.length; i++) {
@@ -171,24 +193,6 @@ const ModuleMenuSidebar = props => {
       }, 'dashboard-sidebar', result => {
         let views = getViews(result.menus, route.level + 1);
         setSelectedMenuRoutes(views);
-        let defaultMenu = views.find(m => m.item.defaultItem);
-        if (defaultMenu) {
-          if (defaultMenu.id === 'Dashboard') {
-            props.dashboardLauncher();
-          }
-          setActiveRouteMenu({
-            id: defaultMenu.id,
-            name: defaultMenu.name
-          });
-          let event = new _Event.default({
-            api: {
-              get id() {
-                return defaultMenu.id;
-              }
-            }
-          }, "menuBar");
-          _Observable.default.fireEvent(_EventType.default.CLICK, event);
-        }
         resolve(views);
       }, e => {
         console.error(e);
@@ -209,7 +213,7 @@ const ModuleMenuSidebar = props => {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: key,
         style: {
-          backgroundColor: isActiveModule(module.name) ? primaryThemeColor : (0, _core.lighten)(secondaryThemeColor, .1)
+          backgroundColor: isActiveModule(module.name) ? primaryThemeColor : (0, _material.lighten)(secondaryThemeColor, .1)
         },
         className: `${isActiveModule(module.name) ? 'module-tab-selected' : 'module-tab'}`,
         onClick: e => {
@@ -292,7 +296,7 @@ const ModuleMenuSidebar = props => {
         className: `${'menu-link-li' + (isActiveRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')}`,
         key: key,
         style: isActiveRoute(prop.id) ? {
-          backgroundColor: (0, _core.lighten)(secondaryThemeColor, .9),
+          backgroundColor: (0, _material.lighten)(secondaryThemeColor, .9),
           borderRadius: '16px',
           color: secondaryThemeColor,
           fontWeight: 500
@@ -309,7 +313,7 @@ const ModuleMenuSidebar = props => {
         viewId: "menuBar",
         icon: prop.icon,
         iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && isActiveRoute(prop.id) ? secondaryThemeColor : null,
-        backgroundColor: isActiveRoute(prop.id) ? (0, _core.lighten)(secondaryThemeColor, .9) : null,
+        backgroundColor: isActiveRoute(prop.id) ? (0, _material.lighten)(secondaryThemeColor, .9) : null,
         name: prop.name,
         id: prop.id,
         level: prop.level,

package/dist/components/footer/Footer.js

@@ -7,9 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _styles = require("@material-ui/core/styles");
-var _List = _interopRequireDefault(require("@material-ui/core/List"));
-var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _styles = require("@mui/styles");
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 var _footerStyle = _interopRequireDefault(require("../../assets/jss/components/footerStyle"));
 var _CardAvatar = _interopRequireDefault(require("../card/CardAvatar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/form/AddressSearch.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactGoogleAutocomplete = _interopRequireDefault(require("react-google-autocomplete"));
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const AddressSearchWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const getAddressProp = (components, id) => {
     for (const component of components) {
@@ -25,7 +25,7 @@ const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
     }
     return ' ';
   };
-  return /*#__PURE__*/_react.default.createElement(_core.OutlinedInput, {
+  return /*#__PURE__*/_react.default.createElement(_material.OutlinedInput, {
     fullWidth: true,
     variant: "outlined",
     id: '__address_search__',
@@ -73,7 +73,7 @@ const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
     }
   });
 }));
-const AddressSearch = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const AddressSearch = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
@@ -85,7 +85,6 @@ const AddressSearch = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
       return value;
     }
   }), base => /*#__PURE__*/_react.default.createElement(AddressSearchWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/AutoComplete.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
-var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));
+var _Autocomplete = _interopRequireDefault(require("@mui/lab/Autocomplete"));
 require("./Form.css");
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,7 +28,7 @@ const json = response => {
   return response.text();
 };
 const location = window.location.protocol + "//" + window.location.hostname;
-const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const value = (0, _react.useRef)([]);
   const [inputValue, setInputValue] = (0, _react.useState)('');
@@ -95,6 +95,9 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     setInputValue(newValue);
   };
   return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    style: {
+      marginTop: '8px'
+    },
     inputValue: inputValue,
     multiple: _Utils.default.getComponentAttribute(props.config, 'multiple', true),
     disabled: base.disabled,
@@ -129,8 +132,6 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     id: props.config.id,
     renderInput: params => /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
       required: base.required,
-      margin: "dense",
-      size: "small",
       error: base.hasError,
       helperText: base.errorMessage,
       variant: props.borderless ? 'standard' : 'outlined'
@@ -139,11 +140,10 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     }))
   });
 }));
-const AutoComplete = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const AutoComplete = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle
   }), base => /*#__PURE__*/_react.default.createElement(AutoCompleteWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/Checkbox.js

@@ -5,16 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CheckboxWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const CheckboxWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
-    ref: ref,
     control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       checked: base.value || false,
       style: _Utils.default.mergeStyles({}, props.config),
@@ -31,11 +30,10 @@ const CheckboxWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
     label: props.config.attributes['label']
   });
 }));
-const Checkbox = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Checkbox = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle
   }), base => /*#__PURE__*/_react.default.createElement(CheckboxWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/DatePicker.js

@@ -7,16 +7,16 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("date-fns");
 var _Utils = _interopRequireDefault(require("../../Utils"));
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 var _BaseField = require("./BaseField");
-var _dateFns2 = _interopRequireDefault(require("@date-io/date-fns"));
-var _pickers = require("@material-ui/pickers");
-var _styles = require("@material-ui/core/styles");
 var _reactRedux = require("react-redux");
 var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
+var _xDatePickers = require("@mui/x-date-pickers");
+var _demo = require("@mui/x-date-pickers/internals/demo");
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var _dayjs = _interopRequireDefault(require("dayjs"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [minDate, setMinDate] = _react.default.useState(null);
   const [maxDate, setMaxDate] = _react.default.useState(null);
   const base = props.base;
@@ -66,67 +66,45 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     }
   }, []);
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
-  const ThemedKeyboardDatePicker = (0, _styles.withStyles)({
-    root: {
-      '& label.Mui-focused': {
-        color: secondaryColor
-      },
-      '& .MuiInput-underline:after': {
-        borderBottomColor: secondaryColor
-      },
-      '& .MuiOutlinedInput-root': {
-        '&.Mui-focused fieldset': {
-          borderColor: secondaryColor
-        }
-      }
-    }
-  })(_pickers.KeyboardDatePicker);
-  return /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
-    utils: _dateFns2.default
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    container: true,
-    ref: ref,
-    onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/_react.default.createElement(ThemedKeyboardDatePicker, {
-    id: props.id,
-    InputProps: {
-      readOnly: true
-    },
-    disabled: base.disabled,
-    required: base.required,
-    format: "dd/MM/yyyy",
+  const style = _Utils.default.mergeStyles({
+    minWidth: minWidth,
+    width: width,
+    textAlign: 'left'
+  }, props.config);
+  return /*#__PURE__*/_react.default.createElement(_xDatePickers.LocalizationProvider, {
+    dateAdapter: _AdapterDayjs.AdapterDayjs
+  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
+    components: ['DatePicker', 'DatePicker']
+  }, /*#__PURE__*/_react.default.createElement(_xDatePickers.DatePicker, {
     label: props.config.attributes['label'],
-    value: base.value ? base.value : null,
+    value: base.value ? (0, _dayjs.default)(base.value) : null,
     className: props.className,
+    onChange: newValue => handleDateChange(newValue.toDate()),
     error: base.hasError,
-    helperText: base.errorMessage,
-    margin: "dense",
-    inputVariant: "outlined",
-    style: _Utils.default.mergeStyles({
-      minWidth: minWidth,
-      width: width,
-      textAlign: 'left'
-    }, props.config),
-    onChange: handleDateChange,
-    size: "small",
-    KeyboardButtonProps: {
-      'aria-label': 'change date',
-      'disabled': props.disabled
+    slotProps: {
+      textField: {
+        variant: "outlined",
+        margin: "dense",
+        size: "small",
+        style: style,
+        disabled: base.disabled,
+        required: base.required,
+        error: base.hasError,
+        helperText: base.errorMessage
+      }
     },
-    minDate: minDate,
-    maxDate: maxDate,
-    readOnly: props.readOnly
+    minDate: (0, _dayjs.default)(minDate),
+    maxDate: (0, _dayjs.default)(maxDate)
   })));
 }));
-const DatePicker = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DatePicker = props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
       return !_Utils.default.isNull(value) ? inbound ? new Date(value.toString()) : new Date(value).toLocaleDateString('en-GB').split('/').reverse().join('-') : null;
     }
   }), base => /*#__PURE__*/_react.default.createElement(CustomDatePickerComponent, _extends({
-    ref: ref,
     base: base
   }, props)));
-}));
+};
 var _default = exports.default = DatePicker;