@homebound/beam 2.194.1 → 2.196.0

package/dist/components/BeamContext.js

@@ -56,7 +56,7 @@ function BeamProvider({ children, ...presentationProps }) {
             drawerCanCloseDetailsChecks,
         };
     }, [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 && drawerContentStackRef.current.length === 0 && (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));
+    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));
 }
 exports.BeamProvider = BeamProvider;
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */

package/dist/components/Modal/Modal.js

@@ -24,7 +24,7 @@ function Modal(props) {
     const { size = "md", content, forceScrolling, api, drawHeaderBorder = false } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
-    const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, BeamContext_1.useBeamContext)();
+    const { modalBodyDiv, modalFooterDiv, modalHeaderDiv } = (0, BeamContext_1.useBeamContext)();
     const { closeModal } = (0, useModal_1.useModal)();
     const { overlayProps, underlayProps } = (0, react_aria_1.useOverlay)({
         ...props,
@@ -56,10 +56,6 @@ function Modal(props) {
     // Even though we use raw-divs for the createPortal calls, we do actually need to
     // use refs + useEffect to stitch those raw divs back into the React component tree.
     (0, react_1.useEffect)(() => {
-        // If the superdrawer is open, let it own the modal content
-        if (drawerContentStack.current.length > 0) {
-            return;
-        }
         modalHeaderRef.current.appendChild(modalHeaderDiv);
         modalBodyRef.current.appendChild(modalBodyDiv);
         modalFooterRef.current.appendChild(modalFooterDiv);

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmCloseModal = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const components_1 = require("..");
-const Css_1 = require("../../Css");
 const BeamContext_1 = require("../BeamContext");
 /** Modal content to appear when a close checks fails */
 function ConfirmCloseModal(props) {
@@ -15,10 +14,10 @@ function ConfirmCloseModal(props) {
         // after a close and could/will cause other close attempts to fail.
         modalState.current = undefined;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgSb.gray900.mb1.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any changes you've made so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.gap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
-                                // The order of these calls doesn't really matter; close this modal and tell the call to do their close
-                                onClose();
-                                closeModal();
-                            } }, void 0)] }), void 0) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Are you sure you want to cancel?" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsx)("p", { children: "Any changes you've made so far will be lost." }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(components_1.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
+                            // The order of these calls doesn't really matter; close this modal and tell the call to do their close
+                            onClose();
+                            closeModal();
+                        } }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0)] }, void 0)] }, void 0));
 }
 exports.ConfirmCloseModal = ConfirmCloseModal;

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -35,19 +35,11 @@ const utils_2 = require("./utils");
  */
 function SuperDrawer() {
     var _a, _b;
-    const { drawerContentStack: contentStack, modalState, modalBodyDiv, modalFooterDiv, modalHeaderDiv, } = (0, BeamContext_1.useBeamContext)();
+    const { drawerContentStack: contentStack } = (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 testId = (0, utils_1.useTestIds)({}, "superDrawer");
-    // Steal the modal body/footer portals from Modal, if we're open
-    (0, react_3.useEffect)(() => {
-        if (modalBodyRef.current && modalFooterRef.current && modalState.current) {
-            modalBodyRef.current.appendChild(modalBodyDiv);
-            modalFooterRef.current.appendChild(modalFooterDiv);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [modalBodyRef.current, modalFooterRef.current, modalState.current]);
     // Get the latest element on the stack
     // We use undefined, nullish operators and empty object here to allow AnimatePresence
     // to animate the drawers exit transition when our stack is empty
@@ -78,7 +70,7 @@ 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.if(!!modalState.current).bn.$ }, { 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: [
+                        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(),
@@ -89,8 +81,6 @@ function SuperDrawer() {
                                                             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, modalState.current && (
-                                // Forcing some design constraints on the modal component
-                                (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.fg1.top0.left0.right0.bottom0.absolute.bgWhite.df.aic.jcc.fg1.fdc.z5.$ }, { children: [modalState.current.content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0), (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0)] }), void 0))] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
+                                                    ] }, 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);
 }
 exports.SuperDrawer = SuperDrawer;

package/dist/components/Table/GridTable.js

@@ -137,6 +137,7 @@ function GridTable(props) {
                 getCount,
                 api,
                 cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
+                omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
                 ...sortProps,
             }), `${row.kind}-${row.id}`));
         }
@@ -157,7 +158,6 @@ function GridTable(props) {
             }
         }
         function visitRows(rows, level, visible) {
-            const length = rows.length;
             rows.forEach((row, i) => {
                 if (row[0].kind === "header") {
                     headerRows.push([row[0], makeRowComponent(row[0], level)]);

package/dist/components/Table/TableStyles.d.ts

@@ -61,6 +61,7 @@ export interface GridStyleDef {
     cellHighlight?: boolean;
     allWhite?: boolean;
     bordered?: boolean;
+    rowHover?: boolean;
 }
 export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 /** Defines row-specific styling for each given row `kind` in `R` */

package/dist/components/Table/TableStyles.js

@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
 function memoizedTableStyles() {
     const cache = {};
     return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, } = props;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, rowHover = true, } = props;
         const key = (0, utils_1.safeKeys)(props)
             .sort()
             .map((k) => `${k}_${props[k]}`)
@@ -50,6 +50,7 @@ function memoizedTableStyles() {
                 }),
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,
+                rowHoverColor: Css_1.Palette.LightBlue100,
             };
         }
         return cache[key];
@@ -114,6 +115,7 @@ function resolveStyles(style) {
         "cellHighlight",
         "allWhite",
         "bordered",
+        "rowHover",
     ];
     const keys = (0, utils_1.safeKeys)(style);
     if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {

package/dist/components/Table/components/Row.d.ts

@@ -19,6 +19,7 @@ interface RowProps<R extends Kinded, S> {
     getCount: (id: string) => object;
     api: GridTableApi<R>;
     cellHighlight: boolean;
+    omitRowHover: boolean;
 }
 declare function RowImpl<R extends Kinded, S>(props: RowProps<R, S>): ReactElement;
 /**

package/dist/components/Table/components/Row.js

@@ -33,7 +33,7 @@ const shallowEqual_1 = require("../../../utils/shallowEqual");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, cellHighlight, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, cellHighlight, omitRowHover, ...others } = props;
     const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
     const rowId = `${row.kind}_${row.id}`;
     const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === rowId, [rowId, rowState]);
@@ -45,12 +45,15 @@ function RowImpl(props) {
     const revealOnRowHoverClass = "revealOnRowHover";
     const rowStyleCellCss = (0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
-        // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
-        ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
-        ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && {
+        // Optionally include the row hover styles, by default they should be turned on.
+        ...(!omitRowHover && {
             // Even though backgroundColor is set on the cellCss, the hover target is the row.
-            "&:hover > *": Css_1.Css.cursorPointer.bgColor((_a = style.rowHoverColor) !== null && _a !== void 0 ? _a : Css_1.Palette.LightBlue100).$,
+            "&:hover > *": Css_1.Css.bgColor((_a = style.rowHoverColor) !== null && _a !== void 0 ? _a : Css_1.Palette.LightBlue100).$,
         }),
+        // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
+        ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
+        // Apply `cursorPointer` to the row if it has a link or `onClick` value.
+        ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && { "&:hover": Css_1.Css.cursorPointer.$ }),
         ...(0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         // Maybe add the sticky header styles
         ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),

package/package.json

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