@activecollab/components 2.0.137 → 2.0.139

package/dist/index.js

@@ -7275,6 +7275,44 @@
   SortListIcon.displayName = "SortListIcon";
   var SortListIcon$1 = SortListIcon;
 
+  /**
+   * @component SortSmallIcon
+   * @description
+   *
+   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+   * The Icon component is
+   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+   *
+   *
+   * @example
+   * return (
+   *   <SortSmallIcon className="mr-2" />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var SortSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 10,
+      height: 10,
+      viewBox: "0 0 10 10",
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": "SortSmallIcon",
+      fill: "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10 1v2H0V1h10zM7 4v2H0V4h7zM4 7v2H0V7h4z"
+    }));
+  });
+  SortSmallIcon.displayName = "SortSmallIcon";
+  var SortSmallIcon$1 = SortSmallIcon;
+
   /**
    * @component StarOutlineIcon
    * @description
@@ -17043,7 +17081,7 @@
   var StyledChipWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledChipWrapper",
     componentId: "sc-5qvkpb-4"
-  })(["", ";", ";", ";overflow:", ";", " ", ""], {
+  })(["", ";", ";", ";", " ", " ", ""], {
     "display": "flex"
   }, {
     "gap": "0.25rem"
@@ -17051,7 +17089,7 @@
     "flex": "1 1 0%"
   }, function (_ref2) {
     var $open = _ref2.$open;
-    return $open ? "auto" : "hidden";
+    return !$open && styled.css(["overflow:hidden;"]);
   }, function (_ref3) {
     var $autoSize = _ref3.$autoSize;
     return $autoSize === "auto" && styled.css(["", ";", ";"], {
@@ -17197,6 +17235,12 @@
   Chip.displayName = "Chip";
 
   var _excluded$k = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue"];
+  var sizeMap = {
+    small: 18,
+    regular: 24,
+    big: 30,
+    biggest: 40
+  };
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
     var _ref$options = _ref.options,
@@ -17502,12 +17546,12 @@
         (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.click();
       },
       $_css3: autoSize === "auto" ? "auto" : undefined,
-      $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
-      $_css5: autoSize === "auto" && scrollWrapper ? "80px" : undefined
-    }, /*#__PURE__*/React__default["default"].createElement(StyledChipWrapper, {
+      $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined
+    }, /*#__PURE__*/React__default["default"].createElement(_StyledStyledChipWrapper, {
       $autoSize: autoSize,
       $open: open,
-      ref: chipWrapper
+      ref: chipWrapper,
+      $_css5: autoSize === "auto" && scrollWrapper ? sizeMap[size] * 3 + 8 + "px" : undefined
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
       className: "c-combo-box-input",
       onBlur: handleBlur,
@@ -17613,16 +17657,20 @@
   var _StyledStyledInputWrapper = styled__default["default"](StyledInputWrapper).withConfig({
     displayName: "ComboBox___StyledStyledInputWrapper",
     componentId: "sc-uvsz9l-2"
-  })(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], function (p) {
+  })(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";"], function (p) {
     return p.$_css3;
   }, function (p) {
     return p.$_css4;
-  }, function (p) {
+  });
+  var _StyledStyledChipWrapper = styled__default["default"](StyledChipWrapper).withConfig({
+    displayName: "ComboBox___StyledStyledChipWrapper",
+    componentId: "sc-uvsz9l-3"
+  })(["max-height:", ";"], function (p) {
     return p.$_css5;
   });
   var _StyledTrigger = styled__default["default"](Trigger).withConfig({
     displayName: "ComboBox___StyledTrigger",
-    componentId: "sc-uvsz9l-3"
+    componentId: "sc-uvsz9l-4"
   })(["display:flex;justify-content:center;"]);
 
   var StyledText = styled__default["default"](Body2).withConfig({
@@ -20261,6 +20309,7 @@
   exports.SortGeneralIcon = SortGeneralIcon$1;
   exports.SortIcon = SortIcon$1;
   exports.SortListIcon = SortListIcon$1;
+  exports.SortSmallIcon = SortSmallIcon$1;
   exports.SpinnerLoader = SpinnerLoader;
   exports.StarIcon = StarIcon$1;
   exports.StarOutlineIcon = StarOutlineIcon$1;