@startlibs/form 1.0.0-alpha-9v → 1.0.0-alpha-9y

package/lib/index.js

@@ -44,13 +44,18 @@ var _filter = _interopDefault(require('lodash/fp/filter'));
 var _map = _interopDefault(require('lodash/fp/map'));
 var _stubFalse = _interopDefault(require('lodash/fp/stubFalse'));
 var _isObject = _interopDefault(require('lodash/fp/isObject'));
+require('@babel/runtime/helpers/awaitAsyncGenerator');
+require('@babel/runtime/helpers/wrapAsyncGenerator');
+var _ = _interopDefault(require('lodash/fp'));
+require('@babel/runtime/helpers/typeof');
+var createEmotion = _interopDefault(require('create-emotion'));
 var _isFinite = _interopDefault(require('lodash/fp/isFinite'));
+var _negate = _interopDefault(require('lodash/fp/negate'));
 var _zipObject = _interopDefault(require('lodash/fp/zipObject'));
 var _flatten = _interopDefault(require('lodash/fp/flatten'));
 var _fromPairs = _interopDefault(require('lodash/fp/fromPairs'));
 var _pick = _interopDefault(require('lodash/fp/pick'));
 var _toPairs = _interopDefault(require('lodash/fp/toPairs'));
-var _negate = _interopDefault(require('lodash/fp/negate'));
 var _get = _interopDefault(require('lodash/fp/get'));
 var _entries = _interopDefault(require('lodash/fp/entries'));
 
@@ -137,7 +142,9 @@ var useProvideErrors = function useProvideErrors() {
   };
 
   var setErrors = function setErrors(newErrors) {
-    return errors.openWith(parseMultipleErrors(newErrors));
+    console.log(parseMultipleErrors(newErrors));
+    errors.openWith(parseMultipleErrors(newErrors));
+    errors.get();
   };
 
   var setError = function setError(errorPath, errorValue) {
@@ -1104,7 +1111,9 @@ var Container = styled__default.div.withConfig({
 var Label = styled__default.label.withConfig({
   displayName: "Field__Label",
   componentId: "p9woft-2"
-})(["font-weight:500;display:inline-block;font-size:14px;margin-bottom:.5rem;", " ", ""], function (props) {
+})(["font-weight:500;display:inline-block;font-size:", "px;margin-bottom:.5rem;", " ", ""], function (props) {
+  return props.labelFontSize ? props.labelFontSize : '14';
+}, function (props) {
   return props.isOnImage && 'color: #fff;';
 }, utils.customTheme("FieldLabel"));
 var HelpText = styled__default.span.withConfig({
@@ -1130,14 +1139,16 @@ var Field = React__default.forwardRef(function (_ref, ref) {
       mandatory = _ref.mandatory,
       onImage = _ref.onImage,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["label", "helpText", "descText", "bellowDescText", "className", "labelClick", "focused", "mandatory", "onImage", "children"]);
+      labelFontSize = _ref.labelFontSize,
+      rest = _objectWithoutProperties(_ref, ["label", "helpText", "descText", "bellowDescText", "className", "labelClick", "focused", "mandatory", "onImage", "children", "labelFontSize"]);
 
   return React__default.createElement(Container, _extends({
     ref: ref
   }, rest, {
     className: className
   }), label && React__default.createElement(Label, _extends({}, rest, {
-    onClick: labelClick
+    onClick: labelClick,
+    labelFontSize: labelFontSize
   }), label, mandatory && React__default.createElement(Mandatory, {
     mandatory: mandatory
   }, "*"), helpText && React__default.createElement(HelpText, null, " ", helpText), descText && React__default.createElement(FieldDescription, null, descText)), children, bellowDescText && React__default.createElement(BellowFieldDescription, null, bellowDescText));
@@ -3050,6 +3061,206 @@ var FormMeta = function FormMeta(_ref3) {
   return utils.ifUndefined(utils.callIfFunction(children, value, setValue), value, null);
 };
 
+var scrollWidth = function () {
+  if (!window.document) return 0;
+  var html = document.documentElement;
+  var oldOverflow = html.style.overflowY;
+  html.style.overflowY = 'scroll';
+  var width = window.innerWidth - html.clientWidth;
+  html.style.overflowY = oldOverflow;
+  return width;
+}();
+
+var callIfFunction = function callIfFunction(prop) {
+  for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
+    args[_key6 - 1] = arguments[_key6];
+  }
+
+  return typeof prop === "function" ? prop.apply(void 0, args) : prop;
+};
+
+var moveElement = _.curry(function (from, to, list) {
+  var el = list[from];
+
+  var without = _.pullAt(from, list);
+
+  without.splice(to, 0, el);
+  return without;
+});
+var unsetOrRemoveAt = _.curry(function (path, value) {
+  var pathArr = toPath(path);
+
+  var _pathArr$slice = pathArr.slice(-1),
+      _pathArr$slice2 = _slicedToArray(_pathArr$slice, 1),
+      lastKey = _pathArr$slice2[0];
+
+  return update(pathArr.slice(0, -1), function (v) {
+    return Array.isArray(v) ? removeAt(lastKey, v) : unset(lastKey, v);
+  }, value);
+});
+
+var sanitizePath = function sanitizePath(path) {
+  return Array.isArray(path) ? path.map(sanitizePath) : typeof path === 'number' ? path.toString() : path === undefined ? [] : path;
+};
+
+var toPath = function toPath(path) {
+  return _.toPath(sanitizePath(path));
+};
+
+var isEmptyPath = function isEmptyPath(path) {
+  return path && !path.length;
+};
+
+var update = _.curry(function (path, updater, state) {
+  var sanitizedPath = sanitizePath(path);
+
+  if (isEmptyPath(sanitizedPath)) {
+    return updater(state);
+  } else {
+    return _.update(sanitizedPath, updater, state);
+  }
+});
+var get = _.curry(function (path, state) {
+  var sanitizedPath = sanitizePath(path);
+
+  if (isEmptyPath(sanitizedPath)) {
+    return state;
+  } else {
+    return _.get(sanitizedPath, state);
+  }
+});
+var set = _.curry(function (path, value, state) {
+  var sanitizedPath = sanitizePath(path);
+
+  if (isEmptyPath(sanitizedPath)) {
+    return value;
+  } else {
+    return _.set(sanitizedPath, value, state);
+  }
+});
+var unset = _.curry(function (path, state) {
+  var sanitizedPath = sanitizePath(path);
+
+  if (isEmptyPath(sanitizedPath)) {
+    return undefined;
+  } else {
+    return _.unset(sanitizedPath, state);
+  }
+});
+var removeNAt = _.curry(function (pos, n, value) {
+  return _toConsumableArray(value.slice(0, Number(pos))).concat(_toConsumableArray(value.slice(Number(pos) + n)));
+});
+var removeAt = removeNAt(_.__, 1);
+var when = _.curry(function (cond, fn, value) {
+  return callIfFunction(cond, value) ? fn(value) : value;
+});
+var assign = _.curry(function (a, b) {
+  return _.assign(b, a);
+});
+var concat = _.curry(function (a, b) {
+  return _.concat(b, a);
+});
+var each = _.each.convert({
+  cap: false
+});
+var find = _.find.convert({
+  cap: false
+});
+var filter = _.filter.convert({
+  cap: false
+});
+var map = _.map.convert({
+  cap: false
+});
+var insertAt = _.curry(function (pos, newElements, value) {
+  return _toConsumableArray(value.slice(0, pos).concat(newElements)).concat(_toConsumableArray(value.slice(pos)));
+});
+
+function _templateObject$3() {
+  var data = _taggedTemplateLiteral(["\n  ", ""]);
+
+  _templateObject$3 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var checkCustomScreenWidth = function checkCustomScreenWidth(sizeParis, customWidth) {
+  var currentWidth = callIfFunction(customWidth);
+  return !sizeParis.find(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        size = _ref5[0],
+        type = _ref5[1];
+
+    if (type === "min-width") {
+      return currentWidth < size;
+    }
+
+    if (type === "max-width") {
+      return currentWidth > size;
+    }
+  });
+};
+
+var media = function media() {
+  for (var _len3 = arguments.length, sizePairs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    sizePairs[_key3] = arguments[_key3];
+  }
+
+  return function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    return styled.css(["", ""], function (props) {
+      var _props$theme, _props$theme2;
+
+      return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.overrideMediaWidth) ? checkCustomScreenWidth(sizePairs, (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.overrideMediaWidth) ? styled.css.apply(void 0, args) : "" : styled.css(["@media ", "{", "}"], sizePairs.map(function (_ref6) {
+        var _ref7 = _slicedToArray(_ref6, 2),
+            size = _ref7[0],
+            type = _ref7[1];
+
+        return "(".concat(type, ": ").concat(size + scrollWidth, "px)");
+      }).join(' and '), styled.css.apply(void 0, args));
+    });
+  };
+};
+media.mobile = media([600, 'max-width']);
+
+media.between = function (min, max) {
+  return media([min, 'min-width'], [max, 'max-width']);
+};
+
+media.max = function (n) {
+  return media([n, 'max-width']);
+};
+
+media.min = function (n) {
+  return media([n, 'min-width']);
+};
+
+media.desktop = media([601, 'min-width']);
+
+var getFrameOffset = function getFrameOffset(i, total) {
+  return Math.round(i * 100 / (total - 1));
+};
+
+var emotion = createEmotion({
+  nonce: __webpack_nonce__
+});
+var oneWayAnimation = function oneWayAnimation() {
+  for (var _len5 = arguments.length, frames = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+    frames[_key5] = arguments[_key5];
+  }
+
+  return emotion.keyframes(_templateObject$3(), frames.map(function (frame, i) {
+    return !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }");
+  }));
+};
+var identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
+var identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
+
 var addRootPath = function addRootPath(errorRootPath, errors, path) {
   var rootPath = [].concat(errorRootPath || [], path);
   return Object.keys(errors).reduce(function (acc, error) {
@@ -3487,11 +3698,12 @@ var EditableBoxPresentation = styled__default(React.forwardRef(function (_ref13,
 
 var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
   var path = _ref15.path,
-      props = _objectWithoutProperties(_ref15, ["path"]);
+      isSingle = _ref15.isSingle,
+      props = _objectWithoutProperties(_ref15, ["path", "isSingle"]);
 
   var editableGroup = React.useContext(EditableContext);
   var form = React.useContext(FormContext);
-  var isNew = core.useRefState(utils._s.get(path, form.getOriginalValues()) !== form.getValue(path));
+  var isNew = core.useRefState(isSingle ? false : utils._s.get(path, form.getOriginalValues()) !== form.getValue(path));
   var internalBox = React__default.useRef();
 
   var loading = function loading() {
@@ -3778,10 +3990,10 @@ var Radiobox = function Radiobox(_ref) {
   }));
 };
 
-function _templateObject$3() {
+function _templateObject$4() {
   var data = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -3807,7 +4019,7 @@ var CheckboxContent = styled__default.div.withConfig({
   displayName: "SimpleCheckbox__CheckboxContent",
   componentId: "am8pps-4"
 })(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
-  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$3()), function (props) {
+  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4()), function (props) {
     return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
   }, function (props) {
     return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{", "{color:", ";}}"], utils.getColor('main'), function (props) {
@@ -3863,10 +4075,10 @@ var SimpleCheckbox = styled__default(function (_ref) {
   componentId: "am8pps-5"
 })(["cursor:pointer;position:relative;margin-bottom:1rem;display:block;", ""], utils.ifProp('disabled', styled.css(["pointer-events:none;"])));
 
-function _templateObject$4() {
+function _templateObject$5() {
   var data = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -3892,7 +4104,7 @@ var RadioboxContent = styled__default.div.withConfig({
   displayName: "SimpleRadiobox__RadioboxContent",
   componentId: "qv83xo-4"
 })(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
-  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4()), function (props) {
+  return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$5()), function (props) {
     return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
   }, function (props) {
     return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{:before{background-color:", ";}}"], utils.getColor('main'), function (props) {
@@ -3994,10 +4206,10 @@ function _templateObject2$2() {
   return data;
 }
 
-function _templateObject$5() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteral(["\n      width: 2.5rem;\n    "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -4010,7 +4222,7 @@ var LEVELS = [DAY, MONTH, YEAR];
 var DatePickerContainer = styled__default.div.withConfig({
   displayName: "DatePicker__DatePickerContainer",
   componentId: "sc-1wo8j4d-0"
-})(["width:20rem;position:absolute;z-index:10;background-color:white;border-radius:5px;border:1px solid ", ";user-select:none;box-shadow:0 0 4px 0 rgba(0,0,0,0.2);font-size:13px;text-align:center;animation:0.2s datePickerFadeInDown ease-out;display:none;@supports (flex-wrap:wrap){display:block;}input{padding-right:2.25rem;", "}@keyframes datePickerFadeInDown{from{opacity:0;transform:translateY(-10px);pointer-events:none;}to{opacity:1;transform:none;pointer-events:none;}}"], utils.getColor('gray210'), utils.media.mobile(_templateObject$5()));
+})(["width:20rem;position:absolute;z-index:10;background-color:white;border-radius:5px;border:1px solid ", ";user-select:none;box-shadow:0 0 4px 0 rgba(0,0,0,0.2);font-size:13px;text-align:center;animation:0.2s datePickerFadeInDown ease-out;display:none;@supports (flex-wrap:wrap){display:block;}input{padding-right:2.25rem;", "}@keyframes datePickerFadeInDown{from{opacity:0;transform:translateY(-10px);pointer-events:none;}to{opacity:1;transform:none;pointer-events:none;}}"], utils.getColor('gray210'), utils.media.mobile(_templateObject$6()));
 var CalendarHeader = styled__default.div.withConfig({
   displayName: "DatePicker__CalendarHeader",
   componentId: "sc-1wo8j4d-1"
@@ -4683,6 +4895,219 @@ function getClosestNextLeapYear(year) {
   return y;
 }
 
+function _templateObject$7() {
+  var data = _taggedTemplateLiteral(["\n      padding 1rem;\n    "]);
+
+  _templateObject$7 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var shouldPreventExpand = function shouldPreventExpand(fn) {
+  return function (e) {
+    return e.target.closest('body,[data-expand="false"],label,input,textarea,button').matches('body,[data-expand="true"]') && fn(e);
+  };
+};
+
+var ExpandableBoxStyled = styled__default.div.withConfig({
+  displayName: "ExpandableBox__ExpandableBoxStyled",
+  componentId: "sc-1nsk1wq-0"
+})(["padding:1rem;border-radius:6px;background:", ";font-size:14px;outline:none;transition:background 0.25s linear;position:relative;", " ", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('gray240'), function (props) {
+  return props.small && "\n    padding: 0.875rem 1rem;\n    min-height: 3rem;\n  ";
+}, function (props) {
+  return props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;:hover{background:", ";}:active{background:", ";}"], function (props) {
+    return polished.darken(0.05, utils.getColor("gray240")(props));
+  }, function (props) {
+    return polished.darken(0.08, utils.getColor("gray240")(props));
+  }) : styled.css(["padding 1.5rem;", " ", ""], utils.media.max(340)(_templateObject$7()), function (props) {
+    return props.fixMarginBottom && "\n      padding-bottom: 0.5rem !important;\n    ";
+  });
+}, components.SwitchDiv);
+var EditIcon = styled__default(components.Icon).attrs({
+  icon: 'edit'
+}).withConfig({
+  displayName: "ExpandableBox__EditIcon",
+  componentId: "sc-1nsk1wq-1"
+})(["position:absolute;top:50%;transform:translateY(-50%);right:-24px;color:rgba(0,0,0,0.25);font-size:20px;"]);
+var checkErrors = function checkErrors() {
+  for (var _len = arguments.length, checks = new Array(_len), _key = 0; _key < _len; _key++) {
+    checks[_key] = arguments[_key];
+  }
+
+  return function (v, setErrors) {
+    var results = checks.map(function (c) {
+      return c(v);
+    }).filter(Boolean);
+
+    if (!results.length) {
+      return true;
+    }
+
+    var messages = results.filter(_negate(_isBoolean));
+
+    if (messages.length) {
+      setErrors.apply(void 0, _toConsumableArray(messages));
+    }
+
+    return false;
+  };
+};
+var timing = utils.animationTiming('0.25s ease-out');
+var switchAnimation = utils.oneWayAnimation('opacity: 1;transform:translateY(0);', 'opacity: 0;', 'opacity: 0; transform:translateY(30px);');
+var ExpandableBox = function ExpandableBox(_ref) {
+  var children = _ref.children,
+      info = _ref.info,
+      isOpen = _ref.isOpen,
+      openWhen = _ref.openWhen,
+      path = _ref.path,
+      _ref$retargetFilter = _ref.retargetFilter,
+      retargetFilter = _ref$retargetFilter === void 0 ? function (el) {
+    var _el$tagName;
+
+    return (el === null || el === void 0 ? void 0 : (_el$tagName = el.tagName) === null || _el$tagName === void 0 ? void 0 : _el$tagName.toLowerCase()) === "button";
+  } : _ref$retargetFilter,
+      _ref$isValid = _ref.isValid,
+      isValid = _ref$isValid === void 0 ? function () {
+    return true;
+  } : _ref$isValid,
+      fixMarginBottom = _ref.fixMarginBottom,
+      _ref$animation = _ref.animation,
+      animation = _ref$animation === void 0 ? switchAnimation : _ref$animation,
+      _ref$animationTiming = _ref.animationTiming,
+      animationTiming = _ref$animationTiming === void 0 ? timing : _ref$animationTiming;
+  var flipAnimation = core.useLazyConstant(components.willUseFlipSwitch);
+
+  var _useFormValue = form.useFormValue(path),
+      _useFormValue2 = _slicedToArray(_useFormValue, 3),
+      value = _useFormValue2[0],
+      setValue = _useFormValue2[1],
+      getValue = _useFormValue2[2];
+
+  var _useTransientErrorHel = useTransientErrorHelper(),
+      _useTransientErrorHel2 = _slicedToArray(_useTransientErrorHel, 2),
+      _setErrors = _useTransientErrorHel2[0],
+      clearErrors = _useTransientErrorHel2[1];
+
+  var setErrors = function setErrors() {
+    for (var _len2 = arguments.length, errors = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      errors[_key2] = arguments[_key2];
+    }
+
+    _setErrors(errors.length ? errors.map(function (k) {
+      return _isString(k) ? [k, ''] : k;
+    }) : [[path, '']]);
+
+    return true;
+  };
+
+  var expand = core.useToggle(isOpen, function (newV, prevV) {
+    if (newV === 0 || prevV === 0) {
+      return;
+    }
+
+    if (newV === false) {
+      var result = isValid(getValue(), setErrors);
+
+      if (result === true) {
+        clearErrors();
+      }
+
+      return result;
+    }
+  });
+  var openWhenResult = utils.callIfFunction(openWhen);
+  React.useEffect(function () {
+    if (openWhenResult) {
+      expand.open();
+    }
+  }, [openWhenResult]);
+  React.useEffect(function () {
+    return function () {
+      if (expand.get() === 0) {
+        expand.close();
+      }
+    };
+  }, [expand.isOpen]);
+  var utils$1 = core.useLazyConstant(function () {
+    return {
+      close: utils.constrainEvent(expand.close),
+      setValue: setValue
+    };
+  });
+
+  var onBlur = function onBlur(e) {
+    if (e.currentTarget !== e.relatedTarget && (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget))) {
+      if (utils.callIfFunction(retargetFilter, e.relatedTarget)) {
+        e.target.focus();
+      } else {
+        expand.close();
+      }
+    }
+  };
+
+  return React__default.createElement(ExpandableBoxStyled, {
+    tabIndex: -1,
+    onBlur: onBlur,
+    collapsed: !expand.isOpen,
+    fixMarginBottom: fixMarginBottom,
+    onClick: shouldPreventExpand(expand.open)
+  }, React__default.createElement(FlipDiv$1, {
+    key: expand.isOpen,
+    useAnimation: flipAnimation,
+    animation: animation,
+    animationTiming: animationTiming
+  }, expand.isOpen ? utils.callIfFunction(children, value, utils$1) : React__default.createElement(React__default.Fragment, null, utils.callIfFunction(info, value, utils$1), React__default.createElement(EditIcon, null))));
+};
+
+var overflowEffect = function overflowEffect(element) {
+  var _element$offsetParent;
+
+  if (!(element === null || element === void 0 ? void 0 : (_element$offsetParent = element.offsetParent) === null || _element$offsetParent === void 0 ? void 0 : _element$offsetParent.parentElement)) {
+    return;
+  }
+
+  var parentDom = element.offsetParent.parentElement;
+  var previousOverflow = parentDom.style.overflow;
+  parentDom.style.overflow = 'hidden';
+  return function () {
+    return parentDom.style.overflow = previousOverflow;
+  };
+};
+
+var PseudoExpandableBox = function PseudoExpandableBox(_ref2) {
+  var children = _ref2.children,
+      small = _ref2.small,
+      onClick = _ref2.onClick;
+  return React__default.createElement(ExpandableBoxStyled, {
+    collapsed: true,
+    small: small,
+    onClick: onClick
+  }, React__default.createElement(FlipDivStyle, null, children, React__default.createElement(EditIcon, null)));
+};
+var FlipDivStyle = styled__default.div.withConfig({
+  displayName: "ExpandableBox__FlipDivStyle",
+  componentId: "sc-1nsk1wq-2"
+})(["position:relative;"]);
+
+var FlipDiv$1 = function FlipDiv(_ref3) {
+  var useAnimation = _ref3.useAnimation,
+      animation = _ref3.animation,
+      animationTiming = _ref3.animationTiming,
+      props = _objectWithoutProperties(_ref3, ["useAnimation", "animation", "animationTiming"]);
+
+  var ref = React.useRef();
+  useAnimation(ref, null, null, {
+    switchAnimation: animation,
+    timing: animationTiming,
+    effect: overflowEffect
+  });
+  return React__default.createElement(FlipDivStyle, _extends({}, props, {
+    ref: ref
+  }));
+};
+
 var FORMAT_TOOLS = {
   'bold': ['b', 'strong'],
   'italic': 'i',
@@ -4977,7 +5402,7 @@ var RichText = function RichText(_ref5) {
       placeholder = _ref5.placeholder,
       className = _ref5.className,
       _ref5$formatTools = _ref5.formatTools,
-      formatTools = _ref5$formatTools === void 0 ? ['bold', 'italic', 'underline', 'strikethrough'] : _ref5$formatTools,
+      formatTools = _ref5$formatTools === void 0 ? ['link', 'bold', 'italic', 'underline', 'strikethrough'] : _ref5$formatTools,
       _ref5$reformatText = _ref5.reformatText,
       reformatText = _ref5$reformatText === void 0 ? _identity : _ref5$reformatText,
       mandatory = _ref5.mandatory,
@@ -5414,19 +5839,20 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
       values = _ref7.values;
   var linkPopup = React.useRef();
   var formRef = React.useRef();
+  var LABELS = React.useContext(core.StartlibsContext).labels.RichText;
 
   var preValidation = function preValidation(formValues) {
     var errors;
 
     if (!formValues.linkText) {
       errors = {
-        'linkText': ['Campos com asterisco (*) são obrigatórios.']
+        'linkText': [LABELS.linkTextError]
       };
     }
 
     if (!formValues.linkUrl || formValues.linkUrl === ' ' || !utils.linkRegex.test(formValues.linkUrl.trim())) {
       errors = _objectSpread({}, errors, {
-        'linkUrl': ['Adicione um endereço válido.']
+        'linkUrl': [LABELS.linkUrlError]
       });
     }
 
@@ -5473,227 +5899,26 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
       autoFocus: !values.linkText,
       mandatory: true,
       path: "linkText",
-      label: "Texto de exibi\xE7\xE3o"
+      label: LABELS.popupLinkText
     }), React__default.createElement(TextInput, {
       autoFocus: values.linkText,
       mandatory: true,
       path: "linkUrl",
-      label: "Endere\xE7o completo"
+      label: LABELS.popupLinkUrl
     }), React__default.createElement("div", {
       className: "popup-footer"
     }, React__default.createElement(components.Button, {
       className: "remove-link",
       icon: "remove",
       onClick: removeLink
-    }, "Remover Link"), React__default.createElement(components.Button, {
+    }, LABELS.popupRemove), React__default.createElement(components.Button, {
       onClick: cancel,
       tabIndex: 0
-    }, "Cancelar"), React__default.createElement(components.Button, {
+    }, LABELS.popupCancel), React__default.createElement(components.Button, {
       highlight: true,
       onClick: form.willSubmitForm
-    }, "Aplicar")), React__default.createElement(Errors, null));
-  });
-};
-
-function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n      padding 1rem;\n    "]);
-
-  _templateObject$6 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var shouldPreventExpand = function shouldPreventExpand(fn) {
-  return function (e) {
-    return e.target.closest('body,[data-expand="false"],label,input,textarea,button').matches('body,[data-expand="true"]') && fn(e);
-  };
-};
-
-var ExpandableBoxStyled = styled__default.div.withConfig({
-  displayName: "ExpandableBox__ExpandableBoxStyled",
-  componentId: "sc-1nsk1wq-0"
-})(["padding:1rem;border-radius:8px;background:", ";font-size:14px;outline:none;transition:background 0.25s linear;", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('gray240'), function (props) {
-  return props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;:hover{background:", ";}:active{background:", ";}"], function (props) {
-    return polished.darken(0.05, utils.getColor("gray240")(props));
-  }, function (props) {
-    return polished.darken(0.08, utils.getColor("gray240")(props));
-  }) : styled.css(["padding 1.5rem;", " ", ""], utils.media.max(340)(_templateObject$6()), function (props) {
-    return props.fixMarginBottom && "\n      padding-bottom: 0.5rem !important;\n    ";
-  });
-}, components.SwitchDiv);
-var EditIcon = styled__default(components.Icon).attrs({
-  icon: 'edit'
-}).withConfig({
-  displayName: "ExpandableBox__EditIcon",
-  componentId: "sc-1nsk1wq-1"
-})(["position:absolute;top:50%;transform:translateY(-50%);right:-24px;color:rgba(0,0,0,0.25);font-size:20px;"]);
-var checkErrors = function checkErrors() {
-  for (var _len = arguments.length, checks = new Array(_len), _key = 0; _key < _len; _key++) {
-    checks[_key] = arguments[_key];
-  }
-
-  return function (v, setErrors) {
-    var results = checks.map(function (c) {
-      return c(v);
-    }).filter(Boolean);
-
-    if (!results.length) {
-      return true;
-    }
-
-    var messages = results.filter(_negate(_isBoolean));
-
-    if (messages.length) {
-      setErrors.apply(void 0, _toConsumableArray(messages));
-    }
-
-    return false;
-  };
-};
-var timing = utils.animationTiming('0.25s ease-out');
-var switchAnimation = utils.oneWayAnimation('opacity: 1;transform:translateY(0);', 'opacity: 0;', 'opacity: 0; transform:translateY(30px);');
-var ExpandableBox = function ExpandableBox(_ref) {
-  var children = _ref.children,
-      info = _ref.info,
-      isOpen = _ref.isOpen,
-      openWhen = _ref.openWhen,
-      path = _ref.path,
-      _ref$retargetFilter = _ref.retargetFilter,
-      retargetFilter = _ref$retargetFilter === void 0 ? function (el) {
-    var _el$tagName;
-
-    return (el === null || el === void 0 ? void 0 : (_el$tagName = el.tagName) === null || _el$tagName === void 0 ? void 0 : _el$tagName.toLowerCase()) === "button";
-  } : _ref$retargetFilter,
-      _ref$isValid = _ref.isValid,
-      isValid = _ref$isValid === void 0 ? function () {
-    return true;
-  } : _ref$isValid,
-      fixMarginBottom = _ref.fixMarginBottom,
-      _ref$animation = _ref.animation,
-      animation = _ref$animation === void 0 ? switchAnimation : _ref$animation,
-      _ref$animationTiming = _ref.animationTiming,
-      animationTiming = _ref$animationTiming === void 0 ? timing : _ref$animationTiming;
-  var flipAnimation = core.useLazyConstant(components.willUseFlipSwitch);
-
-  var _useFormValue = form.useFormValue(path),
-      _useFormValue2 = _slicedToArray(_useFormValue, 3),
-      value = _useFormValue2[0],
-      setValue = _useFormValue2[1],
-      getValue = _useFormValue2[2];
-
-  var _useTransientErrorHel = useTransientErrorHelper(),
-      _useTransientErrorHel2 = _slicedToArray(_useTransientErrorHel, 2),
-      _setErrors = _useTransientErrorHel2[0],
-      clearErrors = _useTransientErrorHel2[1];
-
-  var setErrors = function setErrors() {
-    for (var _len2 = arguments.length, errors = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      errors[_key2] = arguments[_key2];
-    }
-
-    _setErrors(errors.length ? errors.map(function (k) {
-      return _isString(k) ? [k, ''] : k;
-    }) : [[path, '']]);
-
-    return true;
-  };
-
-  var expand = core.useToggle(isOpen, function (newV, prevV) {
-    if (newV === 0 || prevV === 0) {
-      return;
-    }
-
-    if (newV === false) {
-      var result = isValid(getValue(), setErrors);
-
-      if (result === true) {
-        clearErrors();
-      }
-
-      return result;
-    }
-  });
-  var openWhenResult = utils.callIfFunction(openWhen);
-  React.useEffect(function () {
-    if (openWhenResult) {
-      expand.open();
-    }
-  }, [openWhenResult]);
-  React.useEffect(function () {
-    return function () {
-      if (expand.get() === 0) {
-        expand.close();
-      }
-    };
-  }, [expand.isOpen]);
-  var utils$1 = core.useLazyConstant(function () {
-    return {
-      close: utils.constrainEvent(expand.close),
-      setValue: setValue
-    };
-  });
-
-  var onBlur = function onBlur(e) {
-    if (e.currentTarget !== e.relatedTarget && (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget))) {
-      if (utils.callIfFunction(retargetFilter, e.relatedTarget)) {
-        e.target.focus();
-      } else {
-        expand.close();
-      }
-    }
-  };
-
-  return React__default.createElement(ExpandableBoxStyled, {
-    tabIndex: -1,
-    onBlur: onBlur,
-    collapsed: !expand.isOpen,
-    fixMarginBottom: fixMarginBottom,
-    onClick: shouldPreventExpand(expand.open)
-  }, React__default.createElement(FlipDiv$1, {
-    key: expand.isOpen,
-    useAnimation: flipAnimation,
-    animation: animation,
-    animationTiming: animationTiming
-  }, expand.isOpen ? utils.callIfFunction(children, value, utils$1) : React__default.createElement(React__default.Fragment, null, utils.callIfFunction(info, value, utils$1), React__default.createElement(EditIcon, null))));
-};
-
-var overflowEffect = function overflowEffect(element) {
-  var _element$offsetParent;
-
-  if (!(element === null || element === void 0 ? void 0 : (_element$offsetParent = element.offsetParent) === null || _element$offsetParent === void 0 ? void 0 : _element$offsetParent.parentElement)) {
-    return;
-  }
-
-  var parentDom = element.offsetParent.parentElement;
-  var previousOverflow = parentDom.style.overflow;
-  parentDom.style.overflow = 'hidden';
-  return function () {
-    return parentDom.style.overflow = previousOverflow;
-  };
-};
-
-var FlipDivStyle = styled__default.div.withConfig({
-  displayName: "ExpandableBox__FlipDivStyle",
-  componentId: "sc-1nsk1wq-2"
-})(["position:relative;"]);
-
-var FlipDiv$1 = function FlipDiv(_ref2) {
-  var useAnimation = _ref2.useAnimation,
-      animation = _ref2.animation,
-      animationTiming = _ref2.animationTiming,
-      props = _objectWithoutProperties(_ref2, ["useAnimation", "animation", "animationTiming"]);
-
-  var ref = React.useRef();
-  useAnimation(ref, null, null, {
-    switchAnimation: animation,
-    timing: animationTiming,
-    effect: overflowEffect
+    }, LABELS.popupConfirm)), React__default.createElement(Errors, null));
   });
-  return React__default.createElement(FlipDivStyle, _extends({}, props, {
-    ref: ref
-  }));
 };
 
 var IconRadioBoxText = styled__default.div.withConfig({
@@ -5761,11 +5986,11 @@ var Toggle = styled__default.div.withConfig({
 var ToggleLabel = styled__default.div.withConfig({
   displayName: "ToggleCheckbox__ToggleLabel",
   componentId: "sc-11ob8ah-2"
-})(["flex-basis:0;flex-grow:1;display:inline-block;font-size:13px;"]);
+})(["flex-basis:0;flex-grow:1;display:inline-block;font-size:14px;"]);
 var DescText$2 = styled__default.div.withConfig({
   displayName: "ToggleCheckbox__DescText",
   componentId: "sc-11ob8ah-3"
-})(["font-weight:400;color:", ";font-size:12px;margin-top:0.25rem;"], utils.getColor('gray120'));
+})(["font-weight:400;color:rgba(0,0,0,0.4);font-size:12px;margin-top:0.25rem;"]);
 var ToggleCheckbox = styled__default(function (_ref) {
   var path = _ref.path,
       disabled = _ref.disabled,
@@ -5799,10 +6024,10 @@ var ToggleCheckbox = styled__default(function (_ref) {
   return props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ";
 });
 
-function _templateObject$7() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteral(["\n    min-width: 0;\n    ", "\n  "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
   };
 
@@ -5821,7 +6046,7 @@ var TabButton = styled__default(components.Button).withConfig({
   return props.isFirst !== undefined && !props.isFirst && "\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    :focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  ";
 }, function (props) {
   return props.isLast !== undefined && !props.isLast && "\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    :focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  ";
-}, utils.media.mobile(_templateObject$7(), function (props) {
+}, utils.media.mobile(_templateObject$8(), function (props) {
   return props.icon ? "\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    " : "\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    ";
 }), utils.customTheme('TabButton'));
 var InnerButton = styled__default.a.withConfig({
@@ -5932,16 +6157,16 @@ var buildValidation = function buildValidation(validations) {
   };
 };
 var responseFailure = function responseFailure(fn) {
-  return function (_, response, _ref5) {
+  return function (v, response, _ref5) {
     var setErrors = _ref5.setErrors;
     var errorSetter = setErrors;
-    var r = [].concat(response, _);
+    var r = [].concat(response, v);
     console.log(r);
     var error = fn.apply(void 0, _toConsumableArray(r));
 
     if (error === true) ; else if (error) {
       errorSetter(error);
-    } else {
+    } else if (!_get('response[0].errors')) {
       errorSetter({
         "": [messages.SERVER_ERROR]
       });
@@ -5997,6 +6222,7 @@ exports.IfFormValue = IfFormValue;
 exports.InputboxGroup = InputboxGroup;
 exports.Option = Option;
 exports.PathContext = PathContext;
+exports.PseudoExpandableBox = PseudoExpandableBox;
 exports.Radiobox = Radiobox;
 exports.RadioboxGroup = RadioboxGroup;
 exports.RichText = RichText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/form",
-  "version": "1.0.0-alpha-9v",
+  "version": "1.0.0-alpha-9y",
   "description": "Startlibs Form",
   "main": "src/index.js",
   "sideEffects": false,

package/src/index.js

@@ -14,8 +14,8 @@ export * from './FormValue'
 export * from './Radiobox'
 export * from './InputboxGroup'
 export * from './DatePicker'
-export * from './RichText'
 export * from './ExpandableBox'
+export * from './RichText'
 export * from './alt/radiobox/IconRadioBox'
 export * from './alt/checkbox/SimpleCheckbox'
 export * from './alt/checkbox/ToggleCheckbox'