@activecollab/components 1.0.181 → 1.0.182

package/dist/esm/components/Select/OptionContent/Styles.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 export declare const StyledOptionContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledOptionIndicator: import("styled-components").StyledComponent<"div", any, {
     backgroundColor?: string | undefined;
 }, never>;
-export declare const StyledOptionText: import("styled-components").StyledComponent<"span", any, {
+export declare const StyledOptionText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Typography").IBodyProps & Omit<import("../../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {
     textColor?: string | undefined;
 }, never>;
 export declare const StyledAdditionalInfo: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/esm/components/Select/OptionContent/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAYjC,CAAC;AAIF,eAAO,MAAM,gBAAgB;;SAU5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAIhC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAYjC,CAAC;AAIF,eAAO,MAAM,gBAAgB;;SAU5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAIhC,CAAC"}

package/dist/esm/components/Select/OptionContent/Styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { Body2 } from "../../Typography";
 export var StyledOptionContentWrapper = styled.div.withConfig({
   displayName: "Styles__StyledOptionContentWrapper",
   componentId: "sc-6fiqyy-0"
@@ -11,7 +12,7 @@ export var StyledOptionIndicator = styled.div.withConfig({
   return props.backgroundColor && !props.children && css(["background-color:", ";"], props.backgroundColor);
 });
 StyledOptionIndicator.displayName = "StyledOptionIndicator";
-export var StyledOptionText = styled.span.withConfig({
+export var StyledOptionText = styled(Body2).withConfig({
   displayName: "Styles__StyledOptionText",
   componentId: "sc-6fiqyy-2"
 })(["", " flex-grow:1;line-height:28px;padding-right:10px;", ""], {

package/dist/esm/components/Select/OptionContent/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["styled","css","StyledOptionContentWrapper","div","displayName","StyledOptionIndicator","props","backgroundColor","children","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,OAAO,IAAMC,0BAA0B,GAAGF,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,0HAAhC;AAUPD,0BAA0B,CAACE,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,IAEAP,GAFA,6BAGsBK,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,OAAO,IAAMK,gBAAgB,GAAGT,MAAM,CAACU,IAAV;AAAA;AAAA;AAAA,kEACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAKzB,UAACJ,KAAD;AAAA,SACAA,KAAK,CAACK,SAAN,IACAV,GADA,kBAEWK,KAAK,CAACK,SAFjB,CADA;AAAA,CALyB,CAAtB;AAYPF,gBAAgB,CAACL,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMQ,oBAAoB,GAAGZ,MAAM,CAACU,IAAV;AAAA;AAAA;AAAA,wDAA1B;AAMPE,oBAAoB,CAACR,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionContentWrapper = styled.div`\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  align-items: center;\n  height: 100%;\n  flex-grow: 1;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n  height: 24px;\n  width: 24px;\n  border-radius: 100%;\n  margin-right: 8px;\n  flex-shrink: 0;\n  ${(props) =>\n    props.backgroundColor &&\n    !props.children &&\n    css`\n      background-color: ${props.backgroundColor};\n    `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n  ${tw`tw-truncate`}\n  flex-grow: 1;\n  line-height: 28px;\n  padding-right: 10px;\n  ${(props) =>\n    props.textColor &&\n    css`\n      color: ${props.textColor};\n    `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n  margin: 0 0 0 5px;\n  line-height: 18px;\n  flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["styled","css","Body2","StyledOptionContentWrapper","div","displayName","StyledOptionIndicator","props","backgroundColor","children","StyledOptionText","textColor","StyledAdditionalInfo","span"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,KAAT,QAAsB,kBAAtB;AAEA,OAAO,IAAMC,0BAA0B,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,0HAAhC;AAUPD,0BAA0B,CAACE,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMC,qBAAqB,GAAGN,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,IAEAR,GAFA,6BAGsBM,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,OAAO,IAAMK,gBAAgB,GAAGV,MAAM,CAACE,KAAD,CAAT;AAAA;AAAA;AAAA,kEACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAKzB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,IACAV,GADA,kBAEWM,KAAK,CAACI,SAFjB,CADA;AAAA,CALyB,CAAtB;AAYPD,gBAAgB,CAACL,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMO,oBAAoB,GAAGZ,MAAM,CAACa,IAAV;AAAA;AAAA;AAAA,wDAA1B;AAMPD,oBAAoB,CAACP,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../../Typography\";\n\nexport const StyledOptionContentWrapper = styled.div`\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  align-items: center;\n  height: 100%;\n  flex-grow: 1;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n  height: 24px;\n  width: 24px;\n  border-radius: 100%;\n  margin-right: 8px;\n  flex-shrink: 0;\n  ${(props) =>\n    props.backgroundColor &&\n    !props.children &&\n    css`\n      background-color: ${props.backgroundColor};\n    `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled(Body2)<{ textColor?: string }>`\n  ${tw`tw-truncate`}\n  flex-grow: 1;\n  line-height: 28px;\n  padding-right: 10px;\n  ${(props) =>\n    props.textColor &&\n    css`\n      color: ${props.textColor};\n    `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n  margin: 0 0 0 5px;\n  line-height: 18px;\n  flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}

package/dist/index.js

@@ -7667,7 +7667,7 @@
     return props.backgroundColor && !props.children && styled.css(["background-color:", ";"], props.backgroundColor);
   });
   StyledOptionIndicator.displayName = "StyledOptionIndicator";
-  var StyledOptionText = styled__default["default"].span.withConfig({
+  var StyledOptionText = styled__default["default"](Body2).withConfig({
     displayName: "Styles__StyledOptionText",
     componentId: "sc-6fiqyy-2"
   })(["", " flex-grow:1;line-height:28px;padding-right:10px;", ""], {
@@ -10804,7 +10804,7 @@
   var ChipContainer = styled__default["default"].div.withConfig({
     displayName: "Styles__ChipContainer",
     componentId: "sc-7s0bd1-0"
-  })(["min-width:44px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], {
+  })(["min-width:44px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "{", " ", "}", " ", " ", " ", " ", " ", " ", ""], {
     "height": "1.5rem"
   }, {
     "borderRadius": "0.25rem"
@@ -10828,6 +10828,21 @@
     "fontWeight": "400"
   }, {
     "backgroundColor": "var(--color-theme-400)"
+  }, StyledTypography, {
+    "flex": "1 1 0%"
+  }, {
+    "overflow": "hidden",
+    "textOverflow": "ellipsis",
+    "whiteSpace": "nowrap"
+  }, function (_ref) {
+    var $color = _ref.$color;
+    return $color && styled.css(["", "{color:", ";}"], StyledTypography, $color);
+  }, function (_ref2) {
+    var $isLabel = _ref2.$isLabel;
+    return $isLabel && styled.css(["", "{color:#303037;}"], StyledTypography);
+  }, function (_ref3) {
+    var $backgroundColor = _ref3.$backgroundColor;
+    return $backgroundColor && styled.css(["background-color:", ";"], $backgroundColor);
   }, function (props) {
     return props.$showClose ? null : styled.css(["", ""], {
       "paddingRight": "0.375rem"
@@ -10854,12 +10869,14 @@
   var ChipTrigger = styled__default["default"](Trigger).withConfig({
     displayName: "Styles__ChipTrigger",
     componentId: "sc-7s0bd1-2"
-  })(["", " ", " ", " &:hover{", "}", " ", " ", ""], {
+  })(["", " ", " ", " ", " &:hover{", "}", " ", " ", ""], {
     "display": "flex"
   }, {
     "alignItems": "center"
   }, {
     "justifyContent": "center"
+  }, {
+    "marginLeft": "0.125rem"
   }, {
     "backgroundColor": "var(--color-theme-transparent-400)"
   }, function (props) {
@@ -10878,17 +10895,25 @@
   });
   ChipCloseIcon.displayName = "ChipCloseIcon";
 
-  var _excluded$7 = ["leftAdornment", "label", "onClose", "size"];
+  var _excluded$7 = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "isLabel"];
   var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var leftAdornment = _ref.leftAdornment,
         label = _ref.label,
         onClose = _ref.onClose,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? "regular" : _ref$size,
+        color = _ref.color,
+        backgroundColor = _ref.backgroundColor,
+        closeClassName = _ref.closeClassName,
+        isLabel = _ref.isLabel,
         rest = _objectWithoutProperties(_ref, _excluded$7);
 
     var showClose = typeof onClose === "function";
     var variant = React.useMemo(function () {
+      if (isLabel) {
+        return "Caption 2";
+      }
+
       switch (size) {
         case "regular":
           return "Body 2";
@@ -10899,20 +10924,24 @@
         default:
           return "Caption 1";
       }
-    }, [size]);
+    }, [isLabel, size]);
     return /*#__PURE__*/React__default["default"].createElement(ChipContainer, _extends({}, rest, {
       ref: ref,
       $size: size,
-      $showClose: showClose
+      $showClose: showClose,
+      $color: color,
+      $backgroundColor: backgroundColor,
+      $isLabel: isLabel,
+      "data-testid": "chip-container"
     }), leftAdornment, /*#__PURE__*/React__default["default"].createElement(Typography, {
       variant: variant,
-      className: "tw-flex-1 tw-truncate"
+      "data-testid": "chip-typography"
     }, label), showClose ? /*#__PURE__*/React__default["default"].createElement(ChipTrigger, {
       $size: size,
       onClick: onClose,
-      className: "tw-ml-0.5"
+      className: closeClassName
     }, /*#__PURE__*/React__default["default"].createElement(ChipCloseIcon, {
-      fill: "currentColor"
+      fill: color ? color : "currentColor"
     })) : null);
   });
   Chip.displayName = "Chip";
@@ -10950,7 +10979,7 @@
     return condition ? wrap(children) : children;
   };
 
-  var _excluded$6 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName"];
+  var _excluded$6 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
 
@@ -10981,6 +11010,7 @@
         _ref$inPortal = _ref.inPortal,
         inPortal = _ref$inPortal === void 0 ? false : _ref$inPortal,
         inputWrapperClassName = _ref.inputWrapperClassName,
+        scrollWrapper = _ref.scrollWrapper,
         prop = _objectWithoutProperties(_ref, _excluded$6);
 
     var selectedName = React.useMemo(function () {
@@ -11144,24 +11174,39 @@
           "marginRight": "0.125rem"
         }
       })) : undefined;
+
+      var onClose = function onClose(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (Array.isArray(selected) && selected.includes(option.id)) {
+          if (typeof onChange === "function") {
+            var newSelected = selected.filter(function (item) {
+              return item !== option.id;
+            });
+            onChange(newSelected);
+          }
+        }
+      };
+
+      var showOnClose = true;
+
+      if (disabled) {
+        showOnClose = false;
+      }
+
+      if (option.color) {
+        showOnClose = false;
+      }
+
       return /*#__PURE__*/React__default["default"].createElement(Chip, {
         className: "c-combo-box-chip",
         leftAdornment: leftAdornment,
         label: option.name,
         key: index,
-        onClose: !disabled ? function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          if (Array.isArray(selected) && selected.includes(option.id)) {
-            if (typeof onChange === "function") {
-              var newSelected = selected.filter(function (item) {
-                return item !== option.id;
-              });
-              onChange(newSelected);
-            }
-          }
-        } : undefined,
+        backgroundColor: option.color,
+        isLabel: Boolean(option.color),
+        onClose: showOnClose ? onClose : undefined,
         size: size
       });
     }, [disabled, onChange, renderChip, selected, size]);
@@ -11222,7 +11267,9 @@
 
         (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
       },
-      $_css3: autoSize === "auto" ? "auto" : undefined
+      $_css3: autoSize === "auto" ? "auto" : undefined,
+      $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
+      $_css5: autoSize === "auto" && scrollWrapper ? "80px" : undefined
     }, /*#__PURE__*/React__default["default"].createElement(StyledChipWrapper, {
       $autoSize: autoSize,
       $open: open,
@@ -11325,8 +11372,12 @@
   var _StyledStyledInputWrapper = styled__default["default"](StyledInputWrapper).withConfig({
     displayName: "ComboBox___StyledStyledInputWrapper",
     componentId: "sc-uvsz9l-2"
-  })(["display:flex;justify-content:space-between;flex:1;height:", ";"], function (p) {
+  })(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], function (p) {
     return p.$_css3;
+  }, function (p) {
+    return p.$_css4;
+  }, function (p) {
+    return p.$_css5;
   });
 
   var _StyledTrigger = styled__default["default"](Trigger).withConfig({
@@ -11969,7 +12020,7 @@
   })(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref4) {
     var $renderAs = _ref4.$renderAs,
         $width = _ref4.$width;
-    return $renderAs === "list" && styled.css(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "unset" : 1);
+    return $renderAs === "list" && styled.css(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "initial" : 1);
   }, function (props) {
     return props.$renderAs === "list" && props.$order && styled.css(["order:", ";"], props.$order);
   }, function (props) {
@@ -12072,6 +12123,7 @@
     var _useContext = React.useContext(EntityGroupContext),
         renderAs = _useContext.renderAs;
 
+    var classSuffix = "c-entity-card-".concat(renderAs);
     var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
     var Component = as || Card;
     return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, _extends({
@@ -12079,7 +12131,7 @@
       $renderAs: renderAs,
       $background: background,
       paperType: paperType,
-      className: className,
+      className: classNames__default["default"]("c-entity-card", classSuffix, className),
       $isCollection: isCollection
     }, rest, {
       ref: ref
@@ -12098,8 +12150,9 @@
     var _useContext = React.useContext(EntityGroupContext),
         renderAs = _useContext.renderAs;
 
+    var classSuffix = "c-entity-property-".concat(renderAs);
     return /*#__PURE__*/React__default["default"].createElement(StyledEntityProperty, _extends({
-      className: classNames__default["default"]("c-entity-property", className)
+      className: classNames__default["default"]("c-entity-property", classSuffix, className)
     }, props, {
       $order: listOrder,
       $width: listWidth,