@startlibs/form 1.0.0-alpha-10c → 1.0.0-alpha-10f

package/lib/index.js

@@ -44,14 +44,10 @@ 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 _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'));
@@ -3061,206 +3057,6 @@ 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) {
@@ -3371,7 +3167,7 @@ var ConfirmEditableBoxes = React.forwardRef(function (_ref, ref) {
 
   var modifiedEditablesPath = function modifiedEditablesPath(boxes) {
     return modifiedEditableBoxes(boxes).map(function (_) {
-      return _.path;
+      return utils.callIfFunction(_.path);
     });
   };
 
@@ -3399,7 +3195,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 = box.path;
+      var index = utils.callIfFunction(box.path);
 
       var _box$modifiedValue = box.modifiedValue(),
           _box$modifiedValue2 = _slicedToArray(_box$modifiedValue, 2),
@@ -3699,18 +3495,38 @@ var EditableBoxPresentation = styled__default(React.forwardRef(function (_ref13,
 var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
   var path = _ref15.path,
       isSingle = _ref15.isSingle,
-      props = _objectWithoutProperties(_ref15, ["path", "isSingle"]);
+      _ref15$checkIsNew = _ref15.checkIsNew,
+      checkIsNew = _ref15$checkIsNew === void 0 ? function (a, b) {
+    return a !== b;
+  } : _ref15$checkIsNew,
+      props = _objectWithoutProperties(_ref15, ["path", "isSingle", "checkIsNew"]);
 
   var editableGroup = React.useContext(EditableContext);
   var form = React.useContext(FormContext);
-  var isNew = core.useRefState(isSingle ? false : utils._s.get(path, form.getOriginalValues()) !== form.getValue(path));
+  var isNew = core.useRefState(function () {
+    return isSingle ? false : checkIsNew(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 selfRef = React.useRef();
+  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 resetField = function resetField() {
     return form.resetField([].concat(path));
@@ -3730,12 +3546,6 @@ 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);
 
@@ -3826,12 +3636,6 @@ 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,
@@ -3855,7 +3659,6 @@ 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() {
@@ -3908,14 +3711,17 @@ var EditableBox = function EditableBox(_ref17) {
     return internalBox.current.loading;
   };
 
-  selfRef.current = {
+  var pathRef = core.useRefMemo(path);
+  var selfRef = React.useRef({
     loading: loading,
-    path: path,
+    path: function path() {
+      return pathRef.current;
+    },
     form: form,
     modifiedValue: modifiedValue,
     handleSubmit: handleSubmit,
     close: close
-  };
+  });
   return React__default.createElement(EditableBoxPresentation, _extends({
     ref: internalBox,
     resetField: resetField,
@@ -3990,10 +3796,10 @@ var Radiobox = function Radiobox(_ref) {
   }));
 };
 
-function _templateObject$4() {
+function _templateObject$3() {
   var data = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject$3 = function _templateObject() {
     return data;
   };
 
@@ -4019,7 +3825,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$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$3()), 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) {
@@ -4075,10 +3881,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$5() {
+function _templateObject$4() {
   var data = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -4104,7 +3910,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$5()), 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:", ";}", "{:before{background-color:", ";}}"], utils.getColor('main'), function (props) {
@@ -4206,10 +4012,10 @@ function _templateObject2$2() {
   return data;
 }
 
-function _templateObject$6() {
+function _templateObject$5() {
   var data = _taggedTemplateLiteral(["\n      width: 2.5rem;\n    "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -4222,7 +4028,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$6()));
+})(["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()));
 var CalendarHeader = styled__default.div.withConfig({
   displayName: "DatePicker__CalendarHeader",
   componentId: "sc-1wo8j4d-1"
@@ -4895,10 +4701,10 @@ function getClosestNextLeapYear(year) {
   return y;
 }
 
-function _templateObject$7() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteral(["\n      padding 1rem;\n    "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -4921,7 +4727,7 @@ var ExpandableBoxStyled = styled__default.div.withConfig({
     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) {
+  }) : 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);
@@ -5108,10 +4914,10 @@ var FlipDiv$1 = function FlipDiv(_ref3) {
   }));
 };
 
-function _templateObject$8() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n    padding-right: 2.25rem;\n    background: rgba(0,0,0,0.075);\n  "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -5203,7 +5009,7 @@ var RichTextContainer = styled__default.div.withConfig({
 }, 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$8());
+  return props.locked && css(_templateObject$7());
 });
 var RichTextInput = styled__default.div.withConfig({
   displayName: "RichText__RichTextInput",
@@ -5322,6 +5128,10 @@ 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),
@@ -5504,7 +5314,6 @@ 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());
@@ -5521,6 +5330,10 @@ 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');
@@ -5569,17 +5382,23 @@ var RichText = function RichText(_ref5) {
           _anchor.innerHTML = '&#8203;';
 
           if (range.collapsed) {
-            window.getSelection().getRangeAt(0).insertNode(_anchor);
+            range.insertNode(_anchor);
           } else {
+            if (range.commonAncestorContainer === input.current) {
+              range.setStart(range.endContainer, 0);
+            }
+
             document.execCommand('createLink', false, '_');
             _anchor = window.getSelection().anchorNode;
           }
 
-          var _parent = _anchor.nodeName === 'A' ? _anchor : _anchor.parentElement.matches('a') ? _anchor.parentElement : _anchor.nextSibling;
+          var _parent = range.commonAncestorContainer.nodeType === 3 ? range.commonAncestorContainer.parentNode : range.commonAncestorContainer;
 
-          _parent.setAttribute('href', ' ');
+          var links = _parent.querySelectorAll("a[href='_']");
 
-          nodeEl = _parent;
+          Array.from(links).slice(0, -1).forEach(removeLinkFromNode);
+          nodeEl = _last(links);
+          nodeEl.setAttribute('href', ' ');
         }
       }
 
@@ -5617,11 +5436,25 @@ 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;
@@ -5637,8 +5470,9 @@ var RichText = function RichText(_ref5) {
 
     commands.get().forEach(function (c) {
       return parseAndExecCommand(c);
-    });
-    commands.set(_without(['insertUnorderedList', 'insertOrderedList', 'outdent', 'indent']));
+    }); // commands.set(_.without(['insertUnorderedList','insertOrderedList','outdent','indent']))
+
+    commands.set([]);
     setFormValue(input.current.innerHTML);
     containerFocused.openWith(2);
     toggleButtonsState();
@@ -5788,10 +5622,14 @@ 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);
-    activeLinkNode.current.outerHTML = activeLinkNode.current.innerHTML === "\u200B" ? '' : activeLinkNode.current.innerHTML;
+    removeLinkFromNode(activeLinkNode.current);
     linkPopup.close();
 
     if (input.current) {
@@ -5888,6 +5726,8 @@ 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) {
@@ -5910,7 +5750,8 @@ 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();
@@ -5929,6 +5770,13 @@ 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, {
@@ -5945,12 +5793,12 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
       className: "popup rich-text-link-editor ignore-link",
       contentEditable: false
     }, React__default.createElement(TextInput, {
-      autoFocus: !values.linkText,
+      ref: linkTextRef,
       mandatory: true,
       path: "linkText",
       label: LABELS.popupLinkText
     }), React__default.createElement(TextInput, {
-      autoFocus: values.linkText,
+      ref: linkUrlRef,
       mandatory: true,
       path: "linkUrl",
       label: LABELS.popupLinkUrl
@@ -6067,16 +5915,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$9() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteral(["\n    min-width: 0;\n    ", "\n  "]);
 
-  _templateObject$9 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
   };
 
@@ -6095,7 +5943,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$9(), 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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/form",
-  "version": "1.0.0-alpha-10c",
+  "version": "1.0.0-alpha-10f",
   "description": "Startlibs Form",
   "main": "lib/index.js",
   "sideEffects": false,
@@ -8,9 +8,8 @@
   "peerDependencies": {
     "lodash": "^4.17.11",
     "polished": "^1.1.3",
-    "react": "^16.8",
-    "react-dom": "^16.8",
-    "react-hot-loader": "^4.3.5",
+    "react": "^18.0",
+    "react-dom": "^18.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {