@activecollab/components 1.0.74 → 1.0.75

package/dist/index.js

@@ -9736,28 +9736,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",
@@ -9769,7 +9761,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",
@@ -9781,7 +9775,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,
@@ -9794,7 +9788,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 () {
@@ -9851,7 +9846,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());
@@ -9912,29 +9906,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: {
@@ -9944,7 +9935,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,