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

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) {
@@ -3990,10 +3786,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 +3815,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 +3871,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 +3900,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 +4002,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 +4018,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 +4691,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 +4717,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 +4904,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 +4999,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 +5118,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),
@@ -5521,6 +5321,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 +5373,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', ' ');
         }
       }
 
@@ -5788,10 +5598,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 +5702,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 +5726,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 +5746,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 +5769,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
@@ -6073,10 +5897,10 @@ var ToggleCheckbox = styled__default(function (_ref) {
   return props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ";
 });
 
-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 +5919,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-10d",
   "description": "Startlibs Form",
   "main": "lib/index.js",
   "sideEffects": false,