@agilemotion/oui-react-js 1.3.8 → 1.3.9

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

@@ -29,16 +29,14 @@ var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"))
 
 var _core = require("@material-ui/core");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
+var _RestUtils = require("../../../../../RestUtils");
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 let ps;
-const TAB = 8;
+const TAB = 16;
 
 const propHandler = state => {
   let activeRouteMenu = state.dashboard.activeRouteMenu;
@@ -51,24 +49,112 @@ class Sidebar extends _react.default.Component {
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "getViews", (menus, level) => {
+      let newViews = [];
+
+      for (let i = 0; i < menus.length; i++) {
+        let createView = {};
+        createView.name = menus[i].attributes.label;
+        createView.id = menus[i].id;
+        createView.mini = "SS";
+        createView.layout = "/admin";
+        createView.level = level;
+
+        if (menus[i].items && menus[i].items.length > 0) {
+          createView.collapse = true;
+          createView.state = menus[i].id + "Collapse";
+          createView.views = this.getItems(menus[i].items, level + 1);
+        } else {
+          createView.item = menus[i];
+        }
+
+        newViews.push(createView);
+      }
+
+      console.log("VIEWS : ", newViews, menus);
+      return newViews;
+    });
+
+    _defineProperty(this, "getItems", (items, level) => {
+      let newItems = [];
+
+      for (let i = 0; i < items.length; i++) {
+        let createItem = {};
+        createItem.name = items[i].attributes.label;
+        createItem.id = items[i].id;
+        createItem.mini = "SS";
+        createItem.layout = "/admin";
+        createItem.item = items[i];
+        createItem.level = level;
+
+        if (!_Utils.default.isNull(items[i].subMenu)) {
+          createItem.collapse = true;
+          createItem.state = items[i].id + "SubMenuCollapse";
+          createItem.views = getItems(items[i].subMenu.items, level + 1);
+        }
+
+        newItems.push(createItem);
+      }
+
+      return newItems;
+    });
+
     _defineProperty(this, "getCollapseStates", routes => {
       let initialState = {};
-      routes.map((prop, key) => {
-        if (prop.collapse) {
-          initialState = _objectSpread(_objectSpread({
-            [prop.state]: this.getCollapseInitialState(prop.views)
-          }, this.getCollapseStates(prop.views)), initialState);
-        }
 
-        return null;
-      });
+      if (routes) {
+        routes.map((prop, key) => {
+          if (prop.collapse) {
+            initialState = {
+              [prop.state]: this.getCollapseInitialState(prop.views),
+              ...this.getCollapseStates(prop.views),
+              ...initialState
+            };
+          }
+
+          return null;
+        });
+      }
+
       return initialState;
     });
 
+    _defineProperty(this, "getMenu", route => {
+      return new Promise(resolve => {
+        let service = {
+          url: '/ui/api/v1/menu/get',
+          parameters: [{
+            name: "id",
+            value: route.menu,
+            httpParameterType: "QUERY_PARAMETER"
+          }, {
+            name: "version",
+            value: 1.0,
+            httpParameterType: "QUERY_PARAMETER"
+          }],
+          contentType: "application/json"
+        };
+        (0, _RestUtils.invokeRest)(service, {
+          api: {
+            get id() {
+              return "dashboard-sidebar";
+            }
+
+          }
+        }, "dashboard-sidebar", result => {
+          resolve(this.getViews(result.menus, route.level + 1));
+        }, e => {
+          console.error(e);
+          resolve(null);
+        }, null);
+      });
+    });
+
     _defineProperty(this, "createLinks", routes => {
-      const _this$props = this.props,
-            rtlActive = _this$props.rtlActive,
-            secondaryThemeColor = _this$props.secondaryThemeColor;
+      const {
+        rtlActive,
+        secondaryThemeColor
+      } = this.props;
       return routes.map((prop, key) => {
         if (prop.redirect) {
           return null;
@@ -88,8 +174,19 @@ class Sidebar extends _react.default.Component {
             },
             "aria-expanded": this.state[prop.state],
             onClick: e => {
+              if (!prop.views) {
+                this.getMenu(prop).then(views => {
+                  if (views) {
+                    prop.views = views; //this.getCollapseInitialState(views);
+
+                    this.setState(st);
+                  }
+                });
+              } else {
+                this.setState(st);
+              }
+
               e.preventDefault();
-              this.setState(st);
             }
           }, prop.icon !== undefined ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
             className: prop.icon,
@@ -108,7 +205,7 @@ class Sidebar extends _react.default.Component {
             }
           }, " ", prop.name, " ", /*#__PURE__*/_react.default.createElement("b", {
             className: "caret"
-          })), " "), " "), " ", prop.collapse ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+          })), " "), " "), " ", prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
             isOpen: this.state[prop.state]
           }, /*#__PURE__*/_react.default.createElement("ul", {
             className: "nav"
@@ -118,7 +215,7 @@ class Sidebar extends _react.default.Component {
         return /*#__PURE__*/_react.default.createElement("li", {
           className: "",
           key: key,
-          style: this.activeRoute(prop.name) ? {
+          style: this.activeRoute(prop.id) ? {
             backgroundColor: (0, _core.lighten)(secondaryThemeColor, .9),
             borderRadius: '16px',
             color: secondaryThemeColor,
@@ -131,29 +228,37 @@ class Sidebar extends _react.default.Component {
           autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
           viewId: "menuBar",
           icon: prop.icon,
-          iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.name) ? secondaryThemeColor : null,
+          iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? secondaryThemeColor : null,
           name: prop.name,
+          id: prop.id,
           level: prop.level,
-          color: this.activeRoute(prop.name) ? secondaryThemeColor : null
+          tab: TAB,
+          color: this.activeRoute(prop.id) ? secondaryThemeColor : null
         }), " ");
       });
     });
 
     _defineProperty(this, "activeRoute", routeName => {
       // return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
-      return this.props.activeRouteMenu === routeName;
+      return this.props.activeRouteMenu.id === routeName;
     });
 
     this.state = this.getCollapseStates(props.routes); //actionCreators.setActiveRoute(Utils.isNull(props.activeRouteMenu) ? 'Dashboard' : props.activeRouteMenu);
-  } // this creates the intial state of this component based on the collapse routes
-  // that it gets through this.props.routes
-
+  }
 
   // this verifies if any of the collapses should be default opened on a rerender of this component
   // for example, on the refresh of the page,
   // while on the src/views/forms/RegularForms.js - route /admin/regular-forms
   getCollapseInitialState(routes) {
+    if (!routes) {
+      return false;
+    }
+
     for (let i = 0; i < routes.length; i++) {
+      if (!routes[i].views) {
+        return true;
+      }
+
       if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {
         return true;
       } else if (window.location.href.indexOf(routes[i].path) !== -1) {
@@ -162,8 +267,7 @@ class Sidebar extends _react.default.Component {
     }
 
     return false;
-  } // this function creates the links and collapses that appear in the sidebar (left menu)
-
+  }
 
   componentDidMount() {
     // if you are using a Windows Machine, the scrollbars will have a Mac look
@@ -183,9 +287,10 @@ class Sidebar extends _react.default.Component {
   }
 
   render() {
-    const _this$props2 = this.props,
-          activeColor = _this$props2.activeColor,
-          logo = _this$props2.logo;
+    const {
+      activeColor,
+      logo
+    } = this.props;
     let logoImg = null;
     let logoText = null;
 
@@ -202,6 +307,9 @@ class Sidebar extends _react.default.Component {
         }
       }, /*#__PURE__*/_react.default.createElement("img", {
         src: logo.imgSrc,
+        style: {
+          width: '150px'
+        },
         alt: "react-logo"
       })), " ");
       logoText = /*#__PURE__*/_react.default.createElement("a", {

package/dist/components/footer/Footer.js

@@ -23,30 +23,18 @@ var _CardAvatar = _interopRequireDefault(require("../card/CardAvatar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 const useStyles = (0, _styles.makeStyles)(_footerStyle.default);
 
 const Footer = props => {
   const classes = useStyles();
 
-  const _React$useState = _react.default.useState(props.width ? props.width : null),
-        _React$useState2 = _slicedToArray(_React$useState, 1),
-        width = _React$useState2[0];
+  const [width] = _react.default.useState(props.width ? props.width : null);
 
-  const fluid = props.fluid,
-        white = props.white,
-        rtlActive = props.rtlActive;
+  const {
+    fluid,
+    white,
+    rtlActive
+  } = props;
   let container = (0, _classnames.default)({
     [classes.container]: !fluid,
     [classes.containerFluid]: fluid,

package/dist/components/form/AddressSearch.js

@@ -23,48 +23,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-
 const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
 
   const getAddressProp = (components, id) => {
-    var _iterator = _createForOfIteratorHelper(components),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        const component = _step.value;
-
-        var _iterator2 = _createForOfIteratorHelper(component.types),
-            _step2;
-
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            const type = _step2.value;
-
-            if (type === id) {
-              return component.long_name;
-            }
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
+    for (const component of components) {
+      for (const type of component.types) {
+        if (type === id) {
+          return component.long_name;
         }
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
     }
 
     return ' ';
@@ -85,36 +53,34 @@ const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
         document.getElementById("__address_search__").value = null;
       }
     }, /*#__PURE__*/_react.default.createElement(_Close.default, null)) : null,
-    inputComponent: (_ref) => {
-      let inputRef = _ref.inputRef,
-          onFocus = _ref.onFocus,
-          onBlur = _ref.onBlur,
-          props = _objectWithoutProperties(_ref, ["inputRef", "onFocus", "onBlur"]);
-
-      return /*#__PURE__*/_react.default.createElement(_reactGoogleAutocomplete.default, _extends({
-        apiKey: 'AIzaSyAqXhYU8TvunZtkJ5eAD6SfZyHqFOLLM8w'
-      }, props, {
-        onPlaceSelected: place => {
-          let data = {};
-          data.formattedAddress = place.formatted_address;
-          data.street = getAddressProp(place.address_components, 'street_number') + " " + getAddressProp(place.address_components, 'route');
-          data.suburb = getAddressProp(place.address_components, 'sublocality_level_1');
-          data.city = getAddressProp(place.address_components, 'locality');
-          data.municipality = getAddressProp(place.address_components, 'administrative_area_level_2');
-          data.province = getAddressProp(place.address_components, 'administrative_area_level_1');
-          data.country = getAddressProp(place.address_components, 'country');
-          data.postalCode = getAddressProp(place.address_components, 'postal_code');
-          base.handleValueChange(data);
-          document.getElementById("__address_search__").value = data.formattedAddress;
-        },
-        options: {
-          types: ["geocode", "establishment"],
-          componentRestrictions: {
-            "country": "za"
-          }
+    inputComponent: ({
+      inputRef,
+      onFocus,
+      onBlur,
+      ...props
+    }) => /*#__PURE__*/_react.default.createElement(_reactGoogleAutocomplete.default, _extends({
+      apiKey: 'AIzaSyCocunxfGatXwjt1uASpPxQ0PKcONSi7wY'
+    }, props, {
+      onPlaceSelected: place => {
+        let data = {};
+        data.googleAddress = place.formatted_address;
+        data.street = getAddressProp(place.address_components, 'street_number') + " " + getAddressProp(place.address_components, 'route');
+        data.suburb = getAddressProp(place.address_components, 'sublocality_level_1');
+        data.city = getAddressProp(place.address_components, 'locality');
+        data.municipality = getAddressProp(place.address_components, 'administrative_area_level_2');
+        data.province = getAddressProp(place.address_components, 'administrative_area_level_1');
+        data.country = getAddressProp(place.address_components, 'country');
+        data.postalCode = getAddressProp(place.address_components, 'postal_code');
+        base.handleValueChange(data);
+        document.getElementById("__address_search__").value = data.googleAddress;
+      },
+      options: {
+        types: ["geocode", "establishment"],
+        componentRestrictions: {
+          "country": "za"
         }
-      }));
-    }
+      }
+    }))
   });
 }));
 
@@ -124,7 +90,7 @@ const AddressSearch = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
     valueParser: (value, inbound) => {
       if (!_Utils.default.isNull(value)) {
         if (!inbound) {
-          return value.formattedAddress;
+          return value.googleAddress;
         }
       }
 

package/dist/components/form/AutoComplete.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _BaseField = require("./BaseField");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));
+
+require("./Form.css");
+
+var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+
+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 base = props.base;
+  const value = (0, _react.useRef)([]);
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const baseValue = (0, _react.useRef)(null);
+  const [options, setOptions] = (0, _react.useState)([]);
+
+  _react.default.useEffect(() => {
+    let minLen = _Utils.default.getComponentAttribute(props.config, 'minSearchAttributeLength', 1);
+
+    if (inputValue && inputValue.length >= minLen) {
+      fetchOptions();
+    }
+  }, [inputValue]);
+
+  _react.default.useEffect(() => {
+    if (!base.value) {
+      value.current = [];
+    } else if (Array.isArray(base.value)) {
+      value.current = base.value.reduce((keys, currValue) => {
+        keys.push(currValue[props.config.attributes.searchAttribute]);
+        return keys;
+      }, []);
+      baseValue.current = base.value;
+      setOptions(value.current);
+    }
+  }, [base.value]);
+
+  const fetchOptions = () => {
+    fetch(encodeURI(location + _ApplicationContext.default.getContextRoot() + props.config.attributes.optionsUrlPath), {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + sessionStorage.getItem("accessToken"),
+        'idToken': sessionStorage.getItem("idToken")
+      },
+      body: JSON.stringify({
+        "parameters": [{
+          "name": "".concat(props.config.attributes.searchAttribute),
+          "value": inputValue
+        }],
+        "pageSize": 60,
+        "currentPage": 0
+      })
+    }).then(status).then(json).then(data => {
+      setOptions(JSON.parse(data).records);
+    }).catch(ignored => {});
+  };
+
+  const handleInputChange = (event, newValue) => {
+    setInputValue(newValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    inputValue: inputValue,
+    multiple: true,
+    value: value.current,
+    getOptionLabel: option => option ? option[props.config.attributes.searchAttribute] ? option[props.config.attributes.searchAttribute] : option : '',
+    onInputChange: (event, newValue) => handleInputChange(event, newValue),
+    onChange: (e, newValue, reason) => {
+      let val = [];
+
+      if (baseValue.current && Array.isArray(baseValue.current)) {
+        for (const baseValueElement of baseValue.current) {
+          if (baseValueElement) {
+            val.push(baseValueElement);
+          }
+        }
+
+        baseValue.current = null;
+      }
+
+      for (const newValueElement of newValue) {
+        let find = options.find(o => o[props.config.attributes.searchAttribute] === newValueElement);
+
+        if (!find) {
+          var _value$current;
+
+          find = (_value$current = value.current) === null || _value$current === void 0 ? void 0 : _value$current.find(o => o[props.config.attributes.searchAttribute] === newValueElement);
+        }
+
+        if (find) {
+          val.push(find);
+        } else {
+          console.error("Cannot map autocomplete key : " + newValueElement);
+        }
+      }
+
+      value.current = newValue;
+      base.handleValueChange(val);
+    },
+    options: options.length > 0 ? options.map(option => option[props.config.attributes.searchAttribute]) : [],
+    id: props.config.id,
+    renderInput: params => /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
+      error: !_Utils.default.isNull(props.hasError) ? props.hasError : false,
+      helperText: !_Utils.default.isNull(props.errorMessage) && !_Utils.default.isNull(props.hasError) ? props.errorMessage : '',
+      variant: props.borderless ? 'standard' : 'outlined'
+    }, params, {
+      label: _Utils.default.getComponentAttribute(props.config, 'label', '')
+    }))
+  });
+}));
+
+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)));
+}));
+
+var _default = AutoComplete;
+exports.default = _default;