@activecollab/components 1.0.248 → 1.0.250

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

@@ -1 +1 @@
-{"version":3,"file":"OptionContent.js","names":["React","Avatar","StyledOptionIndicator","StyledOptionText","StyledAdditionalInfo","StyledOptionContentWrapper","OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n  StyledOptionIndicator,\n  StyledOptionText,\n  StyledAdditionalInfo,\n  StyledOptionContentWrapper,\n} from \"./Styles\";\n\ninterface OptionContentProps {\n  imageUrl?: string;\n  color?: string;\n  textColor?: string;\n  name: string;\n  additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n  imageUrl,\n  color,\n  textColor,\n  name,\n  additionalInfo,\n}) => {\n  return (\n    <StyledOptionContentWrapper>\n      {imageUrl || color ? (\n        <StyledOptionIndicator\n          className=\"c-option--label\"\n          backgroundColor={color}\n        >\n          {imageUrl ? (\n            <Avatar className=\"c-option--avatar\" url={imageUrl} />\n          ) : null}\n        </StyledOptionIndicator>\n      ) : null}\n      <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n        {name}\n      </StyledOptionText>\n      {additionalInfo ? (\n        <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n      ) : null}\n    </StyledOptionContentWrapper>\n  );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,oBAAoB,EACpBC,0BAA0B,QACrB,UAAU;AAUjB,OAAO,IAAMC,aAAqC,GAAG,SAAxCA,aAAqC,OAM5C;EAAA,IALJC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,cAAc,QAAdA,cAAc;EAEd,oBACE,oBAAC,0BAA0B,QACxBJ,QAAQ,IAAIC,KAAK,gBAChB,oBAAC,qBAAqB;IACpB,SAAS,EAAC,iBAAiB;IAC3B,eAAe,EAAEA;EAAM,GAEtBD,QAAQ,gBACP,oBAAC,MAAM;IAAC,SAAS,EAAC,kBAAkB;IAAC,GAAG,EAAEA;EAAS,EAAG,GACpD,IAAI,CACc,GACtB,IAAI,eACR,oBAAC,gBAAgB;IAAC,SAAS,EAAC,gBAAgB;IAAC,SAAS,EAAEE;EAAU,GAC/DC,IAAI,CACY,EAClBC,cAAc,gBACb,oBAAC,oBAAoB,QAAEA,cAAc,CAAwB,GAC3D,IAAI,CACmB;AAEjC,CAAC;AAEDL,aAAa,CAACM,WAAW,GAAG,eAAe"}
+{"version":3,"file":"OptionContent.js","names":["React","Avatar","StyledOptionIndicator","StyledOptionText","StyledAdditionalInfo","StyledOptionContentWrapper","MultiAvatar","OptionContent","imageUrl","color","textColor","name","additionalInfo","Array","isArray","displayName"],"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n  StyledOptionIndicator,\n  StyledOptionText,\n  StyledAdditionalInfo,\n  StyledOptionContentWrapper,\n} from \"./Styles\";\nimport { MultiAvatar } from \"../../MultiAvatar\";\n\ninterface OptionContentProps {\n  imageUrl?: string | string[];\n  color?: string;\n  textColor?: string;\n  name: string;\n  additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n  imageUrl,\n  color,\n  textColor,\n  name,\n  additionalInfo,\n}) => {\n  return (\n    <StyledOptionContentWrapper>\n      {imageUrl || color ? (\n        <StyledOptionIndicator\n          className=\"c-option--label\"\n          backgroundColor={color}\n        >\n          {imageUrl ? (\n            <>\n              {Array.isArray(imageUrl) ? (\n                <MultiAvatar\n                  className=\"c-option--multi-avatar\"\n                  url={imageUrl}\n                />\n              ) : (\n                <Avatar className=\"c-option--avatar\" url={imageUrl} />\n              )}\n            </>\n          ) : null}\n        </StyledOptionIndicator>\n      ) : null}\n      <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n        {name}\n      </StyledOptionText>\n      {additionalInfo ? (\n        <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n      ) : null}\n    </StyledOptionContentWrapper>\n  );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,oBAAoB,EACpBC,0BAA0B,QACrB,UAAU;AACjB,SAASC,WAAW,QAAQ,mBAAmB;AAU/C,OAAO,IAAMC,aAAqC,GAAG,SAAxCA,aAAqC,OAM5C;EAAA,IALJC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,cAAc,QAAdA,cAAc;EAEd,oBACE,oBAAC,0BAA0B,QACxBJ,QAAQ,IAAIC,KAAK,gBAChB,oBAAC,qBAAqB;IACpB,SAAS,EAAC,iBAAiB;IAC3B,eAAe,EAAEA;EAAM,GAEtBD,QAAQ,gBACP,0CACGK,KAAK,CAACC,OAAO,CAACN,QAAQ,CAAC,gBACtB,oBAAC,WAAW;IACV,SAAS,EAAC,wBAAwB;IAClC,GAAG,EAAEA;EAAS,EACd,gBAEF,oBAAC,MAAM;IAAC,SAAS,EAAC,kBAAkB;IAAC,GAAG,EAAEA;EAAS,EACpD,CACA,GACD,IAAI,CACc,GACtB,IAAI,eACR,oBAAC,gBAAgB;IAAC,SAAS,EAAC,gBAAgB;IAAC,SAAS,EAAEE;EAAU,GAC/DC,IAAI,CACY,EAClBC,cAAc,gBACb,oBAAC,oBAAoB,QAAEA,cAAc,CAAwB,GAC3D,IAAI,CACmB;AAEjC,CAAC;AAEDL,aAAa,CAACQ,WAAW,GAAG,eAAe"}

package/dist/index.js

@@ -9210,7 +9210,7 @@
   var StyledWrapper = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledWrapper",
     componentId: "sc-5x2tyd-0"
-  })(["display:inline-flex;position:relative;"]);
+  })(["display:inline-flex;position:relative;border-radius:100%;"]);
   var StyledAvatar = styled__default["default"].img.withConfig({
     displayName: "Styles__StyledAvatar",
     componentId: "sc-5x2tyd-1"
@@ -10378,6 +10378,119 @@
   })(["margin:0 0 0 5px;line-height:18px;flex-shrink:0;"]);
   StyledAdditionalInfo.displayName = "StyledAdditionalInfo";
 
+  var StyledMultiAvatarImg = styled.css(["width:inherit;height:inherit;"]);
+  var StyledMultiAvatarInner = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledMultiAvatarInner",
+    componentId: "sc-k6nldn-0"
+  })(["overflow:hidden;position:absolute;"]);
+  var StyledMultiAvatar = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledMultiAvatar",
+    componentId: "sc-k6nldn-1"
+  })(["", " border-radius:100%;position:relative;overflow:hidden;", " ", " ", ""], BoxSizingStyle, function (props) {
+    return props.$urlCount === 2 && styled.css(["", ":first-child{left:0;img{transform:translateX(-20%);}}", ":last-child{right:0;img{transform:translateX(-20%);}}"], StyledMultiAvatarInner, StyledMultiAvatarInner);
+  }, function (props) {
+    return props.$urlCount === 3 && styled.css(["", ":nth-child(1){left:0;img{transform:translateX(-20%);}}", ":nth-child(2){right:0;top:0;img{", "}}", ":nth-child(3){right:0;bottom:0;img{", "}}"], StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarImg);
+  }, function (props) {
+    return props.$urlCount > 3 && styled.css(["img{", "}", ":nth-child(1){left:0;}", ":nth-child(2){left:0;bottom:0;}", ":nth-child(3){right:0;top:0;}", ":nth-child(4){right:0;bottom:0;}"], StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner);
+  });
+  StyledMultiAvatar.displayName = "StyledMultiAvatar";
+  StyledMultiAvatarInner.displayName = "StyledMultiAvatarInner";
+
+  /**
+   * @component MultiAvatar
+   * @description
+   * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+   *
+   * @prop {url} - The image urls of the MultiAvatar.
+   * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.
+   * @prop {alt} - alt attributes of the imgs.
+   *
+   * @example
+   * <MultiAvatar
+   *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
+   *  alt={["Profile picture of John", "Profile picture of Sarah"]} />
+   *
+   * @example
+   * <MultiAvatar
+   *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
+   *  alt={["Profile picture of John", "Profile picture of Sarah"]}
+   * >
+   *  <Badge />
+   * </MultiAvatar>
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
+   * @see
+   * https://design.activecollab.com/docs/components/avatar
+   */
+  var MultiAvatar = function MultiAvatar(_ref) {
+    var url = _ref.url,
+      alt = _ref.alt,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      className = _ref.className,
+      children = _ref.children;
+    var setSize = React.useCallback(function (i) {
+      switch (url.length) {
+        case 1:
+          return {
+            width: "".concat(size, "px"),
+            height: "".concat(size, "px")
+          };
+        case 2:
+          return {
+            width: "".concat(size / 2, "px"),
+            height: "".concat(size, "px")
+          };
+        case 3:
+          if (i === 0) {
+            return {
+              width: "".concat(size / 2, "px"),
+              height: "".concat(size, "px")
+            };
+          } else {
+            return {
+              width: "".concat(size / 2, "px"),
+              height: "".concat(size / 2, "px")
+            };
+          }
+        default:
+          return {
+            width: "".concat(size / 2, "px"),
+            height: "".concat(size / 2, "px")
+          };
+      }
+    }, [size, url.length]);
+    var slicedUrl = React.useMemo(function () {
+      if ((url === null || url === void 0 ? void 0 : url.length) > 4) {
+        return url.slice(0, 4);
+      }
+      return url;
+    }, [url]);
+    return /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "tw-relative tw-inline-flex"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatar, {
+      style: {
+        width: "".concat(size, "px"),
+        height: "".concat(size, "px")
+      },
+      className: className,
+      $urlCount: url.length
+    }, slicedUrl.map(function (v, i) {
+      return /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatarInner, {
+        style: setSize(i),
+        className: "c-multi-avatar__wrapper",
+        key: "avatar_".concat(i)
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        src: v,
+        alt: alt && alt[i] ? alt[i] : "avatar_".concat(i),
+        width: size,
+        height: size
+      }));
+    })), children);
+  };
+  MultiAvatar.displayName = "MultiAvatar";
+
   var OptionContent = function OptionContent(_ref) {
     var imageUrl = _ref.imageUrl,
       color = _ref.color,
@@ -10387,10 +10500,13 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledOptionContentWrapper, null, imageUrl || color ? /*#__PURE__*/React__default["default"].createElement(StyledOptionIndicator, {
       className: "c-option--label",
       backgroundColor: color
-    }, imageUrl ? /*#__PURE__*/React__default["default"].createElement(Avatar, {
+    }, imageUrl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Array.isArray(imageUrl) ? /*#__PURE__*/React__default["default"].createElement(MultiAvatar, {
+      className: "c-option--multi-avatar",
+      url: imageUrl
+    }) : /*#__PURE__*/React__default["default"].createElement(Avatar, {
       className: "c-option--avatar",
       url: imageUrl
-    }) : null) : null, /*#__PURE__*/React__default["default"].createElement(StyledOptionText, {
+    })) : null) : null, /*#__PURE__*/React__default["default"].createElement(StyledOptionText, {
       className: "c-option--text",
       textColor: textColor
     }, name), additionalInfo ? /*#__PURE__*/React__default["default"].createElement(StyledAdditionalInfo, null, additionalInfo) : null);
@@ -11137,119 +11253,6 @@
   };
   MenuSelector.displayName = "MenuSelector";
 
-  var StyledMultiAvatarImg = styled.css(["width:inherit;height:inherit;"]);
-  var StyledMultiAvatarInner = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledMultiAvatarInner",
-    componentId: "sc-k6nldn-0"
-  })(["overflow:hidden;position:absolute;"]);
-  var StyledMultiAvatar = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledMultiAvatar",
-    componentId: "sc-k6nldn-1"
-  })(["", " border-radius:100%;position:relative;overflow:hidden;", " ", " ", ""], BoxSizingStyle, function (props) {
-    return props.$urlCount === 2 && styled.css(["", ":first-child{left:0;img{transform:translateX(-20%);}}", ":last-child{right:0;img{transform:translateX(-20%);}}"], StyledMultiAvatarInner, StyledMultiAvatarInner);
-  }, function (props) {
-    return props.$urlCount === 3 && styled.css(["", ":nth-child(1){left:0;img{transform:translateX(-20%);}}", ":nth-child(2){right:0;top:0;img{", "}}", ":nth-child(3){right:0;bottom:0;img{", "}}"], StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarImg);
-  }, function (props) {
-    return props.$urlCount > 3 && styled.css(["img{", "}", ":nth-child(1){left:0;}", ":nth-child(2){left:0;bottom:0;}", ":nth-child(3){right:0;top:0;}", ":nth-child(4){right:0;bottom:0;}"], StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner);
-  });
-  StyledMultiAvatar.displayName = "StyledMultiAvatar";
-  StyledMultiAvatarInner.displayName = "StyledMultiAvatarInner";
-
-  /**
-   * @component MultiAvatar
-   * @description
-   * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.
-   *
-   * @prop {url} - The image urls of the MultiAvatar.
-   * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.
-   * @prop {alt} - alt attributes of the imgs.
-   *
-   * @example
-   * <MultiAvatar
-   *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
-   *  alt={["Profile picture of John", "Profile picture of Sarah"]} />
-   *
-   * @example
-   * <MultiAvatar
-   *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
-   *  alt={["Profile picture of John", "Profile picture of Sarah"]}
-   * >
-   *  <Badge />
-   * </MultiAvatar>
-   *
-   * @see
-   * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
-   * @see
-   * https://design.activecollab.com/docs/components/avatar
-   */
-  var MultiAvatar = function MultiAvatar(_ref) {
-    var url = _ref.url,
-      alt = _ref.alt,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 24 : _ref$size,
-      className = _ref.className,
-      children = _ref.children;
-    var setSize = React.useCallback(function (i) {
-      switch (url.length) {
-        case 1:
-          return {
-            width: "".concat(size, "px"),
-            height: "".concat(size, "px")
-          };
-        case 2:
-          return {
-            width: "".concat(size / 2, "px"),
-            height: "".concat(size, "px")
-          };
-        case 3:
-          if (i === 0) {
-            return {
-              width: "".concat(size / 2, "px"),
-              height: "".concat(size, "px")
-            };
-          } else {
-            return {
-              width: "".concat(size / 2, "px"),
-              height: "".concat(size / 2, "px")
-            };
-          }
-        default:
-          return {
-            width: "".concat(size / 2, "px"),
-            height: "".concat(size / 2, "px")
-          };
-      }
-    }, [size, url.length]);
-    var slicedUrl = React.useMemo(function () {
-      if ((url === null || url === void 0 ? void 0 : url.length) > 4) {
-        return url.slice(0, 4);
-      }
-      return url;
-    }, [url]);
-    return /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "tw-relative tw-inline-flex"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatar, {
-      style: {
-        width: "".concat(size, "px"),
-        height: "".concat(size, "px")
-      },
-      className: className,
-      $urlCount: url.length
-    }, slicedUrl.map(function (v, i) {
-      return /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatarInner, {
-        style: setSize(i),
-        className: "c-multi-avatar__wrapper",
-        key: "avatar_".concat(i)
-      }, /*#__PURE__*/React__default["default"].createElement("img", {
-        src: v,
-        alt: alt && alt[i] ? alt[i] : "avatar_".concat(i),
-        width: size,
-        height: size
-      }));
-    })), children);
-  };
-  MultiAvatar.displayName = "MultiAvatar";
-
   var StyledTextarea = styled__default["default"].textarea.withConfig({
     displayName: "Styles__StyledTextarea",
     componentId: "sc-m6jqw8-0"
@@ -13853,6 +13856,31 @@
           variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
         }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
       }
+      if (type === "single" && selected) {
+        var optionItem;
+        options.forEach(function (option) {
+          if (isOptionGroup(option)) {
+            optionItem = option.options.find(function (child) {
+              return child.id === selected;
+            });
+          } else if (!optionItem && option.id === selected) {
+            optionItem = option;
+          }
+        });
+        if (optionItem && optionItem.image) {
+          var avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
+          if (Array.isArray(optionItem.image)) {
+            return /*#__PURE__*/React__default["default"].createElement(MultiAvatar, {
+              url: optionItem.image,
+              size: avatarSize
+            });
+          }
+          return /*#__PURE__*/React__default["default"].createElement(Avatar, {
+            url: optionItem.image,
+            size: avatarSize
+          });
+        }
+      }
       return undefined;
     }, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
     var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;