@mw-kit/mw-ui 1.7.87 → 1.7.89

package/dist/index.js

@@ -12228,131 +12228,126 @@ var EllipsisContainer$1 = function EllipsisContainer$1(props) {
   }));
 };
 
-var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1;
-var IconContainer = styled__default.button(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
-  var onClick = _ref.onClick,
-      disabled = _ref.disabled;
-  if (!onClick || disabled) return;
-  return styled.css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
-});
-var ChildrenContainer = styled__default(EllipsisContainer$1)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  bottom: 0;\n  left: 0;\n  line-height: 19px;\n  display: flex;\n  gap: calc(", " / 2);\n"])), function (_ref2) {
-  var theme = _ref2.theme;
+var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1;
+var IconContainer = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n"])));
+var ChildrenContainer = styled__default(EllipsisContainer$1)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  bottom: 0;\n  left: 0;\n  line-height: 19px;\n  display: flex;\n  gap: calc(", " / 2);\n"])), function (_ref) {
+  var theme = _ref.theme;
   return theme.spacings.s1;
 });
-var Input = styled__default.input(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n\n    ", "\n  }\n\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n\n  ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
-  var theme = _ref3.theme;
+var Input = styled__default.input(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n\n    ", "\n  }\n\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n\n  ", ";\n\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  ", ";\n\n  box-shadow: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+  var theme = _ref2.theme;
   return theme.useTypography('p');
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      invalid = _ref3.$invalid;
+  return invalid ? theme.colors.warningRed : theme.colors.darkBlue;
 }, function (_ref4) {
   var theme = _ref4.theme,
       invalid = _ref4.$invalid;
-  return invalid ? theme.colors.warningRed : theme.colors.darkBlue;
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      invalid = _ref5.$invalid;
   return invalid ? theme.colors.warningRed : theme.colors.darkGrey;
-}, function (_ref6) {
-  var placeholder = _ref6.placeholder;
+}, function (_ref5) {
+  var placeholder = _ref5.placeholder;
 
   if (placeholder !== '••••••••') {
-    return styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref7) {
-      var theme = _ref7.theme;
+    return styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n          ", ";\n          opacity: 1;\n        "])), function (_ref6) {
+      var theme = _ref6.theme;
       return theme.useTypography('p');
     });
   }
 
-  return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      paddingless = _ref8.$paddingless;
+  return styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
+}, function (_ref7) {
+  var theme = _ref7.theme,
+      paddingless = _ref7.$paddingless;
 
   if (paddingless) {
-    return styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n      "])));
+    return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n      "])));
   }
 
-  return styled.css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      ~ ", " {\n        padding: ", " ", ";\n      }\n    "])), theme.spacings.s2, theme.spacings.s3, ChildrenContainer, theme.spacings.s2, theme.spacings.s3);
-}, function (_ref9) {
-  var theme = _ref9.theme,
-      invalid = _ref9.$invalid,
-      borderless = _ref9.$borderless;
+  return styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      ~ ", " {\n        padding: ", " ", ";\n      }\n    "])), theme.spacings.s2, theme.spacings.s3, ChildrenContainer, theme.spacings.s2, theme.spacings.s3);
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      invalid = _ref8.$invalid,
+      borderless = _ref8.$borderless;
   if (borderless) return 'transparent';
   return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      invalid = _ref10.$invalid;
+}, function (_ref9) {
+  var theme = _ref9.theme,
+      invalid = _ref9.$invalid;
   var color = invalid ? theme.getColor('warningRed', 5) : theme.colors.white;
-  return styled.css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, color);
-}, function (_ref11) {
-  var arrows = _ref11.$arrows;
+  return styled.css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, color);
+}, function (_ref10) {
+  var arrows = _ref10.$arrows;
   if (arrows) return;
-  return styled.css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n      /* Chrome, Safari, Edge, Opera */\n      :-webkit-outer-spin-button,\n      :-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n\n      /* Firefox */\n      -moz-appearance: textfield;\n    "])));
-}, function (_ref12) {
-  var readOnly = _ref12.readOnly,
-      onClick = _ref12.onClick,
-      disabled = _ref12.disabled;
-  if (readOnly || !onClick || disabled) return;
-  return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  return styled.css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n      /* Chrome, Safari, Edge, Opera */\n      :-webkit-outer-spin-button,\n      :-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n\n      /* Firefox */\n      -moz-appearance: textfield;\n    "])));
+}, function (_ref11) {
+  var readOnly = _ref11.readOnly,
+      onClick = _ref11.onClick,
+      disabled = _ref11.disabled;
+  if (!readOnly || !onClick || disabled) return;
+  return styled.css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var InputContainer = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", ";\n"])), function (_ref13) {
-  var width = _ref13.width;
+var InputContainer = styled__default.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", ";\n"])), function (_ref12) {
+  var width = _ref12.width;
   return width || '100%';
 });
-var Label = styled__default.label(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 17px;\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n\n  ", "\n\n  > ", " > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref14) {
-  var theme = _ref14.theme;
+var Label = styled__default.label(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 17px;\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n\n  ", "\n\n  > ", " > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref13) {
+  var theme = _ref13.theme;
   return theme.useTypography('p');
-}, function (_ref15) {
-  var theme = _ref15.theme;
+}, function (_ref14) {
+  var theme = _ref14.theme;
   return theme.colors.greyishBlue;
-}, function (_ref16) {
-  var width = _ref16.$width;
+}, function (_ref15) {
+  var width = _ref15.$width;
   return width || '100%';
-}, function (_ref17) {
-  var disabled = _ref17.$disabled,
-      viewMode = _ref17.$viewMode;
+}, function (_ref16) {
+  var disabled = _ref16.$disabled,
+      viewMode = _ref16.$viewMode;
   if (!disabled || viewMode) return;
-  return styled.css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, InputContainer, IconContainer, function (_ref18) {
-  var theme = _ref18.theme,
-      paddingless = _ref18.$paddingless;
+  return styled.css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, InputContainer, IconContainer, function (_ref17) {
+  var theme = _ref17.theme,
+      paddingless = _ref17.$paddingless;
   return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
-}, function (_ref19) {
-  var readOnly = _ref19.$readOnly,
-      disabled = _ref19.$disabled,
-      loading = _ref19.$loading;
+}, function (_ref18) {
+  var readOnly = _ref18.$readOnly,
+      disabled = _ref18.$disabled,
+      loading = _ref18.$loading;
   if (loading || readOnly || disabled) return;
-  return styled.css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
-}, function (_ref20) {
-  var theme = _ref20.theme,
-      icon = _ref20.$icon,
-      paddingless = _ref20.$paddingless;
-  if (!icon) return;
-  var width = icon.width,
-      position = icon.position;
+  return styled.css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+}, function (_ref19) {
+  var theme = _ref19.theme,
+      iconWidths = _ref19.$iconWidths,
+      position = _ref19.$iconPosition,
+      paddingless = _ref19.$paddingless;
+  if (iconWidths.length < 1) return;
+  var width = "calc(" + iconWidths.join(' + ') + " + " + theme.spacings.s1 + " / 2 * " + (iconWidths.length - 1) + ")";
   var padding = paddingless ? '0px' : theme.spacings.s3;
 
   if (position === 'right') {
-    return styled.css(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n        > ", " > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " > ", " {\n          padding-right: calc(", " + ", ");\n          ~ ", " {\n            padding-right: calc(", " + ", ");\n          }\n        }\n      "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
+    return styled.css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n        > ", " > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " > ", " {\n          padding-right: calc(", " + ", ");\n          ~ ", " {\n            padding-right: calc(", " + ", ");\n          }\n        }\n      "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
   }
 
-  return styled.css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n      > ", " > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " > ", " {\n        padding-left: calc(", " + ", ");\n        ~ ", " {\n          padding-left: calc(", " + ", ");\n        }\n      }\n    "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
+  return styled.css(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n      > ", " > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " > ", " {\n        padding-left: calc(", " + ", ");\n        ~ ", " {\n          padding-left: calc(", " + ", ");\n        }\n      }\n    "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
 });
-var LabelText = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n\n  ", "\n\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref21) {
-  var viewMode = _ref21.$viewMode;
+var LabelText = styled__default.div(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n\n  ", "\n\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref20) {
+  var viewMode = _ref20.$viewMode;
   if (!viewMode) return;
-  return styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n      font-weight: bold;\n    "])));
+  return styled.css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n      font-weight: bold;\n    "])));
+}, function (_ref21) {
+  var theme = _ref21.theme,
+      viewMode = _ref21.$viewMode;
+  return theme.spacings[viewMode ? 's3' : 's1'];
 }, function (_ref22) {
-  var theme = _ref22.theme,
+  var required = _ref22.$required,
       viewMode = _ref22.$viewMode;
-  return theme.spacings[viewMode ? 's3' : 's1'];
-}, function (_ref23) {
-  var required = _ref23.$required,
-      viewMode = _ref23.$viewMode;
   if (!required || viewMode) return;
-  return styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
-var ViewModeContainer = styled__default.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref24) {
-  var children = _ref24.children;
+var ViewModeContainer = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref23) {
+  var children = _ref23.children;
   if (children) return;
-  return styled.css(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n      :before {\n        content: ' ';\n        white-space: pre;\n      }\n    "])));
+  return styled.css(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n      :before {\n        content: ' ';\n        white-space: pre;\n      }\n    "])));
 });
 
 var defaultValue = {
@@ -12430,6 +12425,8 @@ var Form = Object.assign(React__default.forwardRef(Object.assign(function (props
 });
 
 var Input$1 = React__default.forwardRef(function (props, ref) {
+  var _props$icon;
+
   var _props = _extends({}, props),
       label = _props.label,
       loading = _props.loading,
@@ -12457,21 +12454,6 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
   var required = isRequired() || props.required;
   var disabled = isDisabled() || props.disabled;
   var viewMode = isViewMode() || props.viewMode;
-  var position;
-  var iconWidth;
-  var iconSubmit;
-  var iconOnClick;
-  var icon;
-
-  if (props.icon) {
-    icon = _extends({}, props.icon.icon);
-    position = props.icon.position || 'right';
-    if (invalid) icon.color = 'warningRed';
-    iconWidth = icon.width;
-    iconSubmit = props.icon.submit;
-    iconOnClick = props.icon.onClick;
-  }
-
   var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'htmlReadOnly', 'viewMode', 'width', 'inputWidth', 'arrows', 'borderless', 'paddingless', 'children'], {
     $invalid: invalid,
     type: 'text',
@@ -12540,31 +12522,40 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     };
   }
 
-  if (loading) {
-    position = position || 'right';
-    icon = {
-      type: 'jsx',
-      icon: React__default.createElement(Loader, {
-        size: '14px'
-      }),
-      width: '14px'
-    };
-  } else if (clearable) {
-    position = position || 'right';
-    iconOnClick = typeof clearable === 'function' ? clearable : function () {
-      return setValue('');
-    };
-    icon = {
-      type: 'feather',
-      icon: 'x',
-      width: '14px'
+  var icon = function () {
+    var icon = _extends({}, invalid ? {
+      color: 'warningRed'
+    } : {});
+
+    if (clearable) {
+      var callback = typeof clearable === 'function' ? clearable : function () {
+        return setValue('');
+      };
+      return _extends({}, icon, {
+        type: 'feather',
+        icon: 'x',
+        width: '14px',
+        onClick: function onClick(e) {
+          e.preventDefault();
+          callback();
+        }
+      });
+    }
+
+    if (!props.icon) return props.icon;
+    return _extends({}, icon, props.icon.icon);
+  }();
+
+  var dirty = props.dirty;
+
+  var onDirty = function () {
+    if (dirty === undefined || typeof dirty === 'function') return dirty;
+    if (props.value === dirty) return undefined;
+    return function () {
+      return setValue(dirty);
     };
-  }
+  }();
 
-  var iconProps = position ? {
-    position: position,
-    width: iconWidth || '24px'
-  } : undefined;
   if (props.htmlDisabled) inputProps.disabled = true;
   if (props.htmlReadOnly) inputProps.readOnly = true;
   return React__default.createElement(Label, {
@@ -12573,7 +12564,8 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     "$loading": loading,
     "$invalid": invalid,
     "$paddingless": paddingless,
-    "$icon": iconProps,
+    "$iconPosition": ((_props$icon = props.icon) === null || _props$icon === void 0 ? void 0 : _props$icon.position) || 'right',
+    "$iconWidths": [].concat(icon ? [icon.width || '24px'] : [], onDirty ? ['10px'] : []),
     "$width": width,
     "$viewMode": viewMode
   }, label && React__default.createElement(LabelText, {
@@ -12587,11 +12579,25 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
     ref: ref
   })), props.children && React__default.createElement(ChildrenContainer, {
     children: props.children
-  }), icon && React__default.createElement(IconContainer, {
-    type: iconSubmit ? 'submit' : 'button',
-    onClick: props.disabled ? undefined : iconOnClick,
-    tabIndex: -1
-  }, React__default.createElement(Icon, Object.assign({}, icon)))));
+  }), React__default.createElement(IconContainer, null, loading ? React__default.createElement(Icon, {
+    type: 'jsx',
+    icon: React__default.createElement(Loader, {
+      size: '14px'
+    }),
+    width: '14px'
+  }) : React__default.createElement(React__default.Fragment, null, onDirty && React__default.createElement(Icon, Object.assign({}, _extends({
+    type: 'semantic',
+    icon: 'undo alternate',
+    width: '10px',
+    onClick: props.disabled ? undefined : function (e) {
+      e.preventDefault();
+      onDirty();
+    }
+  }, invalid ? {
+    color: 'warningRed'
+  } : {}))), icon && React__default.createElement(Icon, Object.assign({}, icon, 'onClick' in icon && props.disabled ? {
+    onClick: undefined
+  } : {}))))));
 });
 Input$1.displayName = 'Input';
 
@@ -14550,14 +14556,14 @@ var Date$1 = React__default.forwardRef(function (props, ref) {
   var icon = picker ? {
     icon: {
       type: 'feather',
-      icon: 'calendar'
+      icon: 'calendar',
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return !prev;
+        });
+      }
     },
-    position: 'right',
-    onClick: function onClick() {
-      return setOpen(function (prev) {
-        return !prev;
-      });
-    }
+    position: 'right'
   } : undefined;
   var inputProps = filterObject(props, ['picker', 'min', 'max']);
   return React__default.createElement(RelativeContainer$1, {
@@ -14629,9 +14635,9 @@ var Header$1 = function Header() {
     icon: {
       icon: {
         type: 'feather',
-        icon: 'search'
-      },
-      onClick: onSearch
+        icon: 'search',
+        onClick: onSearch
+      }
     },
     loading: loading
   }));
@@ -14696,12 +14702,14 @@ var getInputContent = function getInputContent(props, selectedOption) {
   });
 };
 
-var useSelect = function useSelect(props) {
-  var _useState = React.useState([]),
-      options = _useState[0],
-      setOptions = _useState[1];
+var useSelect = function useSelect(props, _ref2) {
+  var options = _ref2[0],
+      setOptions = _ref2[1];
+
+  var _ref3 = typeof props.value === 'string' ? [getSelected(props.value, options), props.value] : [props.value, props.value.value],
+      selectedOption = _ref3[0],
+      value = _ref3[1];
 
-  var selectedOption = typeof props.value === 'string' ? getSelected(props.value, options) : props.value;
   var parsedOptions = getOptions(props.setValue, options, selectedOption);
 
   var onReset = function onReset() {};
@@ -14726,7 +14734,17 @@ var useSelect = function useSelect(props) {
       }, children);
     }
   };
-  var onClear = props.onClear;
+  var onClear = props.onClear,
+      dirty = props.dirty;
+
+  parsed.dirty = function () {
+    if (dirty === undefined || typeof dirty === 'function') return dirty;
+    if (value === dirty.value) return undefined;
+    return function () {
+      return props.setValue(dirty.value, dirty.data);
+    };
+  }();
+
   if (onClear) parsed.onClear = function () {
     return onClear('');
   };
@@ -14850,9 +14868,9 @@ var Header$2 = function Header() {
     icon: {
       icon: {
         type: 'feather',
-        icon: 'search'
-      },
-      onClick: onSearch
+        icon: 'search',
+        onClick: onSearch
+      }
     },
     loading: loading
   }));
@@ -14947,16 +14965,14 @@ var parseValue = function parseValue(value) {
   return parsed;
 };
 
-var useSelectMultiple = function useSelectMultiple(props) {
-  var _useState = React.useState([]),
-      options = _useState[0],
-      setOptions = _useState[1];
-
+var useSelectMultiple = function useSelectMultiple(props, _ref) {
+  var options = _ref[0],
+      setOptions = _ref[1];
   var initial = parseValue(props.value);
 
-  var _useState2 = React.useState([].concat(initial)),
-      checked = _useState2[0],
-      setChecked = _useState2[1];
+  var _useState = React.useState([].concat(initial)),
+      checked = _useState[0],
+      setChecked = _useState[1];
 
   var parsedOptions = getOptions$1(options, initial);
   var inputContent = getInputContent$1(props.value);
@@ -14992,6 +15008,31 @@ var useSelectMultiple = function useSelectMultiple(props) {
       return props.setValue([], []);
     }
   };
+  var dirty = props.dirty;
+
+  returnData.dirty = function () {
+    if (dirty === undefined || typeof dirty === 'function') return dirty;
+    var values = [initial, dirty].map(function (e) {
+      return e.map(function (e) {
+        return e.value;
+      }).sort();
+    });
+
+    if (values[0].join(',') === values[1].join(',')) {
+      return undefined;
+    }
+
+    var _dirty$reduce = dirty.reduce(function (r, e) {
+      return [[].concat(r[0], [e.value]), [].concat(r[1], [e.data])];
+    }, [[], []]),
+        value = _dirty$reduce[0],
+        data = _dirty$reduce[1];
+
+    return function () {
+      return props.setValue(value, data);
+    };
+  }();
+
   return returnData;
 };
 
@@ -15007,41 +15048,45 @@ var EmptyContentContainer = styled__default.div(_templateObject3$f || (_template
 
 var Select = React__default.forwardRef(function (props, ref) {
   var position = props.position,
-      loader = props.loader;
+      loader = props.loader,
+      initialLoader = props.initialLoader;
 
-  var _ref = props.type === 'select-multiple' ? useSelectMultiple(props) : useSelect(props),
+  var _useState = React.useState([].concat(initialLoader ? initialLoader() : [])),
+      options = _useState[0],
+      setOptions = _useState[1];
+
+  var _ref = props.type === 'select-multiple' ? useSelectMultiple(props, [options, setOptions]) : useSelect(props, [options, setOptions]),
       parsedOptions = _ref.parsedOptions,
       inputContent = _ref.inputContent,
-      _ref$options = _ref.options,
-      setOptions = _ref$options[1],
       onReset = _ref.onReset,
       menuProps = _ref.menu,
       getContext = _ref.getContext,
-      onClear = _ref.onClear;
-
-  var _useState = React.useState(true),
-      _loading = _useState[0],
-      setLoading = _useState[1];
+      onClear = _ref.onClear,
+      dirty = _ref.dirty;
 
-  var _useState2 = React.useState(''),
-      search = _useState2[0],
-      _setSearch = _useState2[1];
+  var _useState2 = React.useState(true),
+      _loading = _useState2[0],
+      setLoading = _useState2[1];
 
   var _useState3 = React.useState(''),
-      searchInput = _useState3[0],
-      setSearchInput = _useState3[1];
+      search = _useState3[0],
+      _setSearch = _useState3[1];
 
-  var _useState4 = React.useState(1),
-      page = _useState4[0],
-      setPage = _useState4[1];
+  var _useState4 = React.useState(''),
+      searchInput = _useState4[0],
+      setSearchInput = _useState4[1];
 
-  var _useState5 = React.useState(false),
-      lastPage = _useState5[0],
-      setLastPage = _useState5[1];
+  var _useState5 = React.useState(1),
+      page = _useState5[0],
+      setPage = _useState5[1];
 
   var _useState6 = React.useState(false),
-      open = _useState6[0],
-      setOpen = _useState6[1];
+      lastPage = _useState6[0],
+      setLastPage = _useState6[1];
+
+  var _useState7 = React.useState(false),
+      open = _useState7[0],
+      setOpen = _useState7[1];
 
   var loading = props.loading || _loading;
 
@@ -15051,7 +15096,7 @@ var Select = React__default.forwardRef(function (props, ref) {
     setPage(1);
   };
 
-  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value', 'onClear', 'placeholder']);
+  var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'value', 'onClear', 'placeholder', 'initialLoader']);
 
   var _onScrollEnd = props.onScrollEnd || function () {};
 
@@ -15069,27 +15114,33 @@ var Select = React__default.forwardRef(function (props, ref) {
     try {
       setLoading(true);
       return Promise.resolve(loader(search, page)).then(function (optionsResult) {
-        if (Array.isArray(optionsResult)) {
-          setOptions(page === 1 ? optionsResult : function (prev) {
-            return prev.concat(optionsResult);
-          });
-          setLastPage(true);
-        } else {
-          setOptions(page === 1 ? optionsResult.options : function (prev) {
-            return prev.concat(optionsResult.options);
+        if (optionsResult === null) return;
+
+        var _ref2 = Array.isArray(optionsResult) ? [optionsResult, true] : [optionsResult.options, optionsResult.lastPage],
+            options = _ref2[0],
+            lastPage = _ref2[1];
+
+        var initial = initialLoader ? initialLoader() : [];
+        var filtered = initialLoader ? options.filter(function (x) {
+          return !initial.some(function (y) {
+            return x.value === y.value;
           });
-          setLastPage(optionsResult.lastPage);
-        }
+        }) : options;
 
+        var getWithOptions = function getWithOptions() {
+          return !search && initialLoader ? [].concat(initial, filtered) : options;
+        };
+
+        setOptions(page === 1 ? getWithOptions() : function (prev) {
+          return prev.concat(filtered);
+        });
+        setLastPage(lastPage);
         setLoading(false);
       });
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [loader, search, page]);
-  React.useEffect(function () {
-    setSearch('');
-  }, [loader]);
+  }, [loader, search, page, initialLoader]);
   React.useEffect(function () {
     var timeoutId = setTimeout(function () {
       return onSubmit();
@@ -15140,14 +15191,15 @@ var Select = React__default.forwardRef(function (props, ref) {
     htmlReadOnly: true,
     onClick: onClick,
     loading: loading,
+    dirty: dirty,
     icon: {
-      position: 'right',
       icon: {
         type: 'semantic',
         icon: open ? 'caret up' : 'caret down',
-        width: '14px'
+        width: '14px',
+        onClick: function onClick() {}
       },
-      onClick: onClick
+      position: 'right'
     },
     ref: ref
   }, isEmpty ? {
@@ -15205,17 +15257,17 @@ var Password = React__default.forwardRef(function (props, ref) {
       }
     }
   };
-  var icon = {
+
+  var icon = _extends({
     type: 'feather',
-    icon: icons[visibility].icon,
     width: '19px'
-  };
+  }, icons[visibility]);
+
   return React__default.createElement(Input$1, Object.assign({}, props, {
     type: visibility === 'visible' ? 'text' : 'PASSWORD',
     icon: {
       icon: icon,
-      position: 'right',
-      onClick: icons[visibility].onClick
+      position: 'right'
     },
     placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
     ref: ref
@@ -15462,8 +15514,16 @@ var Button$2 = function Button(props) {
   var _props$country = props.country,
       country = _props$country[0],
       _props$open = props.open,
-      open = _props$open[0];
-  return React__default.createElement(IconContainer$1, null, React__default.createElement(Flag, {
+      open = _props$open[0],
+      setOpen = _props$open[1],
+      disabled = props.disabled;
+  return React__default.createElement(IconContainer$1, Object.assign({}, disabled ? {} : {
+    onClick: function onClick() {
+      return setOpen(function (prev) {
+        return !prev;
+      });
+    }
+  }), React__default.createElement(Flag, {
     iso: country.iso
   }), React__default.createElement(Icon, {
     type: 'semantic',
@@ -15559,11 +15619,6 @@ var Component = React__default.forwardRef(function (props, ref) {
         type: 'jsx',
         width: '35px'
       },
-      onClick: function onClick() {
-        return setOpen(function (prev) {
-          return !prev;
-        });
-      },
       position: 'left'
     },
     ref: ref
@@ -15667,14 +15722,14 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
     icon: {
       type: 'feather',
       icon: 'calendar',
-      width: '24px'
+      width: '24px',
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return !prev;
+        });
+      }
     },
-    position: 'right',
-    onClick: function onClick() {
-      return setOpen(function (prev) {
-        return !prev;
-      });
-    }
+    position: 'right'
   } : undefined;
   var inputProps = filterObject(props, ['picker', 'min', 'max']);
   return React__default.createElement(RelativeContainer$4, {
@@ -17223,14 +17278,14 @@ var DateTime = React__default.forwardRef(function (props, ref) {
   var icon = picker ? {
     icon: {
       type: 'feather',
-      icon: 'calendar'
+      icon: 'calendar',
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return !prev;
+        });
+      }
     },
-    position: 'right',
-    onClick: function onClick() {
-      return setOpen(function (prev) {
-        return !prev;
-      });
-    }
+    position: 'right'
   } : undefined;
   var inputProps = filterObject(props, ['picker', 'min', 'max']);
   return React__default.createElement(RelativeContainer$6, {
@@ -17485,9 +17540,9 @@ var AppliedFiltersMenu = function AppliedFiltersMenu(props) {
     icon: {
       icon: {
         type: 'feather',
-        icon: 'search'
-      },
-      onClick: onSubmitSearch
+        icon: 'search',
+        onClick: onSubmitSearch
+      }
     },
     clearable: search !== '' && search === searched ? onClearSearch : undefined
   })), React__default.createElement(ScrollContainer, null, appliedFilters.filter(function (_ref) {
@@ -17671,9 +17726,9 @@ var Header$4 = function Header(props) {
     icon: {
       icon: {
         type: 'feather',
-        icon: 'search'
-      },
-      onClick: onSubmit
+        icon: 'search',
+        onClick: onSubmit
+      }
     }
   }));
 };
@@ -17832,7 +17887,11 @@ var Submenu = function Submenu(props) {
     _setSearch(value);
 
     setPage(1);
-    if (force && changed === false) onSearch();
+
+    if (force && changed === false) {
+      setLoading(true);
+      onSearch();
+    }
   };
 
   React.useEffect(function () {