@startlibs/form 1.0.0-alpha-10f → 1.0.0-alpha-9w.1

package/lib/index.js

@@ -45,13 +45,12 @@ var _map = _interopDefault(require('lodash/fp/map'));
 var _stubFalse = _interopDefault(require('lodash/fp/stubFalse'));
 var _isObject = _interopDefault(require('lodash/fp/isObject'));
 var _isFinite = _interopDefault(require('lodash/fp/isFinite'));
-var _negate = _interopDefault(require('lodash/fp/negate'));
 var _zipObject = _interopDefault(require('lodash/fp/zipObject'));
-var _last = _interopDefault(require('lodash/fp/last'));
 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'));
 
@@ -138,9 +137,7 @@ var useProvideErrors = function useProvideErrors() {
   };
 
   var setErrors = function setErrors(newErrors) {
-    console.log(parseMultipleErrors(newErrors));
-    errors.openWith(parseMultipleErrors(newErrors));
-    errors.get();
+    return errors.openWith(parseMultipleErrors(newErrors));
   };
 
   var setError = function setError(errorPath, errorValue) {
@@ -1107,9 +1104,7 @@ 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:", "px;margin-bottom:.5rem;", " ", ""], function (props) {
-  return props.labelFontSize ? props.labelFontSize : '14';
-}, function (props) {
+})(["font-weight:500;display:inline-block;font-size:14px;margin-bottom:.5rem;", " ", ""], function (props) {
   return props.isOnImage && 'color: #fff;';
 }, utils.customTheme("FieldLabel"));
 var HelpText = styled__default.span.withConfig({
@@ -1135,16 +1130,14 @@ var Field = React__default.forwardRef(function (_ref, ref) {
       mandatory = _ref.mandatory,
       onImage = _ref.onImage,
       children = _ref.children,
-      labelFontSize = _ref.labelFontSize,
-      rest = _objectWithoutProperties(_ref, ["label", "helpText", "descText", "bellowDescText", "className", "labelClick", "focused", "mandatory", "onImage", "children", "labelFontSize"]);
+      rest = _objectWithoutProperties(_ref, ["label", "helpText", "descText", "bellowDescText", "className", "labelClick", "focused", "mandatory", "onImage", "children"]);
 
   return React__default.createElement(Container, _extends({
     ref: ref
   }, rest, {
     className: className
   }), label && React__default.createElement(Label, _extends({}, rest, {
-    onClick: labelClick,
-    labelFontSize: labelFontSize
+    onClick: labelClick
   }), 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));
@@ -3167,7 +3160,7 @@ var ConfirmEditableBoxes = React.forwardRef(function (_ref, ref) {
 
   var modifiedEditablesPath = function modifiedEditablesPath(boxes) {
     return modifiedEditableBoxes(boxes).map(function (_) {
-      return utils.callIfFunction(_.path);
+      return _.path;
     });
   };
 
@@ -3195,7 +3188,7 @@ var ConfirmEditableBoxes = React.forwardRef(function (_ref, ref) {
     var validated = modifiedEditableBoxes(sharedBoxes()).reduce(function (_ref5, box) {
       var success = _ref5.success,
           errors = _ref5.errors;
-      var index = utils.callIfFunction(box.path);
+      var index = box.path;
 
       var _box$modifiedValue = box.modifiedValue(),
           _box$modifiedValue2 = _slicedToArray(_box$modifiedValue, 2),
@@ -3494,39 +3487,18 @@ var EditableBoxPresentation = styled__default(React.forwardRef(function (_ref13,
 
 var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
   var path = _ref15.path,
-      isSingle = _ref15.isSingle,
-      _ref15$checkIsNew = _ref15.checkIsNew,
-      checkIsNew = _ref15$checkIsNew === void 0 ? function (a, b) {
-    return a !== b;
-  } : _ref15$checkIsNew,
-      props = _objectWithoutProperties(_ref15, ["path", "isSingle", "checkIsNew"]);
+      props = _objectWithoutProperties(_ref15, ["path"]);
 
   var editableGroup = React.useContext(EditableContext);
   var form = React.useContext(FormContext);
-  var isNew = core.useRefState(function () {
-    return isSingle ? false : checkIsNew(utils._s.get(path, form.getOriginalValues()), form.getValue(path));
-  });
+  var isNew = core.useRefState(utils._s.get(path, form.getOriginalValues()) !== form.getValue(path));
   var internalBox = React__default.useRef();
-  var pathRef = core.useRefMemo(path);
 
   var loading = function loading() {
     return internalBox.current.loading;
   };
 
-  var modifiedValue = function modifiedValue() {
-    var oldItem = internalBox.current.getValue(undefined, form.getOriginalValues());
-    var newItem = internalBox.current.getValue();
-    return newItem !== oldItem ? [newItem, true] : [oldItem, false];
-  };
-
-  var selfRef = React.useRef({
-    loading: loading,
-    path: function path() {
-      return pathRef.current;
-    },
-    form: form,
-    modifiedValue: modifiedValue
-  });
+  var selfRef = React.useRef();
 
   var resetField = function resetField() {
     return form.resetField([].concat(path));
@@ -3546,6 +3518,12 @@ var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
     editableGroup.sharedBoxes.register(selfRef.current);
   };
 
+  var modifiedValue = function modifiedValue() {
+    var oldItem = internalBox.current.getValue(undefined, form.getOriginalValues());
+    var newItem = internalBox.current.getValue();
+    return newItem !== oldItem ? [newItem, true] : [oldItem, false];
+  };
+
   var validate = function validate(props, path) {
     var errors = editableGroup.itemValidation(props, path);
 
@@ -3636,6 +3614,12 @@ var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
     }
   };
 
+  selfRef.current = {
+    loading: loading,
+    path: path,
+    form: form,
+    modifiedValue: modifiedValue
+  };
   return React__default.createElement(EditableBoxPresentation, _extends({
     ref: internalBox,
     resetField: resetField,
@@ -3659,6 +3643,7 @@ var EditableBox = function EditableBox(_ref17) {
 
   var editableGroup = React.useContext(EditableContext);
   var form = React.useContext(FormContext);
+  var selfRef = React.useRef();
   var internalBox = React__default.useRef();
 
   var resetField = function resetField() {
@@ -3711,17 +3696,14 @@ var EditableBox = function EditableBox(_ref17) {
     return internalBox.current.loading;
   };
 
-  var pathRef = core.useRefMemo(path);
-  var selfRef = React.useRef({
+  selfRef.current = {
     loading: loading,
-    path: function path() {
-      return pathRef.current;
-    },
+    path: path,
     form: form,
     modifiedValue: modifiedValue,
     handleSubmit: handleSubmit,
     close: close
-  });
+  };
   return React__default.createElement(EditableBoxPresentation, _extends({
     ref: internalBox,
     resetField: resetField,
@@ -4287,9 +4269,10 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
 
   var stopFocusPropagation = function stopFocusPropagation(e) {
     return e.stopPropagation();
-  };
+  }; // const calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : now())
+
 
-  var calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : now());
+  var calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : nowTimeZoneAdjusted(timezoneOffset));
   calendarValue.setUTCHours(0, 0, 0);
   return React__default.createElement(Field, {
     helpText: helpText,
@@ -4485,6 +4468,15 @@ function now() {
   return dt;
 }
 
+function nowTimeZoneAdjusted(timezoneOffset) {
+  var timezoneOffsetMilliseconds = timezoneOffset * 3600000; // 3600000 milliseconds in an hour
+
+  var dt = new Date();
+  dt.setTime(dt.getTime() + timezoneOffsetMilliseconds);
+  dt.setUTCHours(0, 0, 0, 0);
+  return dt;
+}
+
 function inRange(context, date) {
   return context.min <= date && context.max >= date;
 }
@@ -4701,232 +4693,6 @@ function getClosestNextLeapYear(year) {
   return y;
 }
 
-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: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$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 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
-  }));
-};
-
-function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n    padding-right: 2.25rem;\n    background: rgba(0,0,0,0.075);\n  "]);
-
-  _templateObject$7 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var InputIcon$1 = styled__default(components.Icon).withConfig({
-  displayName: "RichText__InputIcon",
-  componentId: "x8c1ig-0"
-})(["position:absolute;outline:none;bottom:0;font-size:21px;line-height:3rem;right:0;width:2rem;pointer-events:none;color:", ";"], utils.getColor('gray150'));
 var FORMAT_TOOLS = {
   'bold': ['b', 'strong'],
   'italic': 'i',
@@ -5001,19 +4767,17 @@ var FIX_STYLE = {
 };
 var RichTextContainer = styled__default.div.withConfig({
   displayName: "RichText__RichTextContainer",
-  componentId: "x8c1ig-1"
-})(["position:relative;width:100%;border:1px solid ", ";border-radius:6px;background:white;", ";", ";", " ", " ul{list-style-type:disc;}ul,ol{padding-inline-start:25px;margin-block-start:0.5em;margin-block-end:0.5em;}"], utils.getColor('gray210'), function (props) {
+  componentId: "x8c1ig-0"
+})(["position:relative;width:100%;border:1px solid ", ";border-radius:6px;background:white;", ";", ";", ""], utils.getColor('gray210'), function (props) {
   return props.hasErrors && "border-color: ".concat(utils.getColor(props)('alert'));
 }, function (props) {
   return props.showToolbar && "\n    ".concat(ToolsContainer, " {\n      transition: 0.5s;\n      max-height: 7.5rem;\n      transition: 0.6s;\n      pointer-events: auto;\n    }\n  ");
 }, function (props) {
   return props.focus && "\n    border-color: ".concat(utils.getColor('gray180'), ";\n    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);\n  ");
-}, function (props) {
-  return props.locked && css(_templateObject$7());
 });
 var RichTextInput = styled__default.div.withConfig({
   displayName: "RichText__RichTextInput",
-  componentId: "x8c1ig-2"
+  componentId: "x8c1ig-1"
 })(["width:100%;font-size:14px;outline:0;outline:none;color:", ";background:white;min-height:", "px;outline:0;padding:0.7rem;overflow:auto;border-radius:5px;b,strong{font-weight:600;}&[contenteditable=true]:empty:before{content:attr(placeholder);color:rgba(0,0,0,0.3);}", ""], utils.getColor('gray60'), function (props) {
   return props.minHeight || 78;
 }, function (props) {
@@ -5021,15 +4785,15 @@ var RichTextInput = styled__default.div.withConfig({
 });
 var ToolsContainer = styled__default.div.withConfig({
   displayName: "RichText__ToolsContainer",
-  componentId: "x8c1ig-3"
+  componentId: "x8c1ig-2"
 })(["background:", ";padding:0 0.125rem;border-top-left-radius:5px;border-top-right-radius:5px;transition:0.225s;max-height:0;pointer-events:none;overflow:hidden;"], utils.getColor('gray240'));
 var ToolButton = styled__default(components.Button).withConfig({
   displayName: "RichText__ToolButton",
-  componentId: "x8c1ig-4"
+  componentId: "x8c1ig-3"
 })(["min-height:2rem;min-width:2rem;background:transparent;box-shadow:none;margin:0.25rem 0.125rem;& ~ &{margin-left:0.125rem;}.icon{font-size:23px;color:", ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}&:hover,&.activated:hover{background:rgba(0,0,0,0.13);}&.activated{background:rgba(0,0,0,0.1);}&:focus:after{content:none;}"], utils.getColor('gray90'));
 var ToolSeparator = styled__default.span.withConfig({
   displayName: "RichText__ToolSeparator",
-  componentId: "x8c1ig-5"
+  componentId: "x8c1ig-4"
 })(["border-left:1px solid ", ";margin-left:0.75rem;margin-right:0.5rem;line-height:2rem;vertical-align:-6px;"], utils.getColor('gray180'));
 var JS_CLASS = "EDITOR--JS";
 
@@ -5128,10 +4892,6 @@ var cleanEditor = function cleanEditor(editor, acceptedTags) {
           clean(el.childNodes);
           el.removeAttribute('class');
 
-          if (tagName === 'a') {
-            el.setAttribute('target', '_blank');
-          }
-
           if (el.getAttribute('style')) {
             var usedStyles = _toPairs(_pick(acceptedStyles, el.style)).filter(function (_ref) {
               var _ref2 = _slicedToArray(_ref, 2),
@@ -5227,7 +4987,7 @@ var RichText = function RichText(_ref5) {
       placeholder = _ref5.placeholder,
       className = _ref5.className,
       _ref5$formatTools = _ref5.formatTools,
-      formatTools = _ref5$formatTools === void 0 ? ['link', 'bold', 'italic', 'underline', 'strikethrough'] : _ref5$formatTools,
+      formatTools = _ref5$formatTools === void 0 ? ['bold', 'italic', 'underline', 'strikethrough'] : _ref5$formatTools,
       _ref5$reformatText = _ref5.reformatText,
       reformatText = _ref5$reformatText === void 0 ? _identity : _ref5$reformatText,
       mandatory = _ref5.mandatory,
@@ -5235,11 +4995,7 @@ var RichText = function RichText(_ref5) {
       helpText = _ref5.helpText,
       linkColor = _ref5.linkColor,
       _ref5$tabIndex = _ref5.tabIndex,
-      tabIndex = _ref5$tabIndex === void 0 ? 1 : _ref5$tabIndex,
-      value = _ref5.value,
-      setValue = _ref5.setValue,
-      raw = _ref5.raw,
-      locked = _ref5.locked;
+      tabIndex = _ref5$tabIndex === void 0 ? 1 : _ref5$tabIndex;
   var linkPopup = core.usePopupToggle();
   var input = core.useEnsureRef(inputRef);
   var activeLinkNode = React.useRef();
@@ -5251,34 +5007,21 @@ var RichText = function RichText(_ref5) {
   var commands = core.useRefState([]);
   var containerFocused = core.useToggle();
   var needsNormalize = core.useRefState();
-  var alreadyCancelled = core.useRefState(); // const [formValue, setFormValue] = useInput({path})
+  var alreadyCancelled = core.useRefState();
 
   var _useInput = useInput({
-    path: path,
-    value: value,
-    setValue: setValue
-  }, raw),
-      _useInput2 = _slicedToArray(_useInput, 3),
+    path: path
+  }),
+      _useInput2 = _slicedToArray(_useInput, 2),
       formValue = _useInput2[0],
-      setFormValue = _useInput2[1],
-      hasErrors = _useInput2[2].hasErrors; // const tempValue = useConstant(formValue)
+      setFormValue = _useInput2[1];
 
+  var tempValue = core.useConstant(formValue);
 
-  var _useState = React.useState(formValue),
+  var _useState = React.useState({}),
       _useState2 = _slicedToArray(_useState, 2),
-      tempValue = _useState2[0],
-      setTempValue = _useState2[1];
-
-  React.useEffect(function () {
-    if (value === formValue && formValue !== tempValue) {
-      setTempValue(formValue);
-    }
-  }, [path]);
-
-  var _useState3 = React.useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      activatedTools = _useState4[0],
-      setActivatedTools = _useState4[1];
+      activatedTools = _useState2[0],
+      setActivatedTools = _useState2[1];
 
   var validElements = core.useLazyConstant(function () {
     return ['br', 'div', 'p', 'span'].concat(_flatten(formatTools.map(function (tool) {
@@ -5314,6 +5057,8 @@ var RichText = function RichText(_ref5) {
   };
 
   var containerBlur = function containerBlur(e) {
+    console.log(e.target, e.currentTarget);
+
     if (containerFocused.isOpen !== 1) {
       containerFocused.close();
       triggerScrollForPanel(Date.now());
@@ -5328,26 +5073,6 @@ var RichText = function RichText(_ref5) {
     }
   };
 
-  var keydownHandler = function keydownHandler(e) {
-    if (containerFocused.isOpen === 2) {
-      if (formatTools.indexOf('link') < 0) {
-        return;
-      }
-
-      if (e.key === "k" && e.ctrlKey || e.key === "k" && e.metaKey) {
-        e.preventDefault();
-        execCommand(null, 'link');
-      }
-    }
-  };
-
-  React.useEffect(function () {
-    document.addEventListener('keydown', keydownHandler);
-    return function () {
-      return document.removeEventListener('keydown', keydownHandler);
-    };
-  }, [containerFocused.isOpen]);
-
   var execCommand = function execCommand(e, command) {
     if (command === 'link') {
       var nodeEl;
@@ -5382,23 +5107,17 @@ var RichText = function RichText(_ref5) {
           _anchor.innerHTML = '&#8203;';
 
           if (range.collapsed) {
-            range.insertNode(_anchor);
+            window.getSelection().getRangeAt(0).insertNode(_anchor);
           } else {
-            if (range.commonAncestorContainer === input.current) {
-              range.setStart(range.endContainer, 0);
-            }
-
             document.execCommand('createLink', false, '_');
             _anchor = window.getSelection().anchorNode;
           }
 
-          var _parent = range.commonAncestorContainer.nodeType === 3 ? range.commonAncestorContainer.parentNode : range.commonAncestorContainer;
+          var _parent = _anchor.nodeName === 'A' ? _anchor : _anchor.parentElement.matches('a') ? _anchor.parentElement : _anchor.nextSibling;
 
-          var links = _parent.querySelectorAll("a[href='_']");
+          _parent.setAttribute('href', ' ');
 
-          Array.from(links).slice(0, -1).forEach(removeLinkFromNode);
-          nodeEl = _last(links);
-          nodeEl.setAttribute('href', ' ');
+          nodeEl = _parent;
         }
       }
 
@@ -5436,25 +5155,11 @@ var RichText = function RichText(_ref5) {
       containerFocused.openWith(1);
       focus();
     }
-
-    if (command === 'insertUnorderedList' || command === 'insertOrderedList') {
-      var _range2 = document.createRange();
-
-      _range2.setStart(startSelectionToken.get().nextSibling, 0);
-
-      var _end = endSelectionToken.get().nextSibling;
-      startSelectionToken.get().remove();
-      endSelectionToken.get().remove();
-      startSelectionToken.set(null);
-      endSelectionToken.set(null);
-
-      _range2.setEnd(_end, 0);
-    }
   };
 
   var execCommandMouseUp = function execCommandMouseUp() {
     if (startSelectionToken.get()) {
-      // window.getSelection().removeAllRanges()
+      window.getSelection().removeAllRanges();
       var range = document.createRange();
       range.setStart(startSelectionToken.get().nextSibling, 0);
       var end = endSelectionToken.get().nextSibling;
@@ -5470,9 +5175,8 @@ var RichText = function RichText(_ref5) {
 
     commands.get().forEach(function (c) {
       return parseAndExecCommand(c);
-    }); // commands.set(_.without(['insertUnorderedList','insertOrderedList','outdent','indent']))
-
-    commands.set([]);
+    });
+    commands.set(_without(['insertUnorderedList', 'insertOrderedList', 'outdent', 'indent']));
     setFormValue(input.current.innerHTML);
     containerFocused.openWith(2);
     toggleButtonsState();
@@ -5622,14 +5326,10 @@ var RichText = function RichText(_ref5) {
     });
   };
 
-  var removeLinkFromNode = function removeLinkFromNode(node) {
-    node.outerHTML = node.innerHTML === "\u200B" ? '' : node.innerHTML;
-  };
-
   var removeLink = function removeLink(e) {
     if (e) e.preventDefault();
     alreadyCancelled.set(true);
-    removeLinkFromNode(activeLinkNode.current);
+    activeLinkNode.current.outerHTML = activeLinkNode.current.innerHTML === "\u200B" ? '' : activeLinkNode.current.innerHTML;
     linkPopup.close();
 
     if (input.current) {
@@ -5698,8 +5398,6 @@ var RichText = function RichText(_ref5) {
     className: JS_CLASS,
     minHeight: minHeight,
     placeholder: placeholder
-  }), locked && React__default.createElement(InputIcon$1, {
-    icon: "lock"
   }), linkPopup.isOpen && React__default.createElement(EditLinkPopup, {
     input: input,
     activeLinkNode: activeLinkNode,
@@ -5726,22 +5424,19 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
       values = _ref7.values;
   var linkPopup = React.useRef();
   var formRef = React.useRef();
-  var linkTextRef = React.useRef();
-  var linkUrlRef = React.useRef();
-  var LABELS = React.useContext(core.StartlibsContext).labels.RichText;
 
   var preValidation = function preValidation(formValues) {
     var errors;
 
     if (!formValues.linkText) {
       errors = {
-        'linkText': [LABELS.linkTextError]
+        'linkText': ['Campos com asterisco (*) são obrigatórios.']
       };
     }
 
     if (!formValues.linkUrl || formValues.linkUrl === ' ' || !utils.linkRegex.test(formValues.linkUrl.trim())) {
       errors = _objectSpread({}, errors, {
-        'linkUrl': [LABELS.linkUrlError]
+        'linkUrl': ['Adicione um endereço válido.']
       });
     }
 
@@ -5750,8 +5445,7 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
 
   var checkEscOrEnter = function checkEscOrEnter(e) {
     if (e.keyCode === 27) {
-      e.stopPropagation();
-      cancel(e);
+      e.stopPropagation().cancel(e);
     } else if (e.keyCode === 13) {
       e.preventDefault();
       e.stopPropagation();
@@ -5770,13 +5464,6 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
       'left': left + 'px',
       'top': top + 'px'
     });
-
-    if (values.linkText) {
-      linkUrlRef.current.focus();
-    } else {
-      linkTextRef.current.focus();
-    }
-
     return cancel;
   }, []);
   return React__default.createElement(WithForm, {
@@ -5793,29 +5480,230 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
       className: "popup rich-text-link-editor ignore-link",
       contentEditable: false
     }, React__default.createElement(TextInput, {
-      ref: linkTextRef,
+      autoFocus: !values.linkText,
       mandatory: true,
       path: "linkText",
-      label: LABELS.popupLinkText
+      label: "Texto de exibi\xE7\xE3o"
     }), React__default.createElement(TextInput, {
-      ref: linkUrlRef,
+      autoFocus: values.linkText,
       mandatory: true,
       path: "linkUrl",
-      label: LABELS.popupLinkUrl
+      label: "Endere\xE7o completo"
     }), React__default.createElement("div", {
       className: "popup-footer"
     }, React__default.createElement(components.Button, {
       className: "remove-link",
       icon: "remove",
       onClick: removeLink
-    }, LABELS.popupRemove), React__default.createElement(components.Button, {
+    }, "Remover Link"), React__default.createElement(components.Button, {
       onClick: cancel,
       tabIndex: 0
-    }, LABELS.popupCancel), React__default.createElement(components.Button, {
+    }, "Cancelar"), React__default.createElement(components.Button, {
       highlight: true,
       onClick: form.willSubmitForm
-    }, LABELS.popupConfirm)), React__default.createElement(Errors, null));
+    }, "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
+  });
+  return React__default.createElement(FlipDivStyle, _extends({}, props, {
+    ref: ref
+  }));
 };
 
 var IconRadioBoxText = styled__default.div.withConfig({
@@ -5883,11 +5771,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:14px;"]);
+})(["flex-basis:0;flex-grow:1;display:inline-block;font-size:13px;"]);
 var DescText$2 = styled__default.div.withConfig({
   displayName: "ToggleCheckbox__DescText",
   componentId: "sc-11ob8ah-3"
-})(["font-weight:400;color:rgba(0,0,0,0.4);font-size:12px;margin-top:0.25rem;"]);
+})(["font-weight:400;color:", ";font-size:12px;margin-top:0.25rem;"], utils.getColor('gray120'));
 var ToggleCheckbox = styled__default(function (_ref) {
   var path = _ref.path,
       disabled = _ref.disabled,
@@ -5915,16 +5803,16 @@ var ToggleCheckbox = styled__default(function (_ref) {
 }).withConfig({
   displayName: "ToggleCheckbox",
   componentId: "sc-11ob8ah-4"
-})(["position:relative;background-color:rgba(0,0,0,0.06);border-radius:6px;padding:0.75rem 1rem;min-height:36px;font-weight:600;font-weight:500;margin-bottom:1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;:hover{background-color:rgba(0,0,0,0.08);}:active{background-color:rgba(0,0,0,0.1);}& ~ &{margin-top:-0.5rem;}", " ", " ", ""], function (props) {
+})(["position:relative;background-color:rgba(0,0,0,0.06);border-radius:6px;padding:0.75rem 1rem;min-height:36px;font-weight:600;font-weight:500;margin-bottom:1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;:hover{background-color:rgba(0,0,0,0.08);}:active{background-color:rgba(0,0,0,0.1);}& ~ &{margin-top:-0.5rem;}", " ", ""], function (props) {
   return !props.noFocus && styled.css([":focus-within{background-color:rgba(0,0,0,0.09);:after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:9px;border:2px solid rgba(0,0,0,0.15);}}"]);
 }, function (props) {
   return props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ";
-}, utils.customTheme('ToggleCheckboxBox'));
+});
 
-function _templateObject$8() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n    min-width: 0;\n    ", "\n  "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -5943,7 +5831,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$8(), function (props) {
+}, utils.media.mobile(_templateObject$7(), 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({
@@ -6054,16 +5942,16 @@ var buildValidation = function buildValidation(validations) {
   };
 };
 var responseFailure = function responseFailure(fn) {
-  return function (v, response, _ref5) {
+  return function (_, response, _ref5) {
     var setErrors = _ref5.setErrors;
     var errorSetter = setErrors;
-    var r = [].concat(response, v);
+    var r = [].concat(response, _);
     console.log(r);
     var error = fn.apply(void 0, _toConsumableArray(r));
 
     if (error === true) ; else if (error) {
       errorSetter(error);
-    } else if (!_get('response[0].errors')) {
+    } else {
       errorSetter({
         "": [messages.SERVER_ERROR]
       });
@@ -6119,7 +6007,6 @@ 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,15 +1,16 @@
 {
   "name": "@startlibs/form",
-  "version": "1.0.0-alpha-10f",
+  "version": "1.0.0-alpha-9w.1",
   "description": "Startlibs Form",
-  "main": "lib/index.js",
+  "main": "src/index.js",
   "sideEffects": false,
   "source": true,
   "peerDependencies": {
     "lodash": "^4.17.11",
     "polished": "^1.1.3",
-    "react": "^18.0",
-    "react-dom": "^18.0",
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "react-hot-loader": "^4.3.5",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {

package/src/index.js

@@ -0,0 +1,24 @@
+export * from './Form'
+export * from './enhanceInput'
+export * from './Field'
+export * from './useConfirmDialog'
+export * from './TextInput'
+export * from './Errors'
+export * from './withFormImageInput'
+export * from './Checkbox'
+export * from './Combobox'
+export * from './ComboboxWithCustom'
+export * from './AutoComplete'
+export * from './EditableBox'
+export * from './FormValue'
+export * from './Radiobox'
+export * from './InputboxGroup'
+export * from './DatePicker'
+export * from './RichText'
+export * from './ExpandableBox'
+export * from './alt/radiobox/IconRadioBox'
+export * from './alt/checkbox/SimpleCheckbox'
+export * from './alt/checkbox/ToggleCheckbox'
+export * from './alt/radiobox/TabRadiobox'
+export * from './alt/radiobox/SimpleRadiobox'
+export {validation} from './validation'