@activecollab/components 1.0.64 → 1.0.67

package/dist/index.js

@@ -323,7 +323,8 @@
     var children = _ref.children,
         _ref$variant = _ref.variant,
         variant = _ref$variant === void 0 ? "contained" : _ref$variant,
-        size = _ref.size,
+        _ref$size = _ref.size,
+        size = _ref$size === void 0 ? "medium" : _ref$size,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
@@ -612,7 +613,7 @@
     var children = _ref.children,
         _ref$root = _ref.root,
         root = _ref$root === void 0 ? document.body : _ref$root;
-    return /*#__PURE__*/ReactDOM__default["default"].createPortal(children, root);
+    return document.body.contains(root) || root === document.body ? /*#__PURE__*/ReactDOM__default["default"].createPortal(children, root) : null;
   };
   Portal.displayName = "Portal";
 
@@ -1731,7 +1732,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$M = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock"];
+  var _excluded$M = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -1745,6 +1746,9 @@
         disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
         _ref$disableScrollLoc = _ref.disableScrollLock,
         disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
+        _ref$preventClickEven = _ref.preventClickEventBubbling,
+        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
+        onClick = _ref.onClick,
         rest = _objectWithoutProperties(_ref, _excluded$M);
 
     var innerRef = React.useRef(null);
@@ -1773,6 +1777,13 @@
       }; // Dependency is empty because we only want to call onClose when component is unmounted
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    var handleClick = React.useCallback(function (event) {
+      if (preventClickEventBubbling) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+      }
+
+      typeof onClick === "function" && onClick(event);
+    }, [onClick, preventClickEventBubbling]);
     return /*#__PURE__*/React__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement(FocusLock__default["default"], {
       returnFocus: returnFocus,
       disabled: disableFocusLock
@@ -1787,7 +1798,8 @@
       }, style),
       onKeyDown: handleKeyDown,
       tabIndex: 0,
-      className: classnames__default["default"]("c-window", className)
+      className: classnames__default["default"]("c-window", className),
+      onClick: handleClick
     }), children))));
   });
   Window.displayName = "Window";
@@ -1893,7 +1905,9 @@
         popperClassName = _ref.popperClassName,
         backgroundElementClass = _ref.backgroundElementClass,
         _ref$windowAbsolutely = _ref.windowAbsolutelyPositioned,
-        windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely;
+        windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely,
+        _ref$preventClickEven = _ref.preventClickEventBubbling,
+        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven;
 
     var _useState = React.useState(defaultOpen),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1938,7 +1952,8 @@
       disableFocusLock: disableFocusLock,
       style: {
         position: windowAbsolutelyPositioned ? "absolute" : "fixed"
-      }
+      },
+      preventClickEventBubbling: preventClickEventBubbling
     }, /*#__PURE__*/React__default["default"].createElement(Overlay, {
       className: backgroundElementClass,
       onClick: handleClose,
@@ -4592,7 +4607,11 @@
   var StyledInput = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-0"
-  })(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], FontStyle, BoxSizingStyle, function (props) {
+  })(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], FontStyle, BoxSizingStyle, function (props) {
+    return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
+  }, function (props) {
+    return props.$size === "big" && styled.css(["height:40px;font-size:16px;"]);
+  }, function (props) {
     return props.disabled ? styled.css(["", ""], {
       "cursor": "not-allowed",
       "opacity": "0.5",
@@ -4607,7 +4626,7 @@
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$q = ["className", "type", "disabled"];
+  var _excluded$q = ["className", "type", "disabled", "size"];
   var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
@@ -4615,13 +4634,16 @@
         type = _ref$type === void 0 ? "text" : _ref$type,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+        _ref$size = _ref.size,
+        size = _ref$size === void 0 ? "regular" : _ref$size,
         rest = _objectWithoutProperties(_ref, _excluded$q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: ref,
       type: type,
       disabled: disabled,
-      className: classnames__default["default"]("c-input", className)
+      className: classnames__default["default"]("c-input", className),
+      $size: size
     }, rest));
   });
   Input.displayName = "Input";
@@ -7748,7 +7770,7 @@
     function () {});
   }
 
-  var _excluded$i = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
+  var _excluded$i = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "preventClickEventBubbling", "open", "onClose"];
 
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
@@ -7764,6 +7786,8 @@
         disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
         _ref$disableBackgroun2 = _ref.disableBackgroundColor,
         disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
+        _ref$preventClickEven = _ref.preventClickEventBubbling,
+        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         _ref$open = _ref.open,
         defaultOpen = _ref$open === void 0 ? false : _ref$open,
         onClose = _ref.onClose,
@@ -7829,7 +7853,8 @@
       ref: handleRef,
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
-      disableScrollLock: disableScrollLock
+      disableScrollLock: disableScrollLock,
+      preventClickEventBubbling: preventClickEventBubbling
     }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor
@@ -7906,7 +7931,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$h = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
+  var _excluded$h = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick", "preventClickEventBubbling"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         onClose = _ref.onClose,
@@ -7930,6 +7955,8 @@
         bodyClassName = _ref.bodyClassName,
         _ref$disableBackgroun2 = _ref.disableBackgroundClick,
         disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
+        _ref$preventClickEven = _ref.preventClickEventBubbling,
+        preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         rest = _objectWithoutProperties(_ref, _excluded$h);
 
     var _useState = React.useState(defaultOpen),
@@ -7972,7 +7999,8 @@
       ref: handleRef,
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
-      disableScrollLock: disableScrollLock
+      disableScrollLock: disableScrollLock,
+      preventClickEventBubbling: preventClickEventBubbling
     }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor