@activecollab/components 1.0.73 → 1.0.76

package/dist/index.js

@@ -780,35 +780,61 @@
   })(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
     return colors[props.$color];
   }, function (props) {
-    return props.$variant === "Title 1" && styled.css(["font-size:2rem;"]);
+    return props.$variant === "Title 1" && styled.css(["", ""], {
+      "fontSize": "2rem"
+    });
   }, function (props) {
-    return props.$variant === "Title 2" && styled.css(["font-size:1.625rem;"]);
+    return props.$variant === "Title 2" && styled.css(["", ""], {
+      "fontSize": "1.675rem"
+    });
   }, function (props) {
-    return props.$variant === "Header 2" && styled.css(["font-size:1.125rem;"]);
+    return props.$variant === "Header 2" && styled.css(["", ""], {
+      "fontSize": "1.125rem"
+    });
   }, function (props) {
-    return (props.$variant === "Header 3" || props.$variant === "Body 1") && styled.css(["font-size:1rem;"]);
+    return (props.$variant === "Header 3" || props.$variant === "Body 1") && styled.css(["", ""], {
+      "fontSize": "1rem"
+    });
   }, function (props) {
-    return props.$variant === "Body 2" && styled.css(["font-size:0.875rem;"]);
+    return props.$variant === "Body 2" && styled.css(["", ""], {
+      "fontSize": "0.875rem"
+    });
   }, function (props) {
-    return props.$variant === "Caption 1" && styled.css(["font-size:0.75rem;"]);
+    return props.$variant === "Caption 1" && styled.css(["", ""], {
+      "fontSize": "0.75rem"
+    });
   }, function (props) {
-    return props.$variant === "Caption 2" && styled.css(["font-size:0.625rem;"]);
+    return props.$variant === "Caption 2" && styled.css(["", ""], {
+      "fontSize": "0.625rem"
+    });
   }, function (props) {
     return props.$italic ? styled.css(["font-style:italic;"]) : styled.css(["font-style:normal;"]);
   }, function (props) {
     return props.$tabularNums ? styled.css(["font-variant-numeric:tabular-nums;"]) : styled.css(["font-variant-numeric:normal;"]);
   }, function (props) {
-    return props.$letterSpacing === "regular" && styled.css(["letter-spacing:0.02em;"]);
+    return props.$letterSpacing === "regular" && styled.css(["", ""], {
+      "letterSpacing": "0.02em"
+    });
   }, function (props) {
-    return props.$letterSpacing === "tight" && styled.css(["letter-spacing:0em;"]);
+    return props.$letterSpacing === "tight" && styled.css(["", ""], {
+      "letterSpacing": "0em"
+    });
   }, function (props) {
-    return props.$letterSpacing === "wide" && styled.css(["letter-spacing:0.08em;"]);
+    return props.$letterSpacing === "wide" && styled.css(["", ""], {
+      "letterSpacing": "0.08em"
+    });
   }, function (props) {
-    return props.$lineHeight === "regular" && styled.css(["line-height:1.375;"]);
+    return props.$lineHeight === "regular" && styled.css(["", ""], {
+      "lineHeight": "1.375"
+    });
   }, function (props) {
-    return props.$lineHeight === "tight" && styled.css(["line-height:1;"]);
+    return props.$lineHeight === "tight" && styled.css(["", ""], {
+      "lineHeight": "1"
+    });
   }, function (props) {
-    return props.$lineHeight === "loose" && styled.css(["line-height:1.625;"]);
+    return props.$lineHeight === "loose" && styled.css(["", ""], {
+      "lineHeight": "1.625"
+    });
   }, function (props) {
     return props.$align === "left" && styled.css(["text-align:left;"]);
   }, function (props) {
@@ -856,13 +882,21 @@
   }, function (props) {
     return props.$wordBreak === "all" && styled.css(["word-break:break-all;"]);
   }, function (props) {
-    return props.$weight === "regular" && styled.css(["font-weight:400;"]);
+    return props.$weight === "regular" && styled.css(["", ""], {
+      "fontWeight": "400"
+    });
   }, function (props) {
-    return props.$weight === "light" && styled.css(["font-weight:300;"]);
+    return props.$weight === "light" && styled.css(["", ""], {
+      "fontWeight": "300"
+    });
   }, function (props) {
-    return props.$weight === "medium" && styled.css(["font-weight:500;"]);
+    return props.$weight === "medium" && styled.css(["", ""], {
+      "fontWeight": "500"
+    });
   }, function (props) {
-    return props.$weight === "bold" && styled.css(["font-weight:700;"]);
+    return props.$weight === "bold" && styled.css(["", ""], {
+      "fontWeight": "700"
+    });
   });
   StyledTypography.displayName = "StyledTypography";
 
@@ -4596,10 +4630,22 @@
   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;padding:4px 10px 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)"
+  }, {
+    "lineHeight": "1.375"
+  }, {
+    "letterSpacing": "0.02em"
+  }, {
+    "fontWeight": "400"
+  }, 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;"]);
+    return props.$size === "big" && styled.css(["", " height:40px;"], {
+      "fontSize": "1rem"
+    });
   }, function (props) {
     return props.disabled ? styled.css(["", ""], {
       "cursor": "not-allowed",
@@ -4612,6 +4658,8 @@
     }, {
       "borderColor": "var(--color-primary)"
     });
+  }, {
+    "color": "var(--color-theme-transparent-500)"
   });
   StyledInput.displayName = "StyledInput";
 
@@ -7705,7 +7753,9 @@
   var StyledTextarea = styled__default["default"].textarea.withConfig({
     displayName: "Styles__StyledTextarea",
     componentId: "sc-m6jqw8-0"
-  })(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;padding:4px 10px 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{color:var(--color-theme-600);}", ""], FontStyle, BoxSizingStyle, function (props) {
+  })(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 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{color:var(--color-theme-600);}", ""], {
+    "fontSize": "0.875rem"
+  }, FontStyle, BoxSizingStyle, function (props) {
     return !props.disabled && styled.css(["&:hover{outline:none !important;", "}"], {
       "borderColor": "var(--color-primary)"
     });
@@ -9696,28 +9746,20 @@
   var StyledComboBox = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBox",
     componentId: "sc-5qvkpb-0"
-  })(["height:34px;border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;background-color:var(--input-background-color);cursor:text;", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
-    return props.$open && styled.css(["border-color:var(--color-primary);"]);
-  }, function (props) {
+  })(["position:relative;cursor:text;", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
     return props.$loading && styled.css(["cursor:progress;"]);
-  }, function (props) {
-    return props.$size == "small" && styled.css(["height:26px;"]);
-  }, function (props) {
-    return props.$size == "big" && styled.css(["height:42px;"]);
   });
   StyledComboBox.displayName = "StyledComboBox";
-  var StyledComboBoxWrapper = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledComboBoxWrapper",
+  var StyledComboBoxControls = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledComboBoxControls",
     componentId: "sc-5qvkpb-1"
-  })(["width:100%;height:100%;display:flex;align-items:center;", ""], function (props) {
-    return props.$loading && styled.css(["pointer-events:none;"]);
-  });
-  StyledComboBoxWrapper.displayName = "StyledComboBoxWrapper";
+  })(["position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;"]);
+  StyledComboBoxControls.displayName = "StyledComboBoxControls";
   var StyledIconDefaults = styled.css(["flex-shrink:0;cursor:pointer;"]);
   var StyledComboBoxCloseSmallIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
     displayName: "Styles__StyledComboBoxCloseSmallIcon",
     componentId: "sc-5qvkpb-2"
-  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxWrapper);
+  })(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBox);
   StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
   var StyledComboBoxCollapseExpandSingleIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
     displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
@@ -9729,7 +9771,9 @@
   var StyledComboBoxInput = styled__default["default"](Input).withConfig({
     displayName: "Styles__StyledComboBoxInput",
     componentId: "sc-5qvkpb-4"
-  })(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;"]);
+  })(["overflow:hidden;text-overflow:ellipsis;width:100%;padding-right:80px;", ":hover &{", "}"], StyledComboBox, {
+    "borderColor": "var(--color-primary)"
+  });
   StyledComboBoxInput.displayName = "StyledComboBoxInput";
   var StyledComboBoxList = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBoxList",
@@ -9741,7 +9785,7 @@
 
   var _excluded$1 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size"];
   var ComboBox = function ComboBox(_ref) {
-    var _formRef$current;
+    var _comboBoxRef$current;
 
     var _ref$options = _ref.options,
         options = _ref$options === void 0 ? [] : _ref$options,
@@ -9754,7 +9798,8 @@
         handleEmptyAction = _ref.handleEmptyAction,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        size = _ref.size,
+        _ref$size = _ref.size,
+        size = _ref$size === void 0 ? "regular" : _ref$size,
         prop = _objectWithoutProperties(_ref, _excluded$1);
 
     var selectedName = React.useMemo(function () {
@@ -9811,7 +9856,6 @@
         e.stopPropagation();
       }
     }, [open, selectedName]);
-    var formRef = React.useRef(null);
     React.useEffect(function () {
       open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
       !open && (childNode === null || childNode === void 0 ? void 0 : childNode.blur());
@@ -9872,29 +9916,26 @@
       className: "c-combo-box",
       $open: open,
       $loading: loading,
-      $size: size,
-      ref: comboBoxRef
-    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxWrapper, {
+      ref: comboBoxRef,
       onClick: onOpen,
-      onFocus: onOpen,
-      ref: formRef,
-      $loading: loading
+      onFocus: onOpen
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       ref: handleRef,
       value: loading && loadingText ? loadingText : value,
       onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       placeholder: placeholder,
-      disabled: disabled
-    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
+      disabled: disabled,
+      size: size
+    }), !disabled ? /*#__PURE__*/React__default["default"].createElement(StyledComboBoxControls, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
       onMouseDown: handleMouseDown,
       onClick: handleDeselect,
       variant: "text gray",
       size: "small"
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
       $open: open
-    })) : null), !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
-      anchorEl: formRef.current,
+    })) : null, !disabled ? /*#__PURE__*/React__default["default"].createElement(Popper, {
+      anchorEl: comboBoxRef.current,
       open: open,
       placement: "bottom",
       style: {
@@ -9904,7 +9945,7 @@
       noIsolation: true,
       allowPinchZoom: true
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxList, {
-      $width: (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.clientWidth
+      $width: (_comboBoxRef$current = comboBoxRef.current) === null || _comboBoxRef$current === void 0 ? void 0 : _comboBoxRef$current.clientWidth
     }, /*#__PURE__*/React__default["default"].createElement(Autocomplete, _extends({}, prop, {
       inputEl: childNode,
       selected: selected,