@activecollab/components 1.0.94 → 1.0.95

package/dist/esm/helpers/Portal/Portal.js

@@ -1,9 +1,23 @@
+import { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
+
+var getContainer = function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+};
+
 export var Portal = function Portal(_ref) {
   var children = _ref.children,
-      _ref$root = _ref.root,
-      root = _ref$root === void 0 ? document.body : _ref$root;
-  return document.body.contains(root) || root === document.body ? /*#__PURE__*/ReactDOM.createPortal(children, root) : null;
+      _ref$container = _ref.container,
+      container = _ref$container === void 0 ? document.body : _ref$container;
+
+  var _useState = useState(null),
+      mountNode = _useState[0],
+      setMountNode = _useState[1];
+
+  useEffect(function () {
+    setMountNode(getContainer(container));
+  }, [container]);
+  return mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode;
 };
 Portal.displayName = "Portal";
 //# sourceMappingURL=Portal.js.map

package/dist/esm/helpers/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/helpers/Portal/Portal.tsx"],"names":["ReactDOM","Portal","children","root","document","body","contains","createPortal","displayName"],"mappings":"AACA,OAAOA,QAAP,MAAqB,WAArB;AAMA,OAAO,IAAMC,MAAmB,GAAG,SAAtBA,MAAsB,OAAwC;AAAA,MAArCC,QAAqC,QAArCA,QAAqC;AAAA,uBAA3BC,IAA2B;AAAA,MAA3BA,IAA2B,0BAApBC,QAAQ,CAACC,IAAW;AACzE,SAAOD,QAAQ,CAACC,IAAT,CAAcC,QAAd,CAAuBH,IAAvB,KAAgCA,IAAI,KAAKC,QAAQ,CAACC,IAAlD,gBACHL,QAAQ,CAACO,YAAT,CAAsBL,QAAtB,EAAgCC,IAAhC,CADG,GAEH,IAFJ;AAGD,CAJM;AAMPF,MAAM,CAACO,WAAP,GAAqB,QAArB","sourcesContent":["import { FC } from \"react\";\nimport ReactDOM from \"react-dom\";\n\ninterface IPortal {\n  root?: HTMLElement;\n}\n\nexport const Portal: FC<IPortal> = ({ children, root = document.body }) => {\n  return document.body.contains(root) || root === document.body\n    ? ReactDOM.createPortal(children, root)\n    : null;\n};\n\nPortal.displayName = \"Portal\";\n"],"file":"Portal.js"}
+{"version":3,"sources":["../../../../src/helpers/Portal/Portal.tsx"],"names":["useEffect","useState","ReactDOM","getContainer","container","Portal","children","document","body","mountNode","setMountNode","createPortal","displayName"],"mappings":"AAAA,SAAaA,SAAb,EAAwBC,QAAxB,QAAwC,OAAxC;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAQA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,SAAD,EAA0B;AAC7C,SAAO,OAAOA,SAAP,KAAqB,UAArB,GAAkCA,SAAS,EAA3C,GAAgDA,SAAvD;AACD,CAFD;;AAIA,OAAO,IAAMC,MAAmB,GAAG,SAAtBA,MAAsB,OAG7B;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,4BADJF,SACI;AAAA,MADJA,SACI,+BADQG,QAAQ,CAACC,IACjB;;AACJ,kBAAkCP,QAAQ,CAAqB,IAArB,CAA1C;AAAA,MAAOQ,SAAP;AAAA,MAAkBC,YAAlB;;AAEAV,EAAAA,SAAS,CAAC,YAAM;AACdU,IAAAA,YAAY,CAACP,YAAY,CAACC,SAAD,CAAb,CAAZ;AACD,GAFQ,EAEN,CAACA,SAAD,CAFM,CAAT;AAIA,SAAOK,SAAS,gBAAGP,QAAQ,CAACS,YAAT,CAAsBL,QAAtB,EAAgCG,SAAhC,CAAH,GAAgDA,SAAhE;AACD,CAXM;AAaPJ,MAAM,CAACO,WAAP,GAAqB,QAArB","sourcesContent":["import { FC, useEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\ntype ContainerFunc = () => HTMLElement;\ntype Container = HTMLElement | ContainerFunc;\ninterface IPortal {\n  container?: Container;\n}\n\nconst getContainer = (container: Container) => {\n  return typeof container === \"function\" ? container() : container;\n};\n\nexport const Portal: FC<IPortal> = ({\n  children,\n  container = document.body,\n}) => {\n  const [mountNode, setMountNode] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    setMountNode(getContainer(container));\n  }, [container]);\n\n  return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;\n};\n\nPortal.displayName = \"Portal\";\n"],"file":"Portal.js"}

package/dist/index.js

@@ -612,11 +612,24 @@
   };
   FromElement.displayName = "FromElement";
 
+  var getContainer = function getContainer(container) {
+    return typeof container === "function" ? container() : container;
+  };
+
   var Portal = function Portal(_ref) {
     var children = _ref.children,
-        _ref$root = _ref.root,
-        root = _ref$root === void 0 ? document.body : _ref$root;
-    return document.body.contains(root) || root === document.body ? /*#__PURE__*/ReactDOM__default["default"].createPortal(children, root) : null;
+        _ref$container = _ref.container,
+        container = _ref$container === void 0 ? document.body : _ref$container;
+
+    var _useState = React.useState(null),
+        _useState2 = _slicedToArray(_useState, 2),
+        mountNode = _useState2[0],
+        setMountNode = _useState2[1];
+
+    React.useEffect(function () {
+      setMountNode(getContainer(container));
+    }, [container]);
+    return mountNode ? /*#__PURE__*/ReactDOM__default["default"].createPortal(children, mountNode) : mountNode;
   };
   Portal.displayName = "Portal";
 
@@ -4640,7 +4653,7 @@
   var StyledInput = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-0"
-  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}"], {
+  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " ", " &::placeholder{", "}", ""], {
     "fontSize": "0.875rem"
   }, {
     "color": "var(--color-theme-900)"
@@ -4659,22 +4672,24 @@
       "fontSize": "1rem"
     });
   }, function (props) {
-    return props.disabled ? styled.css(["", ""], {
+    return props.disabled && styled.css(["", ""], {
       "cursor": "not-allowed",
       "opacity": "0.5"
-    }) : styled.css(["&:hover{", "}&:active{", "}&:focus{", "}"], {
-      "borderColor": "var(--color-primary)"
-    }, {
-      "borderColor": "var(--color-primary)"
-    }, {
+    });
+  }, function (props) {
+    return !props.disabled && !props.$invalid && styled.css(["&:active,&:focus,&:hover{", "}"], {
       "borderColor": "var(--color-primary)"
     });
   }, {
     "color": "var(--color-theme-transparent-500)"
+  }, function (props) {
+    return !props.disabled && props.$invalid && styled.css(["", ""], {
+      "borderColor": "var(--red-alert)"
+    });
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$r = ["className", "type", "disabled", "size"];
+  var _excluded$r = ["className", "type", "disabled", "size", "invalid"];
   var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
@@ -4684,6 +4699,8 @@
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? "regular" : _ref$size,
+        _ref$invalid = _ref.invalid,
+        invalid = _ref$invalid === void 0 ? false : _ref$invalid,
         rest = _objectWithoutProperties(_ref, _excluded$r);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
@@ -4691,7 +4708,8 @@
       type: type,
       disabled: disabled,
       className: classNames__default["default"]("c-input", className),
-      $size: size
+      $size: size,
+      $invalid: invalid
     }, rest));
   });
   Input.displayName = "Input";
@@ -7828,7 +7846,7 @@
   var StyledTextarea = styled__default["default"].textarea.withConfig({
     displayName: "Styles__StyledTextarea",
     componentId: "sc-m6jqw8-0"
-  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;", " ", " ", " &:active,&:focus{outline:none !important;", "}&:focus{box-shadow:none;}&::placeholder{", "}", ""], {
+  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], {
     "fontSize": "0.875rem"
   }, {
     "color": "var(--color-theme-900)"
@@ -7841,29 +7859,34 @@
   }, {
     "borderColor": "var(--color-theme-500)"
   }, FontStyle, BoxSizingStyle, function (props) {
-    return !props.disabled && styled.css(["&:hover{outline:none !important;", "}"], {
+    return props.disabled && styled.css(["", ""], {
+      "cursor": "not-allowed",
+      "opacity": "0.5"
+    });
+  }, function (props) {
+    return !props.disabled && !props.$invalid && styled.css(["&:active,&:focus,&:hover{", "}"], {
       "borderColor": "var(--color-primary)"
     });
-  }, {
-    "borderColor": "var(--color-primary)"
   }, {
     "color": "var(--color-theme-transparent-500)"
   }, function (props) {
-    return props.disabled && styled.css(["outline:none;", " &:hover{border-color:var(--border-primary);}"], {
-      "cursor": "not-allowed",
-      "opacity": "0.5"
+    return !props.disabled && props.$invalid && styled.css(["", ""], {
+      "borderColor": "var(--red-alert)"
     });
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$k = ["className", "disabled"];
+  var _excluded$k = ["className", "disabled", "invalid"];
   var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+        _ref$invalid = _ref.invalid,
+        invalid = _ref$invalid === void 0 ? false : _ref$invalid,
         rest = _objectWithoutProperties(_ref, _excluded$k);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
+      $invalid: invalid,
       ref: ref,
       disabled: disabled,
       className: classNames__default["default"]("c-textarea", {