@luscii-healthtech/web-ui 30.2.0 → 30.3.1

package/dist/components/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-type AvatarColor = "primary";
+type AvatarColor = "primary" | "slate";
 type AvatarSize = "large" | "medium" | "small" | "xsmall";
 type Props = {
     color?: AvatarColor;
@@ -20,6 +20,11 @@ type Props = {
      */
     defaultImage?: string;
     className?: string;
+    /**
+     * Sometimes avatars are rendered in a group. Setting this to `true`
+     * makes it so that the avatars overlap each other a bit, as designed.
+     */
+    applyGroupOffset?: boolean;
 };
-export declare const Avatar: ({ color, size, src, alt, defaultImage, initials, className, }: Props) => React.JSX.Element;
+export declare const Avatar: ({ color, size, applyGroupOffset, src, alt, defaultImage, initials, className, }: Props) => React.JSX.Element;
 export {};

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { StackProps } from "../Stack/Stack";
+export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & StackProps<C> & {
+    as?: C;
+    children?: React.ReactNode;
+    /**
+     * In a group each avatar receives a border that
+     * matches the background the group is on. This to
+     * create some separation between the avatars.
+     * In case your background is not white, you might
+     * want to specify a different color.
+     *
+     * This color will be added to a Tailwind class in
+     * the form of `ui-outline-{outlineColor}`.
+     */
+    outlineColor?: "surface" | "slate-50" | "slate-100" | "white";
+    /**
+     * The maximum number of avatars to show in the group, before
+     * we render an extra element that shows there are more avatars.
+     *
+     * @default 3
+     */
+    maxAvatars?: number;
+    /**
+     * The label to show when there are more avatars than the
+     * `maxAvatars` prop.
+     * This function receives the amount of avatars that are not shown.
+     */
+    moreAvatarsLabel?: (avatarsNotShownCount: number) => React.ReactNode;
+};
+export declare const AvatarGroup: <C extends React.ElementType<any>>(props: Props<C>) => React.JSX.Element;

package/dist/components/Stack/Stack.d.ts

@@ -1,6 +1,7 @@
 import React, { ComponentProps } from "react";
 import { SIZES } from "../../system/Sizes";
 import { Box } from "../Box/Box";
+export { Props as StackProps };
 type Size = keyof typeof SIZES;
 type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
     as?: C;
@@ -42,4 +43,3 @@ type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
     className?: string;
 };
 export declare const Stack: <C extends React.ElementType = "div">(props: Props<C> & ComponentProps<typeof Box>) => React.JSX.Element;
-export {};

package/dist/components/Text/Text.d.ts

@@ -30,6 +30,11 @@ export declare const allowedColors: {
     readonly white: "ui-text-white";
     readonly "blue-800": "ui-text-primary";
     readonly current: "ui-text-current";
+    /**
+     * Semantic colors
+     */
+    readonly "on-surface": "ui-text-on-surface";
+    readonly "on-surface-variant": "ui-text-on-surface-variant";
 };
 declare const allowedHoverColors: {
     readonly "blue-900": "hover:ui-text-primary-dark";

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { type ModalSize, type ModalBaseProps, } from "./components/Modal/ModalBa
 export { type ModalHeaderProps } from "./components/Modal/ModalHeader";
 export { type ModalFooterProps, type ModalFooterLeadingComponent, type ModalFooterTrailingComponents, } from "./components/Modal/ModalFooter";
 export { Avatar } from "./components/Avatar/Avatar";
+export { AvatarGroup } from "./components/Avatar/AvatarGroup";
 export { default as Badge } from "./components/Badge/Badge";
 export { type BaseButtonProps as NonPrimaryButtonProps, type ButtonWithPendingStateProps as PrimaryButtonProps, type ButtonDefinition, } from "./components/ButtonV2/ButtonProps.type";
 export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";

package/dist/index.development.js

@@ -975,7 +975,12 @@ const allowedColors = {
   amber: "ui-text-yellow-800",
   white: "ui-text-white",
   "blue-800": "ui-text-primary",
-  current: "ui-text-current"
+  current: "ui-text-current",
+  /**
+   * Semantic colors
+   */
+  "on-surface": "ui-text-on-surface",
+  "on-surface-variant": "ui-text-on-surface-variant"
 };
 const allowedHoverColors = {
   "blue-900": "hover:ui-text-primary-dark",
@@ -2537,7 +2542,7 @@ function checkImageValidity(src) {
     image.src = src;
   });
 }
-const Avatar = ({ color, size = "medium", src, alt, defaultImage, initials, className }) => {
+const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt, defaultImage, initials, className }) => {
   const [hasValidImage, setHasValidImage] = React.useState(false);
   React.useEffect(() => {
     let mounted = true;
@@ -2558,11 +2563,17 @@ const Avatar = ({ color, size = "medium", src, alt, defaultImage, initials, clas
     "ui-h-9 ui-w-9": size === "small",
     "ui-h-6 ui-w-6": size === "xsmall"
   });
+  const groupOffsetClassNames = classNames__default.default({
+    "-ui-ml-[calc(theme('spacing.32')/4)]": size === "large" && applyGroupOffset,
+    "-ui-ml-[calc(theme('spacing.16')/4)]": size === "medium" && applyGroupOffset,
+    "-ui-ml-[calc(theme('spacing.9')/4)]": size === "small" && applyGroupOffset,
+    "-ui-ml-[calc(theme('spacing.6')/4)]": size === "xsmall" && applyGroupOffset
+  });
   const colorClassName = classNames__default.default({
-    "ui-bg-slate-100 ui-text-slate-800": !color,
+    "ui-bg-slate-100 ui-text-on-surface": color === "slate",
     "ui-bg-primary ui-text-white": color === "primary"
   });
-  const containerClassName = classNames__default.default(className, sizeClassName, colorClassName, "ui-flex ui-items-center ui-justify-center");
+  const containerClassName = classNames__default.default(className, sizeClassName, groupOffsetClassNames, colorClassName, "ui-flex ui-items-center ui-justify-center");
   const textClassName = classNames__default.default({
     "ui-text-5xl": size === "large",
     "ui-text-2xl": size === "medium",
@@ -2575,11 +2586,19 @@ const Avatar = ({ color, size = "medium", src, alt, defaultImage, initials, clas
     } else if (hasValidImage) {
       return React__namespace.default.createElement("img", { className: imageClassName, src, alt });
     } else {
+      if (size === "xsmall") {
+        return React__namespace.default.createElement(
+          React__namespace.default.Fragment,
+          null,
+          React__namespace.default.createElement(Text, { variant: "sm", color: "current", "aria-hidden": true }, initials),
+          React__namespace.default.createElement(ScreenReaderText, null, alt)
+        );
+      }
       return React__namespace.default.createElement(
         React__namespace.default.Fragment,
         null,
         React__namespace.default.createElement("span", { className: textClassName, "aria-hidden": true }, initials),
-        React__namespace.default.createElement("span", { className: "ui-sr-only" }, alt)
+        React__namespace.default.createElement(ScreenReaderText, null, alt)
       );
     }
   };
@@ -2589,6 +2608,56 @@ const Avatar = ({ color, size = "medium", src, alt, defaultImage, initials, clas
     React__namespace.default.createElement("div", null, renderAvatar())
   );
 };
+function ScreenReaderText({ children }) {
+  return React__namespace.default.createElement("span", { className: "ui-sr-only" }, children);
+}
+
+const AvatarGroup = (props) => {
+  const { children, maxAvatars = 3 } = props;
+  return React__namespace.default.createElement(
+    Stack,
+    Object.assign({ axis: "x", align: "center" }, props),
+    React__namespace.default.Children.map(children, (child, index) => {
+      if (!React__namespace.default.isValidElement(child)) {
+        console.error(`AvatarGroup only accepts children of type Avatar, but received an invalid React element.`);
+        return null;
+      }
+      if (child.type !== Avatar) {
+        console.error(`AvatarGroup only accepts children of type Avatar, but received ${child.type}.`);
+        return null;
+      }
+      if (index + 1 > maxAvatars) {
+        return null;
+      }
+      return React__namespace.default.createElement(Avatar, Object.assign({}, child.props, { applyGroupOffset: index > 0, className: classNames__default.default(child.props.className, `ui-outline`, {
+        "ui-outline-surface": !props.outlineColor || props.outlineColor === "surface",
+        "ui-outline-slate-50": props.outlineColor === "slate-50",
+        "ui-outline-slate-100": props.outlineColor === "slate-100",
+        "ui-outline-white": props.outlineColor === "white"
+      }, {
+        "ui-outline-2": child.props.size === "xsmall" || child.props.size === "small",
+        "ui-outline-4": child.props.size === "medium",
+        "ui-outline-8": child.props.size === "large"
+      }) }));
+    }),
+    React__namespace.default.createElement(MoreAvatarsLabel, Object.assign({}, props, { maxAvatars }))
+  );
+};
+function MoreAvatarsLabel(props) {
+  const { children, maxAvatars, moreAvatarsLabel } = props;
+  if (!moreAvatarsLabel) {
+    return null;
+  }
+  const amountOfAvatars = React__namespace.default.Children.count(children);
+  if (amountOfAvatars <= maxAvatars) {
+    return null;
+  }
+  return React__namespace.default.createElement(
+    Box,
+    { ml: "xxxxs" },
+    React__namespace.default.createElement(Text, { variant: "medium", color: "on-surface-variant" }, moreAvatarsLabel(amountOfAvatars - maxAvatars))
+  );
+}
 
 const Badge = (props) => {
   var _a;
@@ -5300,13 +5369,13 @@ const ImageCategory = (props) => {
     React__namespace.default.createElement("div", { className: "ui-flex ui-flex-row ui-flex-wrap" }, props.images.map((option, index) => {
       const isSelected = option === props.highlightedImage;
       return React__namespace.default.createElement(
-        "div",
-        { "data-test-id": `image-from-selector-${index.toString().padStart(2, "0")}`, key: option, role: "button", className: classNames__default.default("ui-m-2 ui-rounded ui-border ui-border-solid ui-border-slate-300 ui-p-2", {
+        "button",
+        { "data-test-id": `image-from-selector-${index.toString().padStart(2, "0")}`, key: option, "data-index": index, "data-src": option, onClick: props.handleImageClick, className: classNames__default.default("ui-m-2 ui-rounded ui-border ui-border-solid ui-border-slate-300 ui-p-2", {
           "ui-outline ui-outline-primary": isSelected,
           "ui-h-11 ui-w-11": props.isTypeCompact,
           "ui-h-22 ui-w-36": !props.isTypeCompact
         }) },
-        React__namespace.default.createElement(Image$2, { className: "ui-h-full ui-w-full ui-rounded", onClick: props.handleImageClick, src: option, "data-index": index, wrapperClassName: classNames__default.default({
+        React__namespace.default.createElement(Image$2, { className: "ui-h-full ui-w-full ui-rounded", src: option, wrapperClassName: classNames__default.default({
           "ui-h-full ui-w-full": !props.isTypeCompact
         }) })
       );
@@ -5369,8 +5438,11 @@ const ImagePickerInner = ({
     if (datasetIndex && parseInt(datasetIndex, 10) === clearImageIndex) {
       handleDeleteClick();
     }
-    setHighlightedImage(event.currentTarget.src);
-    setError(null);
+    const src = event.currentTarget.dataset["src"];
+    if (src) {
+      setHighlightedImage(src);
+      setError(null);
+    }
   };
   const handleDeleteClick = () => {
     handleChange({ target: { name, value: "" } });
@@ -6589,6 +6661,7 @@ exports.AlertsIcon = BellIcon;
 exports.AmberAlertIcon = AmberAlertIcon;
 exports.AssignedIcon = AssignedIcon;
 exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BellIcon = BellIcon;
 exports.BellIconSlashed = BellIconSlashed;