@activecollab/components 1.0.249 → 1.0.251

package/dist/index.js

@@ -3876,6 +3876,44 @@
   FolderOutlineIcon.displayName = "FolderOutlineIcon";
   var FolderOutlineIcon$1 = FolderOutlineIcon;
 
+  /**
+   * @component GiftIcon
+   * @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 (
+   *   <GiftIcon className="mr-2" />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var GiftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": "GiftIcon",
+      fill: "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M22 12v8a2 2 0 01-2 2H4a2 2 0 01-2-2v-8a1 1 0 01-1-1V8a2 2 0 012-2h3.17A3 3 0 019 2c1 0 1.88.5 2.43 1.24v-.01L12 4l.57-.77v.01C13.12 2.5 14 2 15 2a3 3 0 012.83 4H21a2 2 0 012 2v3a1 1 0 01-1 1zM4 20h7v-8H4v8zm16 0v-8h-7v8h7zM9 4a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM3 8v2h8V8H3zm10 0v2h8V8h-8z"
+    }));
+  });
+  GiftIcon.displayName = "GiftIcon";
+  var GiftIcon$1 = GiftIcon;
+
   /**
    * @component HelpIcon
    * @description
@@ -10378,6 +10416,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 +10538,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 +11291,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 +13894,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;
@@ -15555,6 +15621,7 @@
   exports.FolderMoveIcon = FolderMoveIcon$1;
   exports.FolderOutlineIcon = FolderOutlineIcon$1;
   exports.FromElement = FromElement;
+  exports.GiftIcon = GiftIcon$1;
   exports.GlobalAddButton = GlobalAddButton;
   exports.GlobalStyle = GlobalStyle;
   exports.Header = Header;