@janiscommerce/ui-web 0.1.1 → 0.2.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-router-dom'), require('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-router-dom', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.reactRouterDom, global.require$$1));
-})(this, (function (exports, React, reactRouterDom, require$$1) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.require$$1));
+})(this, (function (exports, React, require$$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20244,7 +20244,7 @@
     }, function (props) {
       return props.hasText ? '50px' : '50%';
     }, function (props) {
-      return props.clickable || props.linkForHref ? 'auto' : 'none';
+      return props.clickable || props.hasLink ? 'auto' : 'none';
     }, function (props) {
       return props.hasText && '8px';
     }, function (props) {
@@ -20282,62 +20282,7 @@
     })(["text-overflow:ellipsis;overflow:hidden;"])
   };
 
-  var styled$7 = {
-    LinkWrapper: styled$a.div.withConfig({
-      displayName: "styles__LinkWrapper",
-      componentId: "sc-fhfdft-0"
-    })(["display:flex;color:", ";align-items:center;font-size:13px;& a{text-decoration:none;color:inherit;}"], getColor$1('blue')),
-    StyledIcon: styled$a(Icon).withConfig({
-      displayName: "styles__StyledIcon",
-      componentId: "sc-fhfdft-1"
-    })(["margin-right:8px;"])
-  };
-
-  var _excluded$4 = ["href", "children", "target", "icon"];
-
-  var Link = function Link(_ref) {
-    var href = _ref.href,
-        children = _ref.children,
-        target = _ref.target,
-        icon = _ref.icon,
-        props = _objectWithoutProperties(_ref, _excluded$4);
-
-    var origin = window.location.origin;
-    var internalLink = !href.startsWith('http');
-
-    var renderIcon = function renderIcon() {
-      return icon ? /*#__PURE__*/React__default["default"].createElement(styled$7.StyledIcon, {
-        name: icon
-      }) : null;
-    };
-
-    if ((internalLink || href.includes("".concat(origin))) && target === '_self') {
-      var path;
-
-      if (internalLink) {
-        path = href.startsWith('/') ? href : "/".concat(href);
-      } else {
-        path = href.replace("".concat(origin), '');
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement(styled$7.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
-        to: path,
-        "data-test": "react-router-link"
-      }, children || href));
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(styled$7.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
-      href: href,
-      target: target
-    }, children || href));
-  };
-
-  Link.defaultProps = {
-    href: '',
-    target: '_self'
-  };
-
-  var _excluded$3 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "styles", "textColor", "variant", "linkField", "data"];
+  var _excluded$4 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "styles", "textColor", "variant", "hasLink"];
 
   var Chip = function Chip(_ref) {
     var backgroundColor = _ref.backgroundColor,
@@ -20352,11 +20297,9 @@
         styles = _ref.styles,
         textColor = _ref.textColor,
         variant = _ref.variant,
-        linkField = _ref.linkField,
-        data = _ref.data,
-        props = _objectWithoutProperties(_ref, _excluded$3);
+        hasLink = _ref.hasLink,
+        props = _objectWithoutProperties(_ref, _excluded$4);
 
-    var linkForHref = linkField && data[linkField];
     return /*#__PURE__*/React__default["default"].createElement(styled$8.Chip, _extends$1({
       as: props.onClick ? 'button' : 'div',
       backgroundColor: backgroundColor,
@@ -20371,15 +20314,13 @@
       textColor: textColor,
       variant: variant,
       iconColor: iconColor,
-      linkForHref: linkForHref
+      hasLink: hasLink
     }, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: "chip-icon",
       name: icon,
       color: iconColor,
       pathStyles: styled$8.iconPathStyles
-    }), /*#__PURE__*/React__default["default"].createElement(styled$8.Children, null, linkForHref ? /*#__PURE__*/React__default["default"].createElement(Link, {
-      href: linkForHref
-    }, children) : children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$8.DeleteButton, {
+    }), /*#__PURE__*/React__default["default"].createElement(styled$8.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$8.DeleteButton, {
       type: "button",
       onClick: onDelete
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -20399,11 +20340,10 @@
     selected: false,
     textColor: '',
     variant: 'outlined',
-    linkField: '',
-    data: {}
+    hasLink: false
   };
 
-  var styled$6 = {
+  var styled$7 = {
     Wrapper: styled$a.div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-zbd85t-0"
@@ -20437,9 +20377,9 @@
         showLabel = _ref.showLabel;
     if (!color) return null;
     var colorCode = getColor$1(color);
-    return /*#__PURE__*/React__default["default"].createElement(styled$6.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$6.ColorSample, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$7.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$7.ColorSample, {
       color: colorCode
-    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$6.Label, {
+    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$7.Label, {
       color: colorCode
     }, colorCode));
   };
@@ -20476,7 +20416,7 @@
   }, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
     return props.checked ? palette.black : palette.darkGrey;
   }));
-  var styled$5 = {
+  var styled$6 = {
     OuterContainer: styled$a.div.withConfig({
       displayName: "styles__OuterContainer",
       componentId: "sc-rtzdt3-1"
@@ -20501,7 +20441,7 @@
     iconCheckStyles: iconCheckStyles
   };
 
-  var _excluded$2 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
+  var _excluded$3 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
 
   var Switch = function Switch(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -20511,7 +20451,7 @@
         name = _ref.name,
         onChange = _ref.onChange,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded$2);
+        props = _objectWithoutProperties(_ref, _excluded$3);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -20526,10 +20466,10 @@
 
     var _props$checked = props.checked,
         controledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$5.OuterContainer, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$6.OuterContainer, {
       disabled: disabled,
       checked: checked
-    }, /*#__PURE__*/React__default["default"].createElement(styled$5.Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$6.Input, {
       checked: controledChecked,
       id: id,
       name: name,
@@ -20537,10 +20477,10 @@
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
-    }), /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
+    }), /*#__PURE__*/React__default["default"].createElement(styled$6.Container, {
       checked: controledChecked,
       disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(styled$5.Ball, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$6.Ball, {
       checked: controledChecked,
       disabled: disabled
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -20548,7 +20488,7 @@
       disabled: disabled,
       name: "check_bold",
       size: 16,
-      styles: styled$5.iconCheckStyles
+      styles: styled$6.iconCheckStyles
     }))));
   };
 
@@ -20622,7 +20562,7 @@
     }
   };
 
-  var styled$4 = {
+  var styled$5 = {
     Container: styled$a.div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-1fhkfhs-0"
@@ -20675,7 +20615,7 @@
     })(["position:absolute;flex-shrink:0;flex-grow:0;margin-right:8px;height:100%;"])
   };
 
-  var _excluded$1 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
+  var _excluded$2 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
 
   var Input = /*#__PURE__*/function (_PureComponent) {
     _inherits$2(Input, _PureComponent);
@@ -20771,15 +20711,15 @@
             value = _this$props$value === void 0 ? stateValue : _this$props$value,
             isTranslateActive = _this$props.isTranslateActive;
             _this$props.defaultValue;
-            var props = _objectWithoutProperties(_this$props, _excluded$1);
+            var props = _objectWithoutProperties(_this$props, _excluded$2);
 
         var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
         var isFloating = isFocused || !!value.toString();
-        return /*#__PURE__*/React__default["default"].createElement(styled$4.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
           fullWidth: props.fullWidth
-        }, /*#__PURE__*/React__default["default"].createElement(styled$4.Container, {
+        }, /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$4.FloatingLabel, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$5.FloatingLabel, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -20788,10 +20728,10 @@
           isFloating: isFloating,
           hasIcon: !!icon,
           isTranslateActive: isTranslateActive
-        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$4.InputIcon, {
+        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$5.InputIcon, {
           name: icon,
           color: error ? 'error' : 'black'
-        }), /*#__PURE__*/React__default["default"].createElement(styled$4.Input, _extends$1({}, props, {
+        }), /*#__PURE__*/React__default["default"].createElement(styled$5.Input, _extends$1({}, props, {
           ref: this.input,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -20804,7 +20744,7 @@
           error: error,
           hasIcon: !!icon,
           onAnimationStart: this.handleFocus
-        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$4.ErrorMessage, {
+        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$5.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -20862,7 +20802,7 @@
     }
   };
 
-  var styled$3 = {
+  var styled$4 = {
     Container: styled$a.div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-wtau65-0"
@@ -20896,7 +20836,7 @@
     })(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], palette.error.main)
   };
 
-  var _excluded = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
+  var _excluded$1 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
 
   var Textarea = /*#__PURE__*/function (_PureComponent) {
     _inherits$2(Textarea, _PureComponent);
@@ -20998,12 +20938,12 @@
             _this$props$value = _this$props.value,
             value = _this$props$value === void 0 ? stateValue : _this$props$value;
             _this$props.defaultValue;
-            var props = _objectWithoutProperties(_this$props, _excluded);
+            var props = _objectWithoutProperties(_this$props, _excluded$1);
 
         var isFloating = isFocused || !!value;
-        return /*#__PURE__*/React__default["default"].createElement(styled$3.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$4.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$3.FloatingLabel, _extends$1({}, props, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$4.FloatingLabel, _extends$1({}, props, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -21011,7 +20951,7 @@
           isFocused: isFocused,
           isFloating: isFloating,
           isTranslateActive: isTranslateActive
-        }), label), /*#__PURE__*/React__default["default"].createElement(styled$3.Textarea, _extends$1({}, props, {
+        }), label), /*#__PURE__*/React__default["default"].createElement(styled$4.Textarea, _extends$1({}, props, {
           ref: this.textarea,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -21022,7 +20962,7 @@
           value: value,
           autoComplete: autoComplete ? 'on' : 'off',
           disabled: disabled
-        })), error && /*#__PURE__*/React__default["default"].createElement(styled$3.ErrorMessage, {
+        })), error && /*#__PURE__*/React__default["default"].createElement(styled$4.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -21058,7 +20998,7 @@
     return 'initial';
   };
 
-  var styled$2 = {
+  var styled$3 = {
     ImageWrapper: styled$a.div.withConfig({
       displayName: "styles__ImageWrapper",
       componentId: "sc-vrvp1c-0"
@@ -21104,7 +21044,7 @@
         errorImage = _useState2[0],
         setErrorImage = _useState2[1];
 
-    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$2.ImageWrapper, {
+    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$3.ImageWrapper, {
       background: background,
       width: width || height,
       height: height || width
@@ -21112,7 +21052,7 @@
       name: errorImage,
       size: (width || height) * 0.35 || 20,
       color: palette.lightGreyPressed
-    })) : /*#__PURE__*/React__default["default"].createElement(styled$2.Image, {
+    })) : /*#__PURE__*/React__default["default"].createElement(styled$3.Image, {
       src: url,
       alt: altText || url,
       width: width,
@@ -21945,7 +21885,7 @@
     return debounced;
   }
 
-  var styled$1 = {
+  var styled$2 = {
     ClickableWrapper: styled$a.div.withConfig({
       displayName: "styles__ClickableWrapper",
       componentId: "sc-lreg3c-0"
@@ -22010,13 +21950,13 @@
     var value = colorValue || DEFAULT_COLOR;
 
     if (isCollapsable) {
-      return /*#__PURE__*/React__default["default"].createElement(styled$1.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$1.ClickableWrapper, {
+      return /*#__PURE__*/React__default["default"].createElement(styled$2.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$2.ClickableWrapper, {
         "data-test": "collapsible-picker",
         color: value,
         role: "presentation",
         onClick: toggleStateVisible,
         error: error
-      }, /*#__PURE__*/React__default["default"].createElement(styled$1.Input, {
+      }, /*#__PURE__*/React__default["default"].createElement(styled$2.Input, {
         value: colorValue,
         fullWidth: true,
         onChange: function onChange(_ref2) {
@@ -22025,10 +21965,10 @@
         },
         errorMessage: errorMessage,
         error: error
-      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$1.ClosePickerWrapper, {
+      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$2.ClosePickerWrapper, {
         onClick: handleClosePicker,
         role: "presentation"
-      }), /*#__PURE__*/React__default["default"].createElement(styled$1.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
+      }), /*#__PURE__*/React__default["default"].createElement(styled$2.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
         color: value,
         onChange: change
       }))));
@@ -22374,7 +22314,7 @@
 
   var Frame = /*@__PURE__*/getDefaultExportFromCjs(lib);
 
-  var styled = {
+  var styled$1 = {
     Wrapper: styled$a.div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-3jodl7-0"
@@ -22387,7 +22327,7 @@
 
   var DefaultError = function DefaultError(_ref) {
     var message = _ref.message;
-    return /*#__PURE__*/React__default["default"].createElement(styled.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled.Icon, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$1.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$1.Icon, {
       name: "exclamation_circle",
       color: "statusRed"
     }), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -22506,6 +22446,46 @@
     height: 'medium'
   };
 
+  var styled = {
+    LinkWrapper: styled$a.div.withConfig({
+      displayName: "styles__LinkWrapper",
+      componentId: "sc-fhfdft-0"
+    })(["display:flex;color:", ";align-items:center;font-size:13px;& a{text-decoration:none;color:inherit;}"], getColor$1('blue')),
+    StyledIcon: styled$a(Icon).withConfig({
+      displayName: "styles__StyledIcon",
+      componentId: "sc-fhfdft-1"
+    })(["margin-right:8px;"])
+  };
+
+  var _excluded = ["href", "children", "target", "icon"];
+
+  var Link = function Link(_ref) {
+    var href = _ref.href,
+        children = _ref.children,
+        target = _ref.target,
+        icon = _ref.icon,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    if (href.startsWith('/')) return;
+
+    var renderIcon = function renderIcon() {
+      return icon ? /*#__PURE__*/React__default["default"].createElement(styled.StyledIcon, {
+        name: icon
+      }) : null;
+    };
+
+    var validHref = href.startsWith('http') ? href : "https://".concat(href);
+    return /*#__PURE__*/React__default["default"].createElement(styled.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
+      href: validHref,
+      target: target
+    }, children || validHref));
+  };
+
+  Link.defaultProps = {
+    href: '',
+    target: '_self'
+  };
+
   exports.Button = Button;
   exports.Checkbox = Checkbox;
   exports.Chip = Chip;
@@ -22516,6 +22496,7 @@
   exports.Icon = Icon;
   exports.Image = Image;
   exports.Input = Input;
+  exports.Link = Link;
   exports.QRCode = QRCode;
   exports.Switch = Switch;
   exports.Textarea = Textarea;