@lanaco/lnc-react-ui 2.1.5 → 2.1.9

package/lib/index.esm.js

@@ -4575,7 +4575,7 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
-var _templateObject$o;
+var _templateObject$p;
 
 var getCheckboxCss = function getCheckboxCss(props) {
   var left, top, width, height, checkWidth, checkHeight, margin, marginLeft, padingLeft, paddingTop;
@@ -4620,7 +4620,7 @@ var getCheckboxCss = function getCheckboxCss(props) {
     height = "1.6875rem";
   }
 
-  return css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: pointer;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n      cursor: pointer;\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
+  return css(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: pointer;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n      cursor: pointer;\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
 };
 
 var CheckBox = function CheckBox(props) {
@@ -4675,7 +4675,7 @@ CheckBox.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$n, _templateObject2$i, _templateObject3$d;
+var _templateObject$o, _templateObject2$j, _templateObject3$e;
 
 var getLabelAndTextProps = function getLabelAndTextProps() {
   return {
@@ -4746,14 +4746,14 @@ var Label = newStyled.label(function (props) {
     }
   };
 });
-var Text$2 = newStyled.label(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  font-size: ", ";\n  top: ", ";\n"])), function (props) {
+var Text$2 = newStyled.label(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  position: relative;\n  font-family: ", ";\n  font-size: ", ";\n  top: ", ";\n"])), function (props) {
   return props.theme.typography.fontFamily;
 }, function (props) {
   return props.theme.typography[props.size].fontSize;
 }, function (props) {
   return getLabelAndTextProps()[props.size].top;
 });
-var Input$4 = newStyled.input(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: pointer;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
+var Input$4 = newStyled.input(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: pointer;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
   return props.theme.palette[props.color].main;
 }, function (props) {
   return props.theme.palette[props.color].main;
@@ -4786,7 +4786,7 @@ var Input$4 = newStyled.input(_templateObject2$i || (_templateObject2$i = _tagge
 }, function (props) {
   return props.theme.palette.gray[1000];
 });
-var Span$2 = newStyled.span(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n  position: absolute;\n  cursor: pointer;\n  top: ", ";\n  left: ", ";\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  height: ", ";\n  width: ", ";\n  border: 0.0625rem solid ", ";\n  border-radius: 0.125rem;\n\n  &:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: white;\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
+var Span$2 = newStyled.span(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n  position: absolute;\n  cursor: pointer;\n  top: ", ";\n  left: ", ";\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  height: ", ";\n  width: ", ";\n  border: 0.0625rem solid ", ";\n  border-radius: 0.125rem;\n\n  &:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: white;\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
   return getSpanProps()[props.size].top;
 }, function (props) {
   return getSpanProps()[props.size].left;
@@ -6513,12 +6513,12 @@ SwitchTransition.defaultProps = {
 };
 var SwitchTransition$1 = SwitchTransition;
 
-var _templateObject$m, _templateObject2$h, _templateObject3$c, _templateObject4$b, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$2;
-var Container$k = newStyled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  box-shadow: 0 0 6px #bebebe;\n  border-radius: 0.175rem;\n  padding: 8px;\n  width: ", ";\n\n  font-family: ", ";\n"])), function (props) {
+var _templateObject$n, _templateObject2$i, _templateObject3$d, _templateObject4$b, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$3;
+var Container$k = newStyled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  box-shadow: 0 0 6px #bebebe;\n  border-radius: 0.175rem;\n  padding: 8px;\n  width: ", ";\n\n  font-family: ", ";\n"])), function (props) {
   return props.width && props.width !== "" ? props.width : "fit-content";
 }, theme.typography.fontFamily);
-var Table$1 = newStyled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border: 1.7px solid #80808060;\n  background-color: whitesmoke;\n  border-radius: 0.175rem;\n"])));
-var Body = newStyled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  &::-webkit-scrollbar {\n    background: white;\n    height: 0;\n    width: 0;\n  }\n  overflow: auto;\n  height: ", ";\n"])), function (props) {
+var Table$1 = newStyled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border: 1.7px solid #80808060;\n  background-color: whitesmoke;\n  border-radius: 0.175rem;\n"])));
+var Body = newStyled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  &::-webkit-scrollbar {\n    background: white;\n    height: 0;\n    width: 0;\n  }\n  overflow: auto;\n  height: ", ";\n"])), function (props) {
   return props.height && props.height !== "" ? props.height : "auto";
 });
 var Row = newStyled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  transition: all 250ms ease;\n  background-color: white;\n\n  &:hover {\n    background-color: whitesmoke;\n  }\n"])));
@@ -6597,7 +6597,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
   return /*#__PURE__*/React__default.createElement(Container$k, _extends({}, themeProps, {
     className: className
   }), /*#__PURE__*/React__default.createElement(Global, {
-    styles: css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n          .item-enter {\n            opacity: 0;\n          }\n\n          .item-enter-active {\n            transition: all 0.4s ease-in;\n            opacity: 1;\n          }\n\n          .item-exit {\n          }\n\n          .item-exit-active {\n            opacity: 0;\n            transition: opacity 400ms ease-out;\n          }\n        "])))
+    styles: css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n          .item-enter {\n            opacity: 0;\n          }\n\n          .item-enter-active {\n            transition: all 0.4s ease-in;\n            opacity: 1;\n          }\n\n          .item-exit {\n          }\n\n          .item-exit-active {\n            opacity: 0;\n            transition: opacity 400ms ease-out;\n          }\n        "])))
   }), /*#__PURE__*/React__default.createElement(Table$1, null, /*#__PURE__*/React__default.createElement(HeaderRow, null, /*#__PURE__*/React__default.createElement(HeaderColumnCheck, {
     check: style === "regular"
   }, style === "regular" ? /*#__PURE__*/React__default.createElement(CheckBox, {
@@ -22470,7 +22470,7 @@ var DateInput = function DateInput(props) {
   useEffect(function () {
     var timeOutId = setTimeout(function () {
       return handleDelayedOnChange();
-    }, 1500);
+    }, 350);
     return function () {
       return clearTimeout(timeOutId);
     };
@@ -22650,13 +22650,13 @@ DropDown.propTypes = {
 
 var _excluded = ["duration", "delay", "children"];
 
-var _templateObject$l, _templateObject2$g;
+var _templateObject$m, _templateObject2$h;
 
 function ownKeys$3(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; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var fadeIn = keyframes$2(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var Wrapper$2 = newStyled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  @media (prefers-reduced-motion: no-preference) {\n    animation-name: ", ";\n    animation-fill-mode: backwards;\n  }\n"])), fadeIn);
+var fadeIn = keyframes$2(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var Wrapper$2 = newStyled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  @media (prefers-reduced-motion: no-preference) {\n    animation-name: ", ";\n    animation-fill-mode: backwards;\n  }\n"])), fadeIn);
 
 var FadeIn = function FadeIn(_ref) {
   var _ref$duration = _ref.duration,
@@ -22674,7 +22674,7 @@ var FadeIn = function FadeIn(_ref) {
   }), children);
 };
 
-var _templateObject$k, _templateObject2$f, _templateObject3$b, _templateObject4$a, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$6, _DropdownLookup$propT;
+var _templateObject$l, _templateObject2$g, _templateObject3$c, _templateObject4$a, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$6, _DropdownLookup$propT;
 
 var paddingBySize$a = function paddingBySize(size) {
   if (size === "small") return "0.325rem 0.375rem";
@@ -22688,8 +22688,8 @@ var heightBySize$b = function heightBySize(size) {
   if (size === "large") return "2.25rem";
 };
 
-var spin$2 = keyframes$2(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
-var Container$i = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  border-bottom: 0.125rem solid\n    ", ";\n  min-height: ", ";\n  max-height: ", ";\n  transition: all 250ms ease;\n  border-radius: 0.125rem;\n  background-color: ", ";\n"])), function (props) {
+var spin$2 = keyframes$2(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n    100% {\n      transform: rotate(360deg);\n    }\n\n    0% {\n      transform: rotate(0deg);\n    }\n"])));
+var Container$i = newStyled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  border-bottom: 0.125rem solid\n    ", ";\n  min-height: ", ";\n  max-height: ", ";\n  transition: all 250ms ease;\n  border-radius: 0.125rem;\n  background-color: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.palette.gray[900] : props.theme.palette[props.color].main;
 }, function (props) {
   return heightBySize$b(props.size);
@@ -22698,7 +22698,7 @@ var Container$i = newStyled.div(_templateObject2$f || (_templateObject2$f = _tag
 }, function (props) {
   return props.disabled ? props.theme.palette.gray[200] : props.theme.palette[props.color].lighter;
 });
-var Inner$4 = newStyled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var Inner$4 = newStyled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 var InputContainer$2 = newStyled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var ButtonContainer$2 = newStyled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 250ms ease;\n  color: ", ";\n  padding: 0 0.1875rem;\n  cursor: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.palette.gray.textLight : props.theme.palette[props.color].main;
@@ -22975,7 +22975,7 @@ DropdownLookup.propTypes = (_DropdownLookup$propT = {
   onChange: PropTypes.func
 }, _defineProperty(_DropdownLookup$propT, "load", PropTypes.func), _defineProperty(_DropdownLookup$propT, "clear", PropTypes.func), _defineProperty(_DropdownLookup$propT, "className", PropTypes.string), _defineProperty(_DropdownLookup$propT, "initialValue", PropTypes.object), _defineProperty(_DropdownLookup$propT, "notItemsFoundText", PropTypes.string), _defineProperty(_DropdownLookup$propT, "size", PropTypes.oneOf(["small", "medium", "large"])), _defineProperty(_DropdownLookup$propT, "color", PropTypes.oneOf(["primary", "secondary", "success", "error", "warning", "gray"])), _DropdownLookup$propT);
 
-var _templateObject$j;
+var _templateObject$k;
 
 var getPadding = function getPadding(size) {
   if (size === "small") return "0.4125rem 0.34375rem";
@@ -22989,7 +22989,7 @@ var heightBySize$a = function heightBySize(size) {
   if (size === "large") return "max-height: 2.375rem; min-height: 2.375rem;";
 };
 
-var Span$1 = newStyled.span(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: inherit;\n  font-size: ", ";\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) {
+var Span$1 = newStyled.span(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: inherit;\n  font-size: ", ";\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) {
   return props.theme.typography[props.size].fontSize;
 }, function (props) {
   return getPadding(props.size);
@@ -23442,13 +23442,12 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     onChange(id, val);
   };
 
-  return /*#__PURE__*/React__default.createElement(StyledTextInput$1, _defineProperty({
+  return /*#__PURE__*/React__default.createElement(StyledTextInput$1, {
     theme: theme,
     size: size,
     color: color,
     onChange: handleOnChange,
     onPaste: handleOnChange,
-    onBlur: handleOnBlur,
     className: className,
     disabled: disabled,
     value: val,
@@ -23460,11 +23459,13 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     onInput: function onInput(e) {
       e.target.style.whiteSpace = "inherit";
       e.target.style.height = "".concat(e.target.scrollHeight, "px");
+    },
+    onBlur: function onBlur(e) {
+      e.target.style.height = heightBySize$7(size);
+      e.target.style.whiteSpace = "nowrap";
+      handleOnBlur(e);
     }
-  }, "onBlur", function onBlur(e) {
-    e.target.style.height = heightBySize$7(size);
-    e.target.style.whiteSpace = "nowrap";
-  }));
+  });
 });
 TextArea.defaultProps = {
   id: "",
@@ -31315,11 +31316,11 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return cloneElement(child); })));
 };
 
-var _templateObject$i, _templateObject2$e;
-var Overlay = newStyled(motion.div)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n"])), function (props) {
+var _templateObject$j, _templateObject2$f;
+var Overlay = newStyled(motion.div)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n"])), function (props) {
   return props.zIndex;
 });
-var ModalContainer = newStyled(motion.div)(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  width: 50%;\n  background-color: white;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  border-radius: 0.2rem;\n  background: white;\n  z-index: ", ";\n"])), function (props) {
+var ModalContainer = newStyled(motion.div)(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  width: 50%;\n  background-color: white;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  border-radius: 0.2rem;\n  background: white;\n  z-index: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.zIndex;
@@ -31385,19 +31386,7 @@ function Modal$1(props) {
 
   var onClickOutsideModal = function onClickOutsideModal(event) {
     if (event.target !== event.currentTarget) return;
-    if (clickOutsideToClose || !showHeader) onClose();
-  };
-
-  var modalVariant = {
-    initial: {
-      opacity: 0
-    },
-    isOpen: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0
-    }
+    if (clickOutsideToClose || !showHeader) onClose(event);
   };
   var containerVariant = {
     initial: {
@@ -31413,14 +31402,10 @@ function Modal$1(props) {
       top: "-50%"
     }
   };
-  return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(Overlay, _extends({}, themeProps, {
-    initial: "initial",
-    animate: "isOpen",
-    exit: "exit",
-    variants: modalVariant,
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, open && /*#__PURE__*/React__default.createElement(Overlay, _extends({}, themeProps, {
     onClick: onClickOutsideModal,
     className: className
-  }), /*#__PURE__*/React__default.createElement(ModalContainer, _extends({}, themeProps, {
+  }), /*#__PURE__*/React__default.createElement(AnimatePresence, null, /*#__PURE__*/React__default.createElement(ModalContainer, _extends({}, themeProps, {
     initial: "initial",
     animate: "isOpen",
     exit: "exit",
@@ -31428,9 +31413,11 @@ function Modal$1(props) {
   }), showHeader && /*#__PURE__*/React__default.createElement(Header$1, themeProps, /*#__PURE__*/React__default.createElement(Title$1, themeProps, header), /*#__PURE__*/React__default.createElement(CloseButton$1, themeProps, /*#__PURE__*/React__default.createElement(Button$1, _extends({}, themeProps, {
     icon: "times",
     iconStyle: "solid",
-    onClick: onClose,
+    onClick: function onClick(e) {
+      return onClose(e);
+    },
     color: basic ? "transparent" : themeProps.color
-  })))), /*#__PURE__*/React__default.createElement(Content$4, themeProps, children))));
+  })))), /*#__PURE__*/React__default.createElement(Content$4, themeProps, children)))));
 }
 
 Modal$1.defaultProps = {
@@ -31636,26 +31623,52 @@ var css_248z$6 = ".styles-module_dropbtn__3BuA0 {\n  font-size: var(--base-addit
 var styles$1 = {"dropbtn":"styles-module_dropbtn__3BuA0","disabled":"styles-module_disabled__3pCU6","dropdownContent":"styles-module_dropdownContent__2g5rN","dropdown":"styles-module_dropdown__zPTAO","linkInnerSpan":"styles-module_linkInnerSpan__2Gjny","linkIconSpan":"styles-module_linkIconSpan__1IQ0O","iconSpan":"styles-module_iconSpan__2IYf9","mymove":"styles-module_mymove__2DflL"};
 styleInject(css_248z$6);
 
+var _templateObject$i, _templateObject2$e, _templateObject3$b;
+
+var Dropdown = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  display: ", ";\n  position: absolute;\n  background-color: white;\n  min-width: 160px;\n  border-radius: 3.5px;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n"])), function (props) {
+  return props.show ? "block" : "none";
+});
+var ItemWrapper$2 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  padding: 2px;\n"])));
+var Item$4 = newStyled.a(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n  background-color: white;\n  color: ", ";\n  padding: 6px 6px;\n  text-decoration: none;\n  display: block;\n  font-size: 12px;\n  padding: 2px;\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), theme.palette.primary.main, theme.palette.primary.light); //============================================================
+
 var DropdownMenu = function DropdownMenu(props) {
   var _props$actionData = props.actionData,
       actionData = _props$actionData === void 0 ? function () {} : _props$actionData,
       _props$items = props.items,
       items = _props$items === void 0 ? [] : _props$items;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: props.disabled ? styles$1.disabled : styles$1.dropdown
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1.dropbtn,
-    disabled: props.disabled
-  }, props.label, "\xA0\xA0", /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1.iconSpan
-  }, /*#__PURE__*/React__default.createElement("i", {
-    iconClassName: props.downDoubleIconClassName
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.dropdownContent
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var onHover = function onHover() {
+    if (props.disabled !== true) setShow(true);
+  };
+
+  var onBlur = function onBlur() {
+    setShow(false);
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    onMouseOver: onHover,
+    onMouseOut: onBlur
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    disabled: props.disabled,
+    onClick: onHover,
+    icon: "bars",
+    inverted: true
+  })), /*#__PURE__*/React__default.createElement(Dropdown, {
+    show: show
   }, items.map(function (x, i) {
-    return /*#__PURE__*/React__default.createElement("a", {
+    return /*#__PURE__*/React__default.createElement(ItemWrapper$2, {
       key: i,
+      onMouseOver: onHover,
+      onMouseOut: onBlur
+    }, /*#__PURE__*/React__default.createElement(Item$4, {
       href: "#",
+      onMouseOver: onHover,
+      onMouseOut: onBlur,
       onClick: function onClick(e) {
         e.preventDefault();
         x.action(actionData);
@@ -31665,8 +31678,8 @@ var DropdownMenu = function DropdownMenu(props) {
     }, /*#__PURE__*/React__default.createElement("span", {
       className: styles$1.linkIconSpan
     }, /*#__PURE__*/React__default.createElement(Icon$1, {
-      iconClassName: x.iconClassName
-    })), x.name));
+      icon: x.icon
+    })), x.name)));
   })));
 };
 
@@ -49010,7 +49023,7 @@ var lodash = {exports: {}};
 }.call(commonjsGlobal));
 }(lodash, lodash.exports));
 
-var TableSelectionType$1 = {
+var TableSelectionType = {
   SINGLE: "single",
   MULTIPLE: "multiple"
 };
@@ -49262,11 +49275,11 @@ Pagination.propTypes = {
 
 var _templateObject$f, _templateObject2$b, _templateObject3$9, _templateObject4$8, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
 var Container$d = newStyled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
-var Wrapper$1 = newStyled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral([""])));
+var Wrapper$1 = newStyled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
 var TableTable$1 = newStyled.table(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  border-collapse: collapse;\n  width: 100%;\n"])));
 var TableHead$1 = newStyled.thead(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
 var TableHeadRow$1 = newStyled.tr(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid #80808025;\n"])));
-var TableHeadCell$1 = newStyled.th(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\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: pointer;\n  }\n"])), function (props) {
+var TableHeadCell$1 = newStyled.th(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\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: pointer;\n  }\n"])), function (props) {
   return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
 }, theme.palette.primary.light);
 var HeaderInnerCell$1 = newStyled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  // justify-content: center;\n\n  & i {\n    color: black;\n  }\n"])));
@@ -49450,7 +49463,9 @@ var TableView = function TableView(props) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableBodyRow$1, {
       selectedRow: rowSelected,
       key: i
-    }, renderSelectionCell(dataItem, rowSelected, i), Columns.map(function (col, j) {
+    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
+      return x.hide !== true;
+    }).map(function (col, j) {
       return renderBodyCell(dataItem, col, i, j);
     })));
   }; // const renderCell = (rowData, def, key) => {
@@ -49482,20 +49497,13 @@ var TableView = function TableView(props) {
     var onClick = !isFunction(def.specialRender) ? function () {
       ChangeToFormView(dataItem);
     } : function () {};
-    if (!EnableFormView) onClick = function onClick() {};
-
-    if (!EnableFormView && EnableSelection) {
-      var checked = isItemInArray(dataItem, SelectedData, SelectionIndicator);
-
-      onClick = function onClick() {
-        return handleOnSelection(dataItem, {
-          target: {
-            checked: !checked
-          }
-        });
-      };
-    }
+    if (!EnableFormView) onClick = function onClick() {}; // if (!EnableFormView && EnableSelection) {
+    //   var checked = isItemInArray(dataItem, SelectedData, SelectionIndicator);
+    //   onClick = () =>
+    //     handleOnSelection(dataItem, { target: { checked: !checked } });
+    // }
 
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) onClick = function onClick() {};
     var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
     return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
       key: tabIndex,
@@ -49504,7 +49512,7 @@ var TableView = function TableView(props) {
   };
 
   var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType$1.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
     return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
       selectionCell: true,
       key: -1
@@ -49604,13 +49612,13 @@ var TableView = function TableView(props) {
   };
 
   var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType$1.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
     if (SelectedEntirePage && Localization.DeselectAll) ;
     if (!SelectedEntirePage && Localization.SelectAll) ;
     return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
       selectionCell: true,
       key: -1
-    }, SelectionType === TableSelectionType$1.MULTIPLE && /*#__PURE__*/React__default.createElement(CheckBox, {
+    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default.createElement(CheckBox, {
       checked: SelectedEntirePage,
       onChange: function onChange() {
         return handleSelectAll(!SelectedEntirePage);
@@ -49621,7 +49629,9 @@ var TableView = function TableView(props) {
 
   return /*#__PURE__*/React__default.createElement(Container$d, null, /*#__PURE__*/React__default.createElement(Wrapper$1, null, /*#__PURE__*/React__default.createElement(TableTable$1, {
     cellSpacing: 0
-  }, /*#__PURE__*/React__default.createElement(TableHead$1, null, /*#__PURE__*/React__default.createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.map(function (col, i) {
+  }, /*#__PURE__*/React__default.createElement(TableHead$1, null, /*#__PURE__*/React__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.createElement(TableBody$1, null, renderBody())))); // return (
   //   <div>
@@ -49684,7 +49694,7 @@ Spinner.propTypes = {
 var css_248z$4 = ".fade1-enter {\n  opacity: 0;\n}\n.fade1-exit {\n  opacity: 1;\n}\n.fade1-enter-active {\n  opacity: 1;\n}\n.fade1-exit-active {\n  opacity: 0;\n}\n.fade1-enter-active,\n.fade1-exit-active {\n  transition: opacity 330ms;\n}\n\n.fade2-enter {\n  opacity: 0;\n}\n.fade2-exit {\n  opacity: 1;\n}\n.fade2-enter-active {\n  opacity: 1;\n}\n.fade2-exit-active {\n  opacity: 0;\n}\n.fade2-enter-active,\n.fade2-exit-active {\n  transition: opacity 330ms;\n}\n";
 styleInject(css_248z$4);
 
-var _templateObject$d, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$3;
+var _templateObject$d, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
 
 function ownKeys$2(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; }
 
@@ -49714,7 +49724,9 @@ var getBorderSyle$1 = function getBorderSyle(borderStyle, read, theme, color) {
   return css;
 };
 
-var Container$c = newStyled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  box-shadow: 0 0 12px #bebebe;\n  border-radius: 3px;\n  padding: 0 4px;\n"])));
+var Container$c = newStyled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  box-shadow: ", ";\n  border-radius: 3px;\n  padding: 0 4px;\n"])), function (props) {
+  return props.shadow === false ? "0" : "0 0 12px #bebebe";
+});
 var TableContainer$1 = newStyled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  font-family: var(--font-base-ubuntu);\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n"])));
 var PaginationContainer$1 = newStyled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  border-top: 1px solid #80808025;\n"])));
 var FormContainer$2 = newStyled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow-y: auto;\n  max-height: calc(100vh - 120px);\n  border-radius: 3px;\n\n  ", "\n"])), function (props) {
@@ -49728,6 +49740,7 @@ var LoaderContainer$1 = newStyled.div(_templateObject9$4 || (_templateObject9$4
 var LoaderContainerTransparent$1 = newStyled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  z-index: 10000000;\n"])));
 var Loader$1 = newStyled.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 48%;\n  left: 47%;\n"])));
 var DivRelative$1 = newStyled.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var FilteringContainer = newStyled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 
 var DataView = function DataView(props) {
   var emptyFunc = function emptyFunc() {};
@@ -49746,7 +49759,9 @@ var DataView = function DataView(props) {
       Table = _ref.Table,
       Form = _ref.Form;
 
-  var _props$ChangeToFormVi = props.ChangeToFormView,
+  var _props$Shadow = props.Shadow,
+      Shadow = _props$Shadow === void 0 ? true : _props$Shadow,
+      _props$ChangeToFormVi = props.ChangeToFormView,
       ChangeToFormView = _props$ChangeToFormVi === void 0 ? emptyFunc : _props$ChangeToFormVi,
       _props$ChangeToTableV = props.ChangeToTableView,
       ChangeToTableView = _props$ChangeToTableV === void 0 ? emptyFunc : _props$ChangeToTableV,
@@ -49761,9 +49776,12 @@ var DataView = function DataView(props) {
       _props$OnSelectAll = props.OnSelectAll,
       OnSelectAll = _props$OnSelectAll === void 0 ? emptyFunc : _props$OnSelectAll,
       _props$FormView = props.FormView,
-      FormView = _props$FormView === void 0 ? emptyFunc : _props$FormView;
-      props.FilteringView;
-      var _props$OnHeaderClick = props.OnHeaderClick,
+      FormView = _props$FormView === void 0 ? emptyFunc : _props$FormView,
+      _props$FilteringView = props.FilteringView,
+      FilteringView = _props$FilteringView === void 0 ? function () {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  } : _props$FilteringView,
+      _props$OnHeaderClick = props.OnHeaderClick,
       OnHeaderClick = _props$OnHeaderClick === void 0 ? emptyFunc : _props$OnHeaderClick,
       _props$OnRefresh = props.OnRefresh,
       OnRefresh = _props$OnRefresh === void 0 ? emptyFunc : _props$OnRefresh,
@@ -49906,7 +49924,8 @@ var DataView = function DataView(props) {
       goToPreviousPage: goToPreviousPage,
       goToFirstPage: goToFirstPage,
       goToLastPage: goToLastPage,
-      EnableExports: Options.EnableExports
+      EnableExports: Options.EnableExports,
+      Localization: Localization.Pagination
     })
   }; //======== METHODS ========
 
@@ -49934,13 +49953,26 @@ var DataView = function DataView(props) {
           }
         },
         disabled: Table.SelectedData.length === 0,
-        icon: "plus"
+        icon: "arrow-circle-down",
+        inverted: true
       }));
     }
 
     return false;
   };
 
+  var renderContextMenu = function renderContextMenu() {
+    if (Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0) {
+      return /*#__PURE__*/React__default.createElement(FlexItem$1, null, /*#__PURE__*/React__default.createElement(DropdownMenu, {
+        disabled: freezeLoading([Table.SelectedData.length === 0]),
+        items: Table.Actions || [],
+        label: Localization.Actions,
+        actionData: Table.SelectedData,
+        downDoubleIconClassName: Icons.DownDouble
+      }));
+    } else return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  };
+
   var renderRefreshButton = function renderRefreshButton() {
     if (General.CurrentView !== ViewType.TABLE_VIEW || !General.DataFromBackend) return false;
     return /*#__PURE__*/React__default.createElement(FlexItem$1, null, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -50031,6 +50063,11 @@ var DataView = function DataView(props) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LoaderContainer$1, null), /*#__PURE__*/React__default.createElement(LoaderContainerTransparent$1, null, /*#__PURE__*/React__default.createElement(Loader$1, null, Table.Data.length > 2 ? /*#__PURE__*/React__default.createElement(Spinner, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null))));
   };
 
+  var renderFiltering = function renderFiltering() {
+    if (!Options.EnableFilters || General.CurrentView === ViewType.FORM_VIEW) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+    return /*#__PURE__*/React__default.createElement(FilteringContainer, null, FilteringView());
+  };
+
   var renderFormViewMovement = function renderFormViewMovement() {
     if (!Options.EnableFormViewMovement || Form.Mode === "ADD" || General.CurrentView === "TableView") return false;
     return /*#__PURE__*/React__default.createElement(FormViewMovement, {
@@ -50047,8 +50084,9 @@ var DataView = function DataView(props) {
     var x4 = Options.EnableFormViewMovement && Form !== null && General.CurrentView === "FormView" && Form.Mode !== "ADD" ? true : false;
     var x5 = Options.ReadOnly || !Options.EnableSwitchReadOnlyMode || Form === null || Form === undefined || General.CurrentView !== "FormView" ? false : true;
     var x6 = General.CurrentView !== "TableView" ? false : true;
-    var x7 = General.IsLookup && Table.SelectionType === TableSelectionType.MULTIPLE ? true : false;
-    if (x1 || x2 || x3 || x4 || x5 || x6 || x7) return /*#__PURE__*/React__default.createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderLookupTakeValues());
+    var x7 = General.IsLookup && Table.SelectionType === "multiple" ? true : false;
+    var x8 = Options.EnableActions && General.CurrentView === ViewType.TABLE_VIEW && Table.Actions && Table.Actions.length > 0;
+    if (x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8) return /*#__PURE__*/React__default.createElement(HeaderContainer$1, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderLookupTakeValues(), renderContextMenu());
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   };
 
@@ -50100,7 +50138,9 @@ var DataView = function DataView(props) {
 
   var renderComponent = function renderComponent() {
     var key = General.CurrentView !== "TableView" && General.DataFromBackend;
-    return /*#__PURE__*/React__default.createElement(Container$c, themeProps, renderHeader(), /*#__PURE__*/React__default.createElement(SwitchTransition$1, {
+    return /*#__PURE__*/React__default.createElement(Container$c, _extends({}, themeProps, {
+      shadow: Shadow
+    }), renderFiltering(), renderHeader(), /*#__PURE__*/React__default.createElement(SwitchTransition$1, {
       mode: "out-in"
     }, /*#__PURE__*/React__default.createElement(CSSTransition$1, {
       key: key,
@@ -50116,26 +50156,7 @@ var DataView = function DataView(props) {
         node.addEventListener("transitionend", done, false);
       },
       classNames: "fade2"
-    }, renderPagination()))) // <div>
-    //   <div className={styles.flexContainer}>
-    //     <div className={styles.flexInnerContainer}>
-    //       {renderChangeToTableView()}
-    //       {renderSwitchToEditModeButton()}
-    //       {renderGoToAddButton()}
-    //       {renderDeleteSelectedButton()}
-    //       {renderDeleteConfirmationBox()}
-    //       {renderAddWithCopyButton()}
-    //       {renderLookupTakeValues()}
-    //       {renderRefreshButton()}
-    //       {renderContextMenu()}
-    //     </div>
-    //     <div className={styles.filterContainerHolder}>
-    //       {renderFiltering()}
-    //     </div>
-    //   </div>
-    //   <div className={mergeCSS([styles.view])}>{renderView()}</div>
-    // </div>
-    ;
+    }, renderPagination())));
   };
 
   return renderComponent();
@@ -50335,7 +50356,7 @@ var Table = function Table(props) {
       _ref3$EnableOrdering = _ref3.EnableOrdering,
       EnableOrdering = _ref3$EnableOrdering === void 0 ? false : _ref3$EnableOrdering,
       _ref3$SelectionType = _ref3.SelectionType,
-      SelectionType = _ref3$SelectionType === void 0 ? TableSelectionType$1.SINGLE : _ref3$SelectionType; //======================== STATE ============================================
+      SelectionType = _ref3$SelectionType === void 0 ? TableSelectionType.SINGLE : _ref3$SelectionType; //======================== STATE ============================================
 
 
   var _useState = useState([]),
@@ -50364,7 +50385,7 @@ var Table = function Table(props) {
   };
 
   var renderEmptySelectionCell = function renderEmptySelectionCell() {
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType$1.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
     return /*#__PURE__*/React__default.createElement("td", null);
   };
 
@@ -50435,7 +50456,7 @@ var Table = function Table(props) {
   };
 
   var renderSelectionCell = function renderSelectionCell(dataItem, selected) {
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType$1.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null); // console.log(dataItem, selected);
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null); // console.log(dataItem, selected);
 
     return /*#__PURE__*/React__default.createElement(TableBodyCell, {
       selectionCell: true,
@@ -50460,13 +50481,13 @@ var Table = function Table(props) {
   };
 
   var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType$1.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
     if (SelectedEntirePage && Localization.DeselectAll) ;
     if (!SelectedEntirePage && Localization.SelectAll) ;
     return /*#__PURE__*/React__default.createElement(TableHeadCell, {
       selectionCell: true,
       key: -1
-    }, SelectionType === TableSelectionType$1.MULTIPLE && /*#__PURE__*/React__default.createElement(CheckBox, {
+    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default.createElement(CheckBox, {
       checked: SelectedEntirePage,
       onChange: handleSelectAll
     }));
@@ -50828,7 +50849,7 @@ var getDefaultState = function getDefaultState() {
       SelectedDataIndexes: [],
       SelectionIndicator: "id",
       SelectedEntirePage: false,
-      SelectionType: TableSelectionType$1.MULTIPLE,
+      SelectionType: TableSelectionType.MULTIPLE,
       Columns: [],
       Actions: []
     },
@@ -51049,7 +51070,7 @@ var Grid = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       SelectedDataIndexes: [],
       SelectionIndicator: "id",
       SelectedEntirePage: false,
-      SelectionType: TableSelectionType$1.MULTIPLE,
+      SelectionType: TableSelectionType.MULTIPLE,
       Columns: [],
       Actions: []
     },
@@ -51567,13 +51588,13 @@ var Grid = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       selectedData = state.Table.SelectedData.filter(function (x) {
         return x[id] !== dataItem[id];
       });
-    } else if (state.Table.SelectionType === TableSelectionType$1.SINGLE) {
+    } else if (state.Table.SelectionType === TableSelectionType.SINGLE) {
       selectedData = [dataItem];
-    } else if (state.Table.SelectionType === TableSelectionType$1.MULTIPLE) {
+    } else if (state.Table.SelectionType === TableSelectionType.MULTIPLE) {
       selectedData.push(dataItem);
     }
 
-    if (state.Table.SelectionType === TableSelectionType$1.MULTIPLE) {
+    if (state.Table.SelectionType === TableSelectionType.MULTIPLE) {
       var dataGuids = state.Table.Data.map(function (x) {
         return x[id];
       });
@@ -51622,9 +51643,9 @@ var Grid = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     if (Form === null && !state.General.IsLookup) return;
     var id = state.General.IsLookup ? SelectedData.Identificator : "Guid";
 
-    if (state.General.IsLookup && state.Table.SelectionType === TableSelectionType$1.SINGLE) {
+    if (state.General.IsLookup && state.Table.SelectionType === TableSelectionType.SINGLE) {
       OnChange([dataItem]);
-    } else if (state.General.IsLookup && state.Table.SelectionType === TableSelectionType$1.MULTIPLE) {
+    } else if (state.General.IsLookup && state.Table.SelectionType === TableSelectionType.MULTIPLE) {
       onSelect(dataItem);
     } else {
       setState(function (draft) {
@@ -51961,7 +51982,7 @@ var Grid = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   };
 
   var renderLookupTakeValues = function renderLookupTakeValues() {
-    if (state.General.IsLookup && state.Table.SelectionType === TableSelectionType$1.MULTIPLE) {
+    if (state.General.IsLookup && state.Table.SelectionType === TableSelectionType.MULTIPLE) {
       return /*#__PURE__*/React__default.createElement(FlexItem, null, /*#__PURE__*/React__default.createElement(Button$1, {
         tooltip: Localization.TakeValues || "Take values",
         onClick: function onClick() {
@@ -52123,7 +52144,7 @@ var Grid = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     var x4 = state.Options.EnableFormViewMovement && Form !== null && state.General.CurrentView === "FormView" && state.Form.Mode !== "ADD" ? true : false;
     var x5 = state.Options.ReadOnly || !state.Options.EnableSwitchReadOnlyMode || Form === null || Form === undefined || state.General.CurrentView !== "FormView" ? false : true;
     var x6 = state.General.CurrentView !== "TableView" || Load === null ? false : true;
-    var x7 = state.General.IsLookup && state.Table.SelectionType === TableSelectionType$1.MULTIPLE ? true : false;
+    var x7 = state.General.IsLookup && state.Table.SelectionType === TableSelectionType.MULTIPLE ? true : false;
     if (x1 || x2 || x3 || x4 || x5 || x6 || x7) return /*#__PURE__*/React__default.createElement(HeaderContainer, null, renderChangeToTableView(), renderDeleteSelectedButton(), renderGoToAddButton(), renderFormViewMovement(), renderSwitchToEditModeButton(), renderRefreshButton(), renderLookupTakeValues());
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   };