@homebound/beam 2.79.0 → 2.79.1

package/dist/components/BeamContext.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject, ReactNode } from "react";
 import { ModalProps } from "./Modal/Modal";
 import { ContentStack } from "./SuperDrawer/useSuperDrawer";
-import { CheckFn } from "../types";
+import { CanCloseCheck, CheckFn } from "../types";
 /** The internal state of our Beam context; see useModal and useSuperDrawer for the public APIs. */
 export interface BeamContextState {
     modalState: MutableRefObject<ModalProps | undefined>;
@@ -15,9 +15,9 @@ export interface BeamContextState {
     /** SuperDrawer contentStack, i.e. the main/non-detail content + 0-N detail contents. */
     drawerContentStack: MutableRefObject<readonly ContentStack[]>;
     /** Checks when closing SuperDrawer, for the main/non-detail drawer content. */
-    drawerCanCloseChecks: MutableRefObject<CheckFn[]>;
+    drawerCanCloseChecks: MutableRefObject<CanCloseCheck[]>;
     /** Checks when closing SuperDrawer Details, a double array to keep per-detail lists. */
-    drawerCanCloseDetailsChecks: MutableRefObject<CheckFn[][]>;
+    drawerCanCloseDetailsChecks: MutableRefObject<CanCloseCheck[][]>;
     /** The ref for defining the portal element's location for Tab actions */
     tabActionsRef: MutableRefObject<HTMLDivElement | null>;
     /** The div for Tab actions to portal into */

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

@@ -1,6 +1,8 @@
 interface ConfirmCloseModalProps {
     onClose: () => void;
+    discardText?: string;
+    continueText?: string;
 }
 /** Modal content to appear when a close checks fails */
-export declare function ConfirmCloseModal({ onClose }: ConfirmCloseModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ConfirmCloseModal(props: ConfirmCloseModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const src_1 = require("../..");
 const BeamContext_1 = require("../BeamContext");
 /** Modal content to appear when a close checks fails */
-function ConfirmCloseModal({ onClose }) {
+function ConfirmCloseModal(props) {
+    const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
     const { modalState } = (0, BeamContext_1.useBeamContext)();
     // TODO: Change to closeModal from useModal when canCloseChecks are reset
     function closeModal() {
@@ -13,10 +14,10 @@ function ConfirmCloseModal({ onClose }) {
         // 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)(src_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.lgEm.gray900.mb2.$ }, { children: "Are you sure you want to cancel without saving your changes?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_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.jsxs)(src_1.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(src_1.Button, { variant: "tertiary", label: "Cancel", onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(src_1.Button, { label: "Close", 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));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(src_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.lgEm.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalFooter, Object.assign({ xss: src_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.df.fdc.childGap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(src_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(src_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));
 }
 exports.ConfirmCloseModal = ConfirmCloseModal;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { CanCloseCheck } from "../../types";
 export interface OpenInDrawerOpts {
     /** Title of the SuperDrawer */
     title: string;
@@ -44,13 +45,13 @@ export interface UseSuperDrawerHook {
      * false, a confirmation modal will appear allowing the user to confirm
      * the action.
      */
-    addCanCloseDrawerCheck: (canCloseCheck: () => boolean) => void;
+    addCanCloseDrawerCheck: (canCloseCheck: CanCloseCheck) => void;
     /**
      * Adds a check when attempting to close a SuperDrawer detail by clicking the
      * "back" button or calling `closeDrawerDetail()`. If any checks returns
      * false, a confirmation modal will appear allowing the user to confirm
      * the action.
      */
-    addCanCloseDrawerDetailCheck: (canCloseCheck: () => boolean) => void;
+    addCanCloseDrawerDetailCheck: (canCloseCheck: CanCloseCheck) => void;
 }
 export declare function useSuperDrawer(): UseSuperDrawerHook;

package/dist/components/SuperDrawer/useSuperDrawer.js

@@ -12,8 +12,8 @@ function useSuperDrawer() {
     function canCloseDrawerDetails(i, doChange) {
         var _a;
         for (const canCloseDrawerDetail of (_a = canCloseDetailsChecks.current[i]) !== null && _a !== void 0 ? _a : []) {
-            if (!canCloseDrawerDetail()) {
-                openModal({ content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, { onClose: doChange }, void 0) });
+            if (!canClose(canCloseDrawerDetail)) {
+                openModal({ content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, Object.assign({ onClose: doChange }, canCloseDrawerDetail), void 0) });
                 return false;
             }
         }
@@ -40,9 +40,9 @@ function useSuperDrawer() {
         }
         // Attempt to close the drawer
         for (const canCloseDrawer of canCloseChecks.current) {
-            if (!canCloseDrawer()) {
+            if (!canClose(canCloseDrawer)) {
                 openModal({
-                    content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, { onClose: doChange }, void 0),
+                    content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, Object.assign({ onClose: doChange }, canCloseDrawer), void 0),
                 });
                 return;
             }
@@ -139,3 +139,7 @@ function useSuperDrawer() {
     };
 }
 exports.useSuperDrawer = useSuperDrawer;
+function canClose(canCloseCheck) {
+    return ((typeof canCloseCheck === "function" && canCloseCheck()) ||
+        (typeof canCloseCheck !== "function" && canCloseCheck.check()));
+}

package/dist/types.d.ts

@@ -5,3 +5,8 @@ export declare type HasIdAndName<V = string> = {
 export declare type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
 export declare type Callback = () => void;
 export declare type CheckFn = () => boolean;
+export declare type CanCloseCheck = {
+    check: CheckFn;
+    discardText?: string;
+    continueText?: string;
+} | CheckFn;

package/package.json

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