@activecollab/components 1.0.242 → 1.0.244

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,
@@ -654,13 +655,6 @@
         onKeyDown(event);
       }
     }, [disableCloseOnEsc, onClose, onKeyDown]);
-    React.useEffect(function () {
-      return function () {
-        typeof onClose === "function" && onClose();
-      };
-      // Dependency is empty because we only want to call onClose when component is unmounted
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     var handleClick = React.useCallback(function (event) {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       typeof onClick === "function" && onClick(event);
@@ -1215,6 +1209,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 +9207,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 +9252,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";
 
@@ -10447,12 +10473,13 @@
     }, [childNode, open]);
     var handleChange = React.useCallback(function (selectedValue) {
       if (forceCloseMenu) {
+        if (typeof onSelectClose === "function") onSelectClose();
         setOpen(false);
       }
       if (selectedValue !== selected) {
         onChange(selectedValue);
       }
-    }, [forceCloseMenu, selected, onChange]);
+    }, [forceCloseMenu, selected, onSelectClose, onChange]);
     var onClose = React.useCallback(function () {
       setOpen(false);
       if (onSelectClose) {
@@ -11129,13 +11156,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 +11227,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 +11243,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 +15359,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 +15446,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;