@lanaco/lnc-react-ui 2.1.26 → 2.1.29

package/lib/index.js

@@ -49033,19 +49033,240 @@ var TableSelectionType = {
   MULTIPLE: "multiple"
 };
 
-var _templateObject$i, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8;
-var Container$g = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
+var _templateObject$i, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
+var Container$g = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
+var Wrapper$1 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
+var TableTable$1 = newStyled.table(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
+var TableHead$1 = newStyled.thead(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
+var TableHeadRow$1 = newStyled.tr(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
+var TableHeadCell$1 = newStyled.th(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral__default['default'](["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
+  return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
+}, theme.palette.primary.light, function (props) {
+  return props.hideOrdering ? "inherit" : "pointer";
+});
+var HeaderInnerCell$1 = newStyled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  // justify-content: center;\n\n  & i {\n    color: black;\n  }\n"])));
+var HeaderCellText$1 = newStyled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n"])));
+var HeaderCellIcon$1 = newStyled.span(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n  margin-left: auto;\n\n  & i {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.sort ? "transparent" : "black";
+});
+var TableBody$1 = newStyled.tbody(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral__default['default']([""])));
+var TableBodyRow$1 = newStyled.tr(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid transparent;\n  border-top: 1px solid transparent;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  if (props.selectedRow !== true) return "\n        &:hover {\n          & > td {\n            // border-bottom: 1px solid ".concat(theme.palette.primary.light, ";\n            // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n            background-color: whitesmoke;\n          }\n    \n        cursor: pointer;\n      }");else return "";
+}, function (props) {
+  if (props.selectedRow === true) return "\n        background-color: ".concat(theme.palette.primary.lighter, ";\n        cursor: pointer;\n        \n        & > td {\n          // border-bottom: 1px solid ").concat(theme.palette.primary.light, ";\n          // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n        }\n      ");else return "";
+});
+var TableBodyCell$1 = newStyled.td(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n"])), function (props) {
+  return props.selectionCell === true ? "1px 1px 1px 6px" : "5px 5px 5px 10px";
+});
+
+var TableView = function TableView(props) {
+  //======== RENDER ========
+  var _props$Config = props.Config,
+      Columns = _props$Config.Columns,
+      Data = _props$Config.Data,
+      IsLoading = _props$Config.IsLoading,
+      ChangeToFormView = _props$Config.ChangeToFormView,
+      SelectedData = _props$Config.SelectedData,
+      SelectionIndicator = _props$Config.SelectionIndicator,
+      SelectedEntirePage = _props$Config.SelectedEntirePage,
+      EnableSelection = _props$Config.EnableSelection,
+      EnableFormView = _props$Config.EnableFormView,
+      SelectionType = _props$Config.SelectionType,
+      _props$Config$OnSelec = _props$Config.OnSelection,
+      OnSelection = _props$Config$OnSelec === void 0 ? function () {} : _props$Config$OnSelec,
+      _props$Config$OnSelec2 = _props$Config.OnSelectAll,
+      OnSelectAll = _props$Config$OnSelec2 === void 0 ? function () {} : _props$Config$OnSelec2;
+      _props$Config.EnablePagination;
+      var EnableOrdering = _props$Config.EnableOrdering,
+      Accessor = _props$Config.Accessor,
+      Ascending = _props$Config.Ascending,
+      Descending = _props$Config.Descending,
+      _props$Config$OnHeade = _props$Config.OnHeaderClick,
+      OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
+      ReadOnly = _props$Config.ReadOnly,
+      _props$Config$IsLooku = _props$Config.IsLookup,
+      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
+      _props$Config$LookupT = _props$Config.LookupTakeItem,
+      LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
+  var _props$Localization = props.Localization,
+      Localization = _props$Localization === void 0 ? {} : _props$Localization;
+      props.Export;
+      props.Icons;
+ //======== FUNCTIONS ========
+
+  function isFunction(functionToCheck) {
+    return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
+  }
+
+  var handleOnSelection = function handleOnSelection(rowData, val) {
+    OnSelection(rowData, val, SelectionType);
+  };
+
+  var handleSelectAll = function handleSelectAll(val) {
+    OnSelectAll(val);
+  }; //======== RENDER ========
+
+
+  var isItemInArray = function isItemInArray(item, array, byProp) {
+    if (item[byProp] !== undefined) return !lodash.exports.isUndefined(array.find(function (x) {
+      return x[byProp] === item[byProp];
+    }));
+    return array.indexOf(item) > -1;
+  };
+
+  var renderBody = function renderBody() {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, Data.map(function (dataItem, i) {
+      return renderBodyRow(dataItem, i);
+    }));
+  };
+
+  var renderBodyRow = function renderBodyRow(dataItem, i) {
+    Columns.find(function (x) {
+      return x.nested;
+    });
+    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyRow$1, {
+      selectedRow: rowSelected,
+      key: i
+    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
+      return x.hide !== true;
+    }).map(function (col, j) {
+      return renderBodyCell(dataItem, col, i, j);
+    }));
+  };
+
+  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
+    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
+
+    var onClick = function onClick() {
+      ChangeToFormView(dataItem, rowIndex);
+    };
+
+    if (!EnableFormView) onClick = function onClick() {};
+    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
+
+    if (IsLookup) {
+      onClick = function onClick() {
+        if (!IsLoading) {
+          LookupTakeItem(dataItem);
+        }
+      };
+    }
+
+    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+      key: tabIndex,
+      onClick: onClick
+    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
+      ChangeToFormView(dataItem, rowIndex);
+    }) : cellData);
+  };
+
+  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
+    if (IsLookup) {
+      return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+        selectionCell: true,
+        key: -1
+      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+        inverted: true,
+        onClick: function onClick() {
+          if (!IsLoading) {
+            LookupTakeItem(dataItem);
+          }
+        },
+        icon: "arrow-right"
+      }));
+    }
+
+    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+      selectionCell: true,
+      key: -1
+    }, /*#__PURE__*/React__default['default'].createElement(CheckBox, {
+      checked: selected,
+      onChange: function onChange(e, val) {
+        return handleOnSelection(dataItem, val);
+      },
+      id: rowIndex
+    }));
+  };
+
+  var renderHeaderCell = function renderHeaderCell(def, i) {
+    var headerClick = function headerClick() {};
+
+    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
+    var isAccessor = def.accessor === Accessor;
+    var orderingIconClass; //-------------------------------------------------------------------
+
+    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
+    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
+    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
+    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
+
+    if (!isAccessor) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
+    };
+    if (isAccessor && Ascending) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
+    };
+    if (isAccessor && Descending) headerClick = function headerClick() {
+      return OnHeaderClick("", "", false, true);
+    }; //-------------------------------------------------------------------
+
+    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      hideOrdering: hideOrdering,
+      key: i,
+      onClick: IsLoading || hideOrdering ? function () {} : headerClick
+    }, /*#__PURE__*/React__default['default'].createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default['default'].createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default['default'].createElement(HeaderCellIcon$1, {
+      sort: orderingIconClass === "sort"
+    }, /*#__PURE__*/React__default['default'].createElement(Icon$1, {
+      color: "white",
+      icon: orderingIconClass
+    }))));
+  };
+
+  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
+    if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1
+    });
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    if (SelectedEntirePage && Localization.DeselectAll) ;
+    if (!SelectedEntirePage && Localization.SelectAll) ;
+    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1
+    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default['default'].createElement(CheckBox, {
+      checked: SelectedEntirePage,
+      onChange: function onChange() {
+        return handleSelectAll(!SelectedEntirePage);
+      },
+      id: "SelectedEntirePage"
+    }));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Container$g, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$1, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
+    cellSpacing: 0
+  }, /*#__PURE__*/React__default['default'].createElement(TableHead$1, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
+    return x.hide !== true;
+  }).map(function (col, i) {
+    return renderHeaderCell(col, i);
+  }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
+};
+
+var _templateObject$h, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7;
+var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
   return props.theme.typography.small.fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
 });
-var Item$2 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var Item$2 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.first ? "0" : "6px";
 });
-var ExportItem = newStyled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
-var ItemText = newStyled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral__default['default'](["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemCurrentPage = newStyled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemDropdown = newStyled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral__default['default'](["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
+var ExportItem = newStyled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
+var ItemText = newStyled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral__default['default'](["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemCurrentPage = newStyled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemDropdown = newStyled.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral__default['default'](["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
 
 var Pagination = function Pagination(props) {
   //======================== PROPS ============================================
@@ -49213,7 +49434,7 @@ var Pagination = function Pagination(props) {
     })));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$g, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
+  return /*#__PURE__*/React__default['default'].createElement(Container$f, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
 };
 
 Pagination.defaultProps = {
@@ -49278,227 +49499,6 @@ Pagination.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$h, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
-var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
-var Wrapper$1 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
-var TableTable$1 = newStyled.table(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
-var TableHead$1 = newStyled.thead(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
-var TableHeadRow$1 = newStyled.tr(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
-var TableHeadCell$1 = newStyled.th(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral__default['default'](["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
-  return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
-}, theme.palette.primary.light, function (props) {
-  return props.hideOrdering ? "inherit" : "pointer";
-});
-var HeaderInnerCell$1 = newStyled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  // justify-content: center;\n\n  & i {\n    color: black;\n  }\n"])));
-var HeaderCellText$1 = newStyled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n"])));
-var HeaderCellIcon$1 = newStyled.span(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n  margin-left: auto;\n\n  & i {\n    color: ", ";\n  }\n"])), function (props) {
-  return props.sort ? "transparent" : "black";
-});
-var TableBody$1 = newStyled.tbody(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral__default['default']([""])));
-var TableBodyRow$1 = newStyled.tr(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid transparent;\n  border-top: 1px solid transparent;\n\n  ", "\n\n  ", "\n"])), function (props) {
-  if (props.selectedRow !== true) return "\n        &:hover {\n          & > td {\n            // border-bottom: 1px solid ".concat(theme.palette.primary.light, ";\n            // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n            background-color: whitesmoke;\n          }\n    \n        cursor: pointer;\n      }");else return "";
-}, function (props) {
-  if (props.selectedRow === true) return "\n        background-color: ".concat(theme.palette.primary.lighter, ";\n        cursor: pointer;\n        \n        & > td {\n          // border-bottom: 1px solid ").concat(theme.palette.primary.light, ";\n          // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n        }\n      ");else return "";
-});
-var TableBodyCell$1 = newStyled.td(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n"])), function (props) {
-  return props.selectionCell === true ? "1px 1px 1px 6px" : "5px 5px 5px 10px";
-});
-
-var TableView = function TableView(props) {
-  //======== RENDER ========
-  var _props$Config = props.Config,
-      Columns = _props$Config.Columns,
-      Data = _props$Config.Data,
-      IsLoading = _props$Config.IsLoading,
-      ChangeToFormView = _props$Config.ChangeToFormView,
-      SelectedData = _props$Config.SelectedData,
-      SelectionIndicator = _props$Config.SelectionIndicator,
-      SelectedEntirePage = _props$Config.SelectedEntirePage,
-      EnableSelection = _props$Config.EnableSelection,
-      EnableFormView = _props$Config.EnableFormView,
-      SelectionType = _props$Config.SelectionType,
-      _props$Config$OnSelec = _props$Config.OnSelection,
-      OnSelection = _props$Config$OnSelec === void 0 ? function () {} : _props$Config$OnSelec,
-      _props$Config$OnSelec2 = _props$Config.OnSelectAll,
-      OnSelectAll = _props$Config$OnSelec2 === void 0 ? function () {} : _props$Config$OnSelec2;
-      _props$Config.EnablePagination;
-      var EnableOrdering = _props$Config.EnableOrdering,
-      Accessor = _props$Config.Accessor,
-      Ascending = _props$Config.Ascending,
-      Descending = _props$Config.Descending,
-      _props$Config$OnHeade = _props$Config.OnHeaderClick,
-      OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
-      ReadOnly = _props$Config.ReadOnly,
-      _props$Config$IsLooku = _props$Config.IsLookup,
-      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
-      _props$Config$LookupT = _props$Config.LookupTakeItem,
-      LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
-  var _props$Localization = props.Localization,
-      Localization = _props$Localization === void 0 ? {} : _props$Localization;
-      props.Export;
-      props.Icons;
- //======== FUNCTIONS ========
-
-  function isFunction(functionToCheck) {
-    return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
-  }
-
-  var handleOnSelection = function handleOnSelection(rowData, val) {
-    OnSelection(rowData, val, SelectionType);
-  };
-
-  var handleSelectAll = function handleSelectAll(val) {
-    OnSelectAll(val);
-  }; //======== RENDER ========
-
-
-  var isItemInArray = function isItemInArray(item, array, byProp) {
-    if (item[byProp] !== undefined) return !lodash.exports.isUndefined(array.find(function (x) {
-      return x[byProp] === item[byProp];
-    }));
-    return array.indexOf(item) > -1;
-  };
-
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, Data.map(function (dataItem, i) {
-      return renderBodyRow(dataItem, i);
-    }));
-  };
-
-  var renderBodyRow = function renderBodyRow(dataItem, i) {
-    Columns.find(function (x) {
-      return x.nested;
-    });
-    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TableBodyRow$1, {
-      selectedRow: rowSelected,
-      key: i
-    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
-      return x.hide !== true;
-    }).map(function (col, j) {
-      return renderBodyCell(dataItem, col, i, j);
-    })));
-  };
-
-  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
-    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
-
-    var onClick = function onClick() {
-      ChangeToFormView(dataItem);
-    };
-
-    if (!EnableFormView) onClick = function onClick() {};
-    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
-
-    if (IsLookup) {
-      onClick = function onClick() {
-        if (!IsLoading) {
-          LookupTakeItem(dataItem);
-        }
-      };
-    }
-
-    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
-    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-      key: tabIndex,
-      onClick: onClick
-    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
-      ChangeToFormView(dataItem);
-    }) : cellData);
-  };
-
-  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
-    if (IsLookup) {
-      return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-        selectionCell: true,
-        key: -1
-      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
-        inverted: true,
-        onClick: function onClick() {
-          if (!IsLoading) {
-            LookupTakeItem(dataItem);
-          }
-        },
-        icon: "arrow-right"
-      }));
-    }
-
-    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-      selectionCell: true,
-      key: -1
-    }, /*#__PURE__*/React__default['default'].createElement(CheckBox, {
-      checked: selected,
-      onChange: function onChange(e, val) {
-        return handleOnSelection(dataItem, val);
-      },
-      id: rowIndex
-    }));
-  };
-
-  var renderHeaderCell = function renderHeaderCell(def, i) {
-    var headerClick = function headerClick() {};
-
-    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
-    var isAccessor = def.accessor === Accessor;
-    var orderingIconClass; //-------------------------------------------------------------------
-
-    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
-    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
-    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
-    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
-
-    if (!isAccessor) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
-    };
-    if (isAccessor && Ascending) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
-    };
-    if (isAccessor && Descending) headerClick = function headerClick() {
-      return OnHeaderClick("", "", false, true);
-    }; //-------------------------------------------------------------------
-
-    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      hideOrdering: hideOrdering,
-      key: i,
-      onClick: IsLoading || hideOrdering ? function () {} : headerClick
-    }, /*#__PURE__*/React__default['default'].createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default['default'].createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default['default'].createElement(HeaderCellIcon$1, {
-      sort: orderingIconClass === "sort"
-    }, /*#__PURE__*/React__default['default'].createElement(Icon$1, {
-      color: "white",
-      icon: orderingIconClass
-    }))));
-  };
-
-  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
-    if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1
-    });
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    if (SelectedEntirePage && Localization.DeselectAll) ;
-    if (!SelectedEntirePage && Localization.SelectAll) ;
-    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1
-    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default['default'].createElement(CheckBox, {
-      checked: SelectedEntirePage,
-      onChange: function onChange() {
-        return handleSelectAll(!SelectedEntirePage);
-      },
-      id: "SelectedEntirePage"
-    }));
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(Container$f, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$1, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
-    cellSpacing: 0
-  }, /*#__PURE__*/React__default['default'].createElement(TableHead$1, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
-    return x.hide !== true;
-  }).map(function (col, i) {
-    return renderHeaderCell(col, i);
-  }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
-};
-
 var _templateObject$g, _templateObject2$d;
 
 var heightBySize$6 = function heightBySize(size) {
@@ -52330,32 +52330,42 @@ var heightBySize$3 = function heightBySize(size) {
 };
 
 var Container$9 = newStyled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n"])));
-var Inner$3 = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  border: 0.0625rem solid #bfbfbf80;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n  cursor: pointer;\n\n  min-height: ", ";\n  max-height: ", ";\n"])), function (props) {
+var Inner$3 = newStyled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  border: 0.0625rem solid #bfbfbf80;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n  cursor: ", ";\n\n  min-height: ", ";\n  max-height: ", ";\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
+}, function (props) {
+  return props.disabled ? "default" : "pointer";
 }, function (props) {
   return heightBySize$3(props.size);
 }, function (props) {
   return heightBySize$3(props.size);
 });
 var TextSpan$1 = newStyled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default']([""])));
-var Text$1 = newStyled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n  flex: 1;\n\n  padding: ", ";\n  transition: all 250ms ease;\n  border-radius: 0.5rem 0 0 0.5rem;\n  white-space: pre;\n  flex-grow: 10;\n  height: 100%;\n  background-color: ", ";\n\n  color: ", ";\n"])), function (props) {
+var Text$1 = newStyled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n  flex: 1;\n\n  padding: ", ";\n  transition: all 250ms ease;\n  border-radius: 0.5rem 0 0 0.5rem;\n  white-space: pre;\n  flex-grow: 10;\n  height: 100%;\n  opacity: ", ";\n  background-color: ", ";\n\n  color: ", ";\n"])), function (props) {
   return paddingBySize$4(props.size);
+}, function (props) {
+  return props.disabled ? "0.6" : "1";
 }, function (props) {
   return props.inactive ? props.theme.palette.gray[900] : props.theme.palette.primary.main;
 }, function (props) {
   return props.theme.palette.primary.text;
 });
-var AdditionalInfo = newStyled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n  transition: all 250ms ease;\n  white-space: pre;\n  flex-grow: 10;\n  height: 100%;\n  background-color: ", ";\n\n  color: ", ";\n"])), function (props) {
+var AdditionalInfo = newStyled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n  transition: all 250ms ease;\n  white-space: pre;\n  flex-grow: 10;\n  height: 100%;\n  opacity: ", ";\n  background-color: ", ";\n\n  color: ", ";\n"])), function (props) {
   return paddingBySize$4(props.size);
+}, function (props) {
+  return props.disabled ? "0.6" : "1";
 }, function (props) {
   return props.inactive ? props.theme.palette.gray[100] : props.theme.palette.primary.lighter;
 }, function (props) {
   return props.theme.palette.primary.textDark;
 });
-var ButtonContainer$1 = newStyled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n  display: inline;\n  cursor: pointer;\n  padding: ", ";\n  transition: all 250ms ease;\n  border-radius: 0 0.5rem 0.5rem 0;\n  // flex-grow: 0;\n  align-self: flex-end;\n  margin-left: auto;\n  height: 100%;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  & i {\n    font-size: ", ";\n  }\n"])), function (props) {
+var ButtonContainer$1 = newStyled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n  display: inline;\n  cursor: ", ";\n  padding: ", ";\n  transition: all 250ms ease;\n  border-radius: 0 0.5rem 0.5rem 0;\n  // flex-grow: 0;\n  align-self: flex-end;\n  margin-left: auto;\n  height: 100%;\n  opacity: ", ";\n  background-color: ", ";\n\n  color: ", ";\n\n  & i {\n    font-size: ", ";\n  }\n"])), function (props) {
+  return props.disabled ? "default" : "pointer";
+}, function (props) {
   return paddingBySize$4(props.size);
+}, function (props) {
+  return props.disabled ? "0.6" : "1";
 }, function (props) {
   return getBtnContainerColor(props);
 }, function (props) {
@@ -52400,7 +52410,8 @@ var Chip = function Chip(props) {
     additional: additionalInfo && additionalInfo !== "",
     onClick: function onClick() {
       return onRemove(id);
-    }
+    },
+    disabled: disabled
   }), /*#__PURE__*/React__default['default'].createElement("i", {
     className: "fas fa-times"
   }))));
@@ -52481,16 +52492,18 @@ var Inner$2 = newStyled.div(_templateObject6$1 || (_templateObject6$1 = _taggedT
 var SearchIcon = newStyled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n  color: ", ";\n  font-size: ", ";\n  background-color: whitesmoke;\n  transition: all 250ms ease;\n"])), function (props) {
   return iconPaddingBySize$1(props.size);
 }, function (props) {
-  return props.theme.palette[props.color].main;
+  return props.disabled ? props.theme.palette.gray[800] : props.theme.palette[props.color].main;
 }, function (props) {
   return getIconFontSize$1(props);
 });
-var ClearIcon$1 = newStyled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n  color: ", ";\n  font-size: ", ";\n  background-color: whitesmoke;\n  transition: all 250ms ease;\n  cursor: pointer;\n  margin-right: 0;\n  margin-left: auto;\n"])), function (props) {
+var ClearIcon$1 = newStyled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n  color: ", ";\n  font-size: ", ";\n  background-color: whitesmoke;\n  transition: all 250ms ease;\n  cursor: ", ";\n  margin-right: 0;\n  margin-left: auto;\n"])), function (props) {
   return iconPaddingBySize$1(props.size);
 }, function (props) {
-  return props.theme.palette[props.color].main;
+  return props.disabled ? props.theme.palette.gray[800] : props.theme.palette[props.color].main;
 }, function (props) {
   return getIconFontSize$1(props);
+}, function (props) {
+  return props.disabled ? "default" : "pointer";
 });
 var Content$2 = newStyled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral__default['default'](["\n  position: absolute;\n  background-color: white;\n  z-index: 1;\n  margin-top: 0.25rem;\n  padding: 0.1875rem;\n  width: calc(100% - 0.625rem);\n  border-radius: 0.15625rem;\n  box-shadow: 0 0 0.375rem #bebebe;\n  border: 0.125rem solid ", ";\n  display: flex;\n  flex-direction: column;\n  transition: all 250ms ease;\n"])), function (props) {
   return props.theme.palette[props.color].main;
@@ -52512,6 +52525,7 @@ var SearchBar = function SearchBar(props) {
       suggestions = props.suggestions,
       onChange = props.onChange,
       id = props.id,
+      disabled = props.disabled,
       className = props.className,
       size = props.size,
       color = props.color,
@@ -52625,7 +52639,9 @@ var SearchBar = function SearchBar(props) {
 
   return /*#__PURE__*/React__default['default'].createElement(Container$8, _extends__default['default']({
     className: className
-  }, themeProps), /*#__PURE__*/React__default['default'].createElement(Inner$2, themeProps, /*#__PURE__*/React__default['default'].createElement(SearchIcon, themeProps, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, themeProps), /*#__PURE__*/React__default['default'].createElement(Inner$2, themeProps, /*#__PURE__*/React__default['default'].createElement(SearchIcon, _extends__default['default']({}, themeProps, {
+    disabled: disabled
+  }), /*#__PURE__*/React__default['default'].createElement("i", {
     className: "fas fa-search fa-fw"
   })), /*#__PURE__*/React__default['default'].createElement(ItemContainer$1, themeProps, /*#__PURE__*/React__default['default'].createElement(TransitionGroup$1, {
     component: null
@@ -52644,28 +52660,33 @@ var SearchBar = function SearchBar(props) {
       additionalInfo: x.value,
       inactive: !x.active,
       onRemove: function onRemove() {
-        return handleRemoveItem(key);
+        return disabled ? {} : handleRemoveItem(key);
       },
       onClick: function onClick() {
-        return handleActiveInactive(key);
-      }
+        return disabled ? {} : handleActiveInactive(key);
+      },
+      disabled: disabled
     }))));
   })), /*#__PURE__*/React__default['default'].createElement(InputContainer$1, themeProps, /*#__PURE__*/React__default['default'].createElement(Input$1, _extends__default['default']({}, themeProps, {
     ref: InputRef,
     value: value,
     onBlur: onInputBlur,
     onChange: onInputChange,
-    onKeyDown: onKeyDown
-  })))), /*#__PURE__*/React__default['default'].createElement(ClearIcon$1, themeProps, /*#__PURE__*/React__default['default'].createElement("i", {
+    onKeyDown: onKeyDown,
+    disabled: disabled
+  })))), /*#__PURE__*/React__default['default'].createElement(ClearIcon$1, _extends__default['default']({}, themeProps, {
+    disabled: disabled
+  }), /*#__PURE__*/React__default['default'].createElement("i", {
     className: "fas fa-times fa-fw",
     onClick: function onClick() {
-      return onChange(id, []);
+      return disabled ? {} : onChange(id, []);
     }
   }))), renderSuggestions());
 };
 
 SearchBar.defaultProps = {
   id: "",
+  disabled: false,
   onChange: function onChange() {},
   items: [],
   suggestions: [],
@@ -52677,6 +52698,7 @@ SearchBar.defaultProps = {
 SearchBar.propTypes = {
   theme: PropTypes__default['default'].object.isRequired,
   id: PropTypes__default['default'].any,
+  disabled: PropTypes__default['default'].bool,
   onChange: PropTypes__default['default'].func,
   className: PropTypes__default['default'].string,
   items: PropTypes__default['default'].array,
@@ -53220,14 +53242,12 @@ var heightBySize = function heightBySize(size) {
 };
 
 var Container$2 = newStyled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n"])));
-var Inner$1 = newStyled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n\n  min-height: ", ";\n  max-height: ", ";\n"])), function (props) {
+var Inner$1 = newStyled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: row;\n  font-family: ", ";\n  font-size: ", ";\n  padding: 0;\n  margin: 0;\n  border-radius: 0.5rem;\n\n  min-height: ", ";\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
 }, function (props) {
   return heightBySize(props.size);
-}, function (props) {
-  return heightBySize(props.size);
 });
 var TextSpan = newStyled.span(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral__default['default']([""])));
 var Text = newStyled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default['default'](["\n  flex: 1;\n\n  padding: ", ";\n  transition: all 250ms ease;\n  border-radius: 0.2rem 0 0 0.2rem;\n  white-space: pre;\n  flex-grow: 10;\n  height: 100%;\n  background-color: ", ";\n  color: ", ";\n"])), function (props) {