@homebound/beam 2.213.0 → 2.215.0

package/dist/components/BeamContext.d.ts

@@ -19,6 +19,8 @@ export interface BeamContextState {
     drawerCanCloseChecks: MutableRefObject<CanCloseCheck[]>;
     /** Checks when closing SuperDrawer Details, a double array to keep per-detail lists. */
     drawerCanCloseDetailsChecks: MutableRefObject<CanCloseCheck[][]>;
+    /** The div for SuperDrawerHeader to portal into. */
+    sdHeaderDiv: HTMLDivElement;
 }
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
 export declare const BeamContext: import("react").Context<BeamContextState>;

package/dist/components/BeamContext.js

@@ -20,6 +20,7 @@ exports.BeamContext = (0, react_1.createContext)({
     drawerContentStack: new index_1.EmptyRef(),
     drawerCanCloseChecks: new index_1.EmptyRef(),
     drawerCanCloseDetailsChecks: new index_1.EmptyRef(),
+    sdHeaderDiv: undefined,
 });
 function BeamProvider({ children, ...presentationProps }) {
     // We want the identity of these to be stable, b/c they end up being used as dependencies
@@ -40,6 +41,7 @@ function BeamProvider({ children, ...presentationProps }) {
     const drawerContentStackRef = (0, react_1.useRef)([]);
     const drawerCanCloseChecks = (0, react_1.useRef)([]);
     const drawerCanCloseDetailsChecks = (0, react_1.useRef)([]);
+    const sdHeaderDiv = (0, react_1.useMemo)(() => document.createElement("div"), []);
     // We essentially expose the refs, but with our own getters/setters so that we can
     // have the setters call `tick` to re-render this Provider
     const context = (0, react_1.useMemo)(() => {
@@ -54,6 +56,7 @@ function BeamProvider({ children, ...presentationProps }) {
             modalFooterDiv,
             drawerCanCloseChecks,
             drawerCanCloseDetailsChecks,
+            sdHeaderDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
     return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsxs)(SnackbarContext_1.SnackbarProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }, void 0) }), void 0) }), void 0));

package/dist/components/Button.d.ts

@@ -17,6 +17,8 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     /** Denotes if this button is used to download a resource. Uses the anchor tag with the `download` attribute */
     download?: boolean;
     contrast?: boolean;
+    /** Additional text to further customize button during an async request is in progress. */
+    labelInFlight?: string;
 }
 export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type ButtonSize = "sm" | "md" | "lg";

package/dist/components/Button.js

@@ -10,7 +10,7 @@ const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
-    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, forceFocusStyles = false, ...otherProps } = props;
+    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, forceFocusStyles = false, labelInFlight, ...otherProps } = props;
     const asLink = typeof onPress === "string";
     const showExternalLinkIcon = (asLink && (0, utils_1.isAbsoluteUrl)(onPress)) || openInNew;
     const [asyncInProgress, setAsyncInProgress] = (0, react_1.useState)(false);
@@ -38,7 +38,7 @@ function Button(props) {
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
     const { baseStyles, hoverStyles, disabledStyles, pressedStyles, focusStyles } = (0, react_1.useMemo)(() => getButtonStyles(variant, size, contrast), [variant, size, contrast]);
-    const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)(components_1.Icon, { xss: iconStyles[size], icon: icon }, void 0), label, endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: endAdornment }), void 0)] }, void 0));
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)(components_1.Icon, { xss: iconStyles[size], icon: icon }, void 0), labelInFlight && asyncInProgress ? labelInFlight : label, (endAdornment || asyncInProgress) && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: asyncInProgress ? (0, jsx_runtime_1.jsx)(components_1.Loader, { size: "xs", contrast: contrast }, void 0) : endAdornment }), void 0))] }, void 0));
     const buttonAttrs = {
         ref: ref,
         ...buttonProps,

package/dist/components/ButtonGroup.js

@@ -11,7 +11,7 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonGroup(props) {
     const { buttons, disabled = false, size = "sm" } = props;
     const tid = (0, utils_1.useTestIds)(props, "buttonGroup");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mPx(4).$ }, tid, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tid, { css: sizeStyles[size] }, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
         // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
         (0, jsx_runtime_1.jsx)(GroupButton, Object.assign({}, buttonProps, { disabled: disabled || buttonDisabled, size: size }, tid), i))) }), void 0));
 }

package/dist/components/Loader.d.ts

@@ -1,5 +1,5 @@
 interface LoaderProps {
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     contrast?: boolean;
 }
 export declare function Loader({ size, contrast }: LoaderProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Loader.js

@@ -21,6 +21,7 @@ function Loader({ size = "lg", contrast = false }) {
 }
 exports.Loader = Loader;
 const sizeToPixels = {
+    xs: [16, 2],
     sm: [32, 4],
     md: [64, 8],
     lg: [96, 12],

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -35,10 +35,9 @@ const utils_2 = require("./utils");
  */
 function SuperDrawer() {
     var _a, _b;
-    const { drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
+    const { drawerContentStack: contentStack, sdHeaderDiv } = (0, BeamContext_1.useBeamContext)();
     const { closeDrawer } = (0, components_1.useSuperDrawer)();
-    const modalBodyRef = (0, react_3.useRef)(null);
-    const modalFooterRef = (0, react_3.useRef)(null);
+    const headerRef = (0, react_3.useRef)(null);
     const testId = (0, utils_1.useTestIds)({}, "superDrawer");
     // Get the latest element on the stack
     // We use undefined, nullish operators and empty object here to allow AnimatePresence
@@ -47,10 +46,13 @@ function SuperDrawer() {
     const { content } = currentContent !== null && currentContent !== void 0 ? currentContent : {};
     // Also get the first / non-detail element on the stack
     const firstContent = (_b = contentStack.current[0]) === null || _b === void 0 ? void 0 : _b.opts;
-    const { onPrevClick, onNextClick, titleRightContent, titleLeftContent, hideControls } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
-    const isDetail = currentContent !== firstContent;
-    const title = content === undefined ? "" : currentContent.title || firstContent.title;
     const { width = utils_2.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
+    (0, react_3.useEffect)(() => {
+        var _a;
+        if (((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes.length) === 0 && content) {
+            headerRef.current.appendChild(sdHeaderDiv);
+        }
+    }, [headerRef, content]);
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }, void 0), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
                     key: "superDrawer", 
@@ -70,17 +72,6 @@ function SuperDrawer() {
                         // Custom transitions settings for the translateX animation
                         transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width }, 
                         // Preventing clicks from triggering parent onClick
-                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Sb.gray900.mr2.$ }, testId.title, { children: title !== null && title !== void 0 ? title : null }), void 0), titleLeftContent !== null && titleLeftContent !== void 0 ? titleLeftContent : null] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
-                                                        {
-                                                            icon: "chevronLeft",
-                                                            onClick: () => onPrevClick && onPrevClick(),
-                                                            disabled: !onPrevClick || isDetail,
-                                                        },
-                                                        {
-                                                            icon: "chevronRight",
-                                                            onClick: () => onNextClick && onNextClick(),
-                                                            disabled: !onNextClick || isDetail,
-                                                        },
-                                                    ] }, testId.headerActions), void 0)), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0)] }), void 0), content] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
+                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.p3.bb.bGray200.df.aic.jcsb.gap3.$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, css: Css_1.Css.gray900.fg1.addIn("h1", Css_1.Css.xl2Sb.$).$ }, void 0), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0), content] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
 }
 exports.SuperDrawer = SuperDrawer;

package/dist/components/SuperDrawer/components/SuperDrawerHeader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface SuperDrawerHeaderProps {
+    children: ReactNode;
+    hideControls?: boolean;
+}
+interface SuperDrawerHeaderStructuredProps {
+    title: string;
+    left?: ReactNode;
+    right?: ReactNode;
+    hideControls?: boolean;
+}
+export declare function SuperDrawerHeader(props: SuperDrawerHeaderProps | SuperDrawerHeaderStructuredProps): JSX.Element;
+export {};

package/dist/components/SuperDrawer/components/SuperDrawerHeader.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuperDrawerHeader = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const BeamContext_1 = require("../../BeamContext");
+const ButtonGroup_1 = require("../../ButtonGroup");
+const Css_1 = require("../../../Css");
+const utils_1 = require("../../../utils");
+function SuperDrawerHeader(props) {
+    var _a, _b;
+    const { hideControls } = props;
+    const { sdHeaderDiv, drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
+    const firstContent = (_a = contentStack.current[0]) === null || _a === void 0 ? void 0 : _a.opts;
+    const { onPrevClick, onNextClick } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
+    const currentContent = (_b = contentStack.current[contentStack.current.length - 1]) === null || _b === void 0 ? void 0 : _b.opts;
+    const isDetail = currentContent !== firstContent;
+    const tid = (0, utils_1.useTestIds)({}, "superDrawerHeader");
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.jcsb.gap3.$ }, tid, { children: [isStructuredProps(props) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.aic.gap2.fg1.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.fg1.df.aic.gap2.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: props.title }, void 0), props.left] }), void 0), props.right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fs0.$ }, { children: props.right }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fg1.$ }, { children: props.children }), void 0)), !hideControls && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fs0.if(isDetail).invisible.$ }, { children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, Object.assign({ buttons: [
+                        { icon: "chevronLeft", onClick: () => onPrevClick && onPrevClick(), disabled: !onPrevClick },
+                        { icon: "chevronRight", onClick: () => onNextClick && onNextClick(), disabled: !onNextClick },
+                    ] }, tid.actions), void 0) }), void 0))] }), void 0), sdHeaderDiv);
+}
+exports.SuperDrawerHeader = SuperDrawerHeader;
+function isStructuredProps(props) {
+    return typeof props === "object" && "title" in props;
+}

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

@@ -1,3 +1,4 @@
+export * from "./components/SuperDrawerHeader";
 export * from "./ConfirmCloseModal";
 export * from "./SuperDrawerContent";
 export * from "./useSuperDrawer";

package/dist/components/SuperDrawer/index.js

@@ -11,6 +11,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 // These are our public APIs
+__exportStar(require("./components/SuperDrawerHeader"), exports);
 __exportStar(require("./ConfirmCloseModal"), exports);
 __exportStar(require("./SuperDrawerContent"), exports);
 __exportStar(require("./useSuperDrawer"), exports);

package/dist/components/SuperDrawer/useSuperDrawer.d.ts

@@ -2,18 +2,10 @@ import { ReactNode } from "react";
 import { CanCloseCheck } from "../../types";
 import { SuperDrawerWidth } from "./utils";
 export interface OpenInDrawerOpts {
-    /** Title of the SuperDrawer */
-    title: string;
-    /** Optional content to place left of the prev/next buttons, i.e. a "Manage" link. */
-    titleRightContent?: ReactNode;
-    /** Optional content to place right of the title, i.e. a status badge. */
-    titleLeftContent?: ReactNode;
     /** Invokes left, disabled if undefined. */
     onPrevClick?: () => void;
     /** Invokes right, disabled if undefined. */
     onNextClick?: () => void;
-    /** Hides the pagination controls for `onNextClick` and `onPrevClick` */
-    hideControls?: true;
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: () => void;
     content: ReactNode;
@@ -21,8 +13,6 @@ export interface OpenInDrawerOpts {
     width?: SuperDrawerWidth;
 }
 export interface OpenDetailOpts {
-    /** Title of the SuperDrawer for this detail page (replaces the original title). */
-    title?: string;
     content: ReactNode;
 }
 export declare type ContentStack = {

package/package.json

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