@activecollab/components 1.0.241 → 1.0.243

package/dist/index.js

@@ -288,6 +288,7 @@
    * )
    * @see
    * https://system.activecollab.com/?path=/story/components-button-indicators-button--button
+   * https://design.activecollab.com/docs/components/button
    */
   var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
@@ -1215,6 +1216,7 @@
    * )
    * @see
    * https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button
+   * https://design.activecollab.com/docs/components/button
    */
 
   var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -9212,15 +9214,44 @@
   };
   Signifier.displayName = "Signifier";
 
+  var StyledWrapper = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledWrapper",
+    componentId: "sc-5x2tyd-0"
+  })(["display:inline-flex;position:relative;"]);
   var StyledAvatar = styled__default["default"].img.withConfig({
     displayName: "Styles__StyledAvatar",
-    componentId: "sc-5x2tyd-0"
-  })(["", ""], {
-    "objectFit": "cover",
-    "borderRadius": "9999px"
+    componentId: "sc-5x2tyd-1"
+  })(["border-radius:100%;object-fit:cover;block-size:", ";inline-size:", ";"], function (props) {
+    return props.size + "px";
+  }, function (props) {
+    return props.size + "px";
   });
 
-  var _excluded$I = ["url", "alt", "size", "className"];
+  var _excluded$I = ["url", "alt", "size", "className", "children"];
+  /**
+   * @component Avatar
+   * @description
+   * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+   *
+   * @prop {url} - The image url of the Avatar.
+   * @prop {size} - controls the size of an Avatar (width and height) in pixels.
+   * @prop {alt} - alt attribute of the img.
+   *
+   * @example
+   * <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
+   *
+   * @example
+   * <Avatar
+   *   url="https://faces-img.xcdn.link/image-lorem-face-954.jpg"
+   *   alt="Profile picture of John">
+   *   <Badge size={8} backgroundColor="green" position="bottom-left" />
+   * </Avatar>
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
+   * @see
+   * https://design.activecollab.com/docs/components/avatar
+   */
   var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var url = _ref.url,
       _ref$alt = _ref.alt,
@@ -9228,15 +9259,17 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
       className = _ref.className,
+      children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$I);
-    return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({}, rest, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+      className: className
+    }, children, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
+      size: size,
       ref: ref,
       src: url,
       alt: alt,
-      width: size,
-      height: size,
-      className: className
-    }));
+      role: "img"
+    }, rest)));
   });
   Avatar.displayName = "Avatar";
 
@@ -9997,14 +10030,14 @@
             result = [].concat(_toConsumableArray(selectedOptions), [id]);
           }
         } else {
-          if (clearInputOnSelect && inputEl) {
-            inputEl.value = "";
-            inputEl.dispatchEvent(new Event("change", {
-              bubbles: true
-            }));
-          }
           result = id;
         }
+        if (clearInputOnSelect && inputEl) {
+          inputEl.value = "";
+          inputEl.dispatchEvent(new Event("change", {
+            bubbles: true
+          }));
+        }
         setFilter("");
       } else {
         if (typeof handleDefaultOptionChange === "function") {
@@ -11129,13 +11162,40 @@
   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,
-      _ref$alt = _ref.alt,
-      alt = _ref$alt === void 0 ? "Avatar Image" : _ref$alt,
+      alt = _ref.alt,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      className = _ref.className;
+      className = _ref.className,
+      children = _ref.children;
     var setSize = React.useCallback(function (i) {
       switch (url.length) {
         case 1:
@@ -11173,7 +11233,9 @@
       }
       return url;
     }, [url]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatar, {
+    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")
@@ -11187,11 +11249,11 @@
         key: "avatar_".concat(i)
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         src: v,
-        alt: alt[i] ? alt[i] : "avatar_".concat(i),
+        alt: alt && alt[i] ? alt[i] : "avatar_".concat(i),
         width: size,
         height: size
       }));
-    }));
+    })), children);
   };
   MultiAvatar.displayName = "MultiAvatar";
 
@@ -15303,6 +15365,68 @@
   });
   Wizard.displayName = "Wizard";
 
+  var StyledBadge = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledBadge",
+    componentId: "sc-6o8do5-0"
+  })(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";position:absolute;pointer-events:none;z-index:1;", " ", " ", " ", ""], function (props) {
+    return props.backgroundColor;
+  }, function (props) {
+    return props.dimension + "px";
+  }, function (props) {
+    return props.dimension + "px";
+  }, function (_ref) {
+    var position = _ref.position;
+    return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
+  }, function (_ref2) {
+    var position = _ref2.position;
+    return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
+  }, function (_ref3) {
+    var position = _ref3.position;
+    return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
+  }, function (_ref4) {
+    var position = _ref4.position;
+    return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
+  });
+
+  /**
+   * @component Badge
+   * @description
+   * In some products, you might need to show a badge on the right corner of the avatar.
+   * We call this a badge. Here's an example that shows if the user is online.
+   *
+   * @prop {position} - dictates the position of a badge.
+   * @prop {dimension} - controls the size of a badge (width and height) in pixels.
+   * @prop {backgroundColor} - background-color of a badge.
+   * @prop {isVisible} - dictates if badge should be visible or not.
+   *
+   * @example
+   * <IconButton variant="text gray" size="big">
+   *   <BellOffIcon />
+   *   <Badge position="top-right" backgroundColor="red" dimension={16} />
+   * </IconButton>
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
+   */
+  var Badge = function Badge(_ref) {
+    var _ref$dimension = _ref.dimension,
+      dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
+      className = _ref.className,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? "bottom-left" : _ref$position,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
+      _ref$isVisible = _ref.isVisible,
+      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    return isVisible ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
+      className: classNames__default["default"]("c-badge", className),
+      dimension: dimension,
+      position: position,
+      backgroundColor: backgroundColor,
+      role: "status"
+    }) : null;
+  };
+
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
   exports.AccordionItem = AccordionItem;
@@ -15328,6 +15452,7 @@
   exports.Autocomplete = Autocomplete;
   exports.Avatar = Avatar;
   exports.BackLink = BackLink;
+  exports.Badge = Badge;
   exports.BellOffIcon = BellOffIcon$1;
   exports.BellOffSmallIcon = BellOffSmallIcon$1;
   exports.BillingIcon = BillingIcon$1;