@homebound/beam 2.259.0 → 2.261.0

package/dist/components/{Avatar.js → Avatar/Avatar.js}

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const Icon_1 = require("./Icon");
-const Css_1 = require("../Css");
-const utils_1 = require("../utils");
+const Icon_1 = require("../Icon");
+const Tooltip_1 = require("../Tooltip");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
 function Avatar({ src, name, size = "md", showName = false, ...others }) {
     const tid = (0, utils_1.useTestIds)(others, "avatar");
     const px = sizeToPixel[size];
@@ -13,7 +14,7 @@ function Avatar({ src, name, size = "md", showName = false, ...others }) {
     // Define min-width as well as width to prevent the image from shrinking when displayed within a flex-child that allows shrinking.
     const styles = Css_1.Css.br100.wPx(px).hPx(px).mwPx(px).overflowHidden.$;
     const img = showFallback ? ((0, jsx_runtime_1.jsx)("div", { css: { ...styles, ...Css_1.Css[sizeToFallbackTypeScale[size]].bgGray400.gray100.df.aic.jcc.$ }, ...tid, children: name ? nameToInitials(name) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) })) : ((0, jsx_runtime_1.jsx)("img", { src: src, alt: name, css: { ...styles, ...Css_1.Css.objectCover.$ }, onError: () => setShowFallback(true), loading: "lazy", ...tid }));
-    return showName && name ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$, children: [img, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[sizeToTypeScale[size]].$, children: name })] })) : (img);
+    return showName && name ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$, children: [img, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[sizeToTypeScale[size]].$, children: name })] })) : ((0, Tooltip_1.maybeTooltip)({ title: name, children: img, placement: "top" }));
 }
 exports.Avatar = Avatar;
 const sizeToPixel = {
@@ -35,10 +36,10 @@ const sizeToIconInc = {
     xl: 8,
 };
 const sizeToTypeScale = {
-    sm: "baseMd",
-    md: "baseMd",
-    lg: "lg",
-    xl: "xl3",
+    sm: "smMd",
+    md: "smMd",
+    lg: "base",
+    xl: "base",
 };
 function nameToInitials(name) {
     return (name

package/dist/components/{AvatarButton.d.ts → Avatar/AvatarButton.d.ts}

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from "@react-types/button";
 import { RefObject } from "react";
 import { AvatarProps } from "./Avatar";
-import { BeamButtonProps, BeamFocusableProps } from "../interfaces";
+import { BeamButtonProps, BeamFocusableProps } from "../../interfaces";
 export interface AvatarButtonProps extends AvatarProps, BeamButtonProps, BeamFocusableProps {
     menuTriggerProps?: AriaButtonProps;
     buttonRef?: RefObject<HTMLButtonElement>;

package/dist/components/{AvatarButton.js → Avatar/AvatarButton.js}

@@ -4,13 +4,13 @@ exports.pressedStyles = exports.hoverStyles = exports.AvatarButton = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const components_1 = require("./");
 const Avatar_1 = require("./Avatar");
-const Css_1 = require("../Css");
-const useGetRef_1 = require("../hooks/useGetRef");
-const utils_1 = require("../utils");
-const getInteractiveElement_1 = require("../utils/getInteractiveElement");
-const useTestIds_1 = require("../utils/useTestIds");
+const index_1 = require("../index");
+const Css_1 = require("../../Css");
+const useGetRef_1 = require("../../hooks/useGetRef");
+const utils_1 = require("../../utils");
+const getInteractiveElement_1 = require("../../utils/getInteractiveElement");
+const useTestIds_1 = require("../../utils/useTestIds");
 function AvatarButton(props) {
     const { onClick: onPress, disabled, autoFocus, buttonRef, tooltip, menuTriggerProps, openInNew, forceFocusStyles = false, ...avatarProps } = props;
     const isDisabled = !!disabled;
@@ -36,13 +36,13 @@ function AvatarButton(props) {
         ...buttonProps,
         ...focusProps,
         ...hoverProps,
-        className: typeof onPress === "string" ? components_1.navLink : undefined,
+        className: typeof onPress === "string" ? index_1.navLink : undefined,
         ref: ref,
         css: styles,
     };
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
-    return (0, components_1.maybeTooltip)({
-        title: (0, components_1.resolveTooltip)(disabled, tooltip),
+    return (0, index_1.maybeTooltip)({
+        title: (0, index_1.resolveTooltip)(disabled, tooltip),
         placement: "top",
         children: (0, getInteractiveElement_1.getButtonOrLink)((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { ...avatarProps, ...tid }), onPress, buttonAttrs, openInNew),
     });

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

@@ -0,0 +1,9 @@
+import { AvatarSize } from "./Avatar";
+export interface AvatarGroupProps {
+    avatars: {
+        src: string | undefined;
+        name?: string;
+    }[];
+    size?: AvatarSize;
+}
+export declare function AvatarGroup(props: AvatarGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/AvatarGroup.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Avatar_1 = require("./Avatar");
+const ButtonModal_1 = require("../ButtonModal");
+const Css_1 = require("../../Css");
+function AvatarGroup(props) {
+    const { avatars, size = "md" } = props;
+    // If there are 8 or fewer avatars, show them all. Otherwise, show the first 7 and a menu with the rest.
+    const maxVisibleAvatars = avatars.length <= 8 ? 8 : 7;
+    const visibleAvatars = avatars.slice(0, maxVisibleAvatars);
+    const menuAvatars = avatars.slice(maxVisibleAvatars);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.gap1.xsSb.$, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.aic.$, children: visibleAvatars.map((avatar, idx) => {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br100.ba.bWhite
+                            .add("borderWidth", "3px")
+                            .if(idx > 0)
+                            .mlPx(-1 * sizeToOverlap[size]).$, children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: avatar.src, name: avatar.name, size: size }) }, (_a = avatar.src) !== null && _a !== void 0 ? _a : idx));
+                }) }), menuAvatars.length > 0 && ((0, jsx_runtime_1.jsx)(ButtonModal_1.ButtonModal, { trigger: { label: `+ ${menuAvatars.length} more`, variant: "text" }, hideEndAdornment: true, content: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.fdc.gap1.mPx(-12).$, children: menuAvatars.map((a, idx) => {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: a.src, name: a.name, showName: true, size: "md" }, (_a = a.src) !== null && _a !== void 0 ? _a : idx));
+                    }) }) }))] }));
+}
+exports.AvatarGroup = AvatarGroup;
+const sizeToOverlap = {
+    sm: 9,
+    md: 9,
+    lg: 15,
+    xl: 22,
+};

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

@@ -0,0 +1,3 @@
+export * from "./Avatar";
+export * from "./AvatarButton";
+export * from "./AvatarGroup";

package/dist/components/Avatar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Avatar"), exports);
+__exportStar(require("./AvatarButton"), exports);
+__exportStar(require("./AvatarGroup"), exports);

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { Palette } from "../../../Css";
-export declare function RightPaneLayout({ children, paneBgColor, paneWidth, }: {
+export declare function RightPaneLayout({ children, paneBgColor, paneWidth, defaultPaneContent, }: {
     children: ReactElement;
     paneBgColor?: Palette;
     paneWidth?: number;
+    defaultPaneContent?: ReactElement;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.js

@@ -6,7 +6,7 @@ const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
 const Css_1 = require("../../../Css");
 const RightPaneContext_1 = require("./RightPaneContext");
-function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, }) {
+function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, defaultPaneContent, }) {
     const { isRightPaneOpen, rightPaneContent, clearPane, closePane } = (0, RightPaneContext_1.useRightPaneContext)();
     // Close pane on page unmount because otherwise the next page that has a right pane will show our stale content
     (0, react_1.useEffect)(() => {
@@ -14,12 +14,21 @@ function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidt
             closePane();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`)
-                        .add("transition", "width .2s linear")
-                        .h100.mr3.overflowXAuto.if(!isRightPaneOpen).w100.mr0.$, children: children }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 
-                        // Keeping initial x to offset pane width and space between panel and page content
-                        initial: { x: paneWidth + 24 }, animate: { x: 0 }, transition: { ease: "linear", duration: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: paneWidth }, 
-                        // Clear the content of the detail pane when the animation is completed and only when pane is closing
-                        onAnimationComplete: (definition) => definition.x !== 0 && clearPane(), children: rightPaneContent }, "rightPane")) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: {
+                        ...Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`).add("transition", "width .2s linear").h100.mr3.overflowXAuto.$,
+                        ...Css_1.Css.if(!isRightPaneOpen).w100.mr0.$,
+                        ...Css_1.Css.if(!!defaultPaneContent).w(`calc(100% - ${paneWidth + 24}px)`).mr3.$,
+                    }, children: children }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.position("relative").if(!!defaultPaneContent).wPx(paneWidth).$, children: [defaultPaneContent && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100
+                                .wPx(paneWidth)
+                                .left(0)
+                                .position("absolute")
+                                .add("transition", "all .3s ease-in-out")
+                                .if(isRightPaneOpen)
+                                .add("opacity", 0)
+                                .left(100).$, children: defaultPaneContent })), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 
+                                // Keeping initial x to offset pane width and space between panel and page content
+                                initial: { x: paneWidth + 24, position: "absolute" }, animate: { x: 0 }, transition: { ease: "linear", duration: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: paneWidth }, 
+                                // Clear the content of the detail pane when the animation is completed and only when pane is closing
+                                onAnimationComplete: (definition) => definition.x !== 0 && clearPane(), children: rightPaneContent }, "rightPane")) })] })] }) }));
 }
 exports.RightPaneLayout = RightPaneLayout;

package/dist/components/index.d.ts

@@ -7,7 +7,6 @@ export * from "./Accordion";
 export * from "./AccordionList";
 export * from "./AutoSaveIndicator";
 export * from "./Avatar";
-export * from "./AvatarButton";
 export { BeamProvider } from "./BeamContext";
 export * from "./Button";
 export * from "./ButtonDatePicker";

package/dist/components/index.js

@@ -24,7 +24,6 @@ __exportStar(require("./Accordion"), exports);
 __exportStar(require("./AccordionList"), exports);
 __exportStar(require("./AutoSaveIndicator"), exports);
 __exportStar(require("./Avatar"), exports);
-__exportStar(require("./AvatarButton"), exports);
 var BeamContext_1 = require("./BeamContext");
 Object.defineProperty(exports, "BeamProvider", { enumerable: true, get: function () { return BeamContext_1.BeamProvider; } });
 __exportStar(require("./Button"), exports);

package/dist/components/internal/OverlayTrigger.d.ts

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from "@react-types/button";
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { MenuTriggerState } from "react-stately";
-import { AvatarButtonProps } from "../AvatarButton";
+import { AvatarButtonProps } from "../Avatar/AvatarButton";
 import { ButtonProps, ButtonVariant } from "../Button";
 import { IconButtonProps } from "../IconButton";
 import { NavLinkProps } from "../NavLink";

package/dist/components/internal/OverlayTrigger.js

@@ -4,7 +4,7 @@ exports.labelOr = exports.isNavLinkButton = exports.isIconButton = exports.isTex
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const AvatarButton_1 = require("../AvatarButton");
+const AvatarButton_1 = require("../Avatar/AvatarButton");
 const Button_1 = require("../Button");
 const Icon_1 = require("../Icon");
 const IconButton_1 = require("../IconButton");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.259.0",
+  "version": "2.261.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",