@homebound/beam 4.45.2 → 4.46.0

package/dist/index.d.cts

@@ -9714,6 +9714,8 @@ type RightPanePanelProps = {
     children: ReactNode;
     /** Type or status tag on the close-button row; the title moves to its own row below. */
     tag?: RightPaneTag;
+    /** When it returns true, closing the pane or opening content with another type or `key` asks to discard changes first. */
+    isDirty?: () => boolean;
     /** When false, omit the built-in close control (caller provides their own). Default true. */
     withClose?: boolean;
     /** Variant defaults to primary */
@@ -9759,9 +9761,9 @@ type RightPaneOpenState = RightPaneOpenActions & {
     isRightPaneOpen: boolean;
 };
 type UseRightPaneHook = {
-    /** Opens a right pane */
+    /** Opens a right pane; asks first if the open panel is dirty and the new content would replace it. */
     openRightPane: (opts: OpenRightPaneOpts) => void;
-    /** Closes the right pane */
+    /** Closes the right pane; asks first if the open panel is dirty. */
     closeRightPane: () => void;
     /** Whether the right pane is currently open. */
     isRightPaneOpen: boolean;

package/dist/index.d.ts

@@ -9714,6 +9714,8 @@ type RightPanePanelProps = {
     children: ReactNode;
     /** Type or status tag on the close-button row; the title moves to its own row below. */
     tag?: RightPaneTag;
+    /** When it returns true, closing the pane or opening content with another type or `key` asks to discard changes first. */
+    isDirty?: () => boolean;
     /** When false, omit the built-in close control (caller provides their own). Default true. */
     withClose?: boolean;
     /** Variant defaults to primary */
@@ -9759,9 +9761,9 @@ type RightPaneOpenState = RightPaneOpenActions & {
     isRightPaneOpen: boolean;
 };
 type UseRightPaneHook = {
-    /** Opens a right pane */
+    /** Opens a right pane; asks first if the open panel is dirty and the new content would replace it. */
     openRightPane: (opts: OpenRightPaneOpts) => void;
-    /** Closes the right pane */
+    /** Closes the right pane; asks first if the open panel is dirty. */
     closeRightPane: () => void;
     /** Whether the right pane is currently open. */
     isRightPaneOpen: boolean;

package/dist/index.js

@@ -26863,8 +26863,10 @@ function useScrollPinnedViewportBounds(anchorRef, enabled, getPinTopPx) {
 import { useSyncExternalStore } from "react";
 
 // src/components/Layout/RightPaneLayout/rightPaneStore.ts
+import { isValidElement as isValidElement2 } from "react";
 var isOpen = false;
 var content;
+var discardPrompt;
 var openListeners = /* @__PURE__ */ new Set();
 var contentListeners = /* @__PURE__ */ new Set();
 var rightPaneOpenStore = {
@@ -26888,6 +26890,17 @@ function notifyContentListeners() {
   contentListeners.forEach((listener) => listener());
 }
 function openInPane(opts) {
+  if (isOpen && wouldRemount(content, opts.content)) return confirmDiscard(() => showInPane(opts));
+  if (isOpen && discardPrompt) warnIfUnkeyed(opts.content);
+  showInPane(opts);
+}
+function warnIfUnkeyed(next) {
+  if (process.env.NODE_ENV === "production" || !isValidElement2(next) || next.key !== null) return;
+  console.warn(
+    "[openRightPane] Opened unkeyed content of the same type over a panel with `isDirty`, so it didn't ask and that panel's edits carry over. Key pane content per item, e.g. `<Panel key={id} />`."
+  );
+}
+function showInPane(opts) {
   content = opts.content;
   notifyContentListeners();
   if (isOpen) return;
@@ -26895,9 +26908,14 @@ function openInPane(opts) {
   notifyOpenListeners();
 }
 function closePane() {
-  if (!isOpen) return;
-  isOpen = false;
-  notifyOpenListeners();
+  if (isOpen) confirmDiscard(hideRightPane);
+}
+function confirmDiscard(proceed) {
+  if (discardPrompt) discardPrompt(proceed);
+  else proceed();
+}
+function wouldRemount(prev, next) {
+  return !isValidElement2(prev) || !isValidElement2(next) || prev.type !== next.type || prev.key !== next.key;
 }
 function clearPane() {
   content = void 0;
@@ -26908,9 +26926,28 @@ var rightPaneOpenActions = {
   closePane,
   clearPane
 };
+function setRightPaneDiscardPrompt(fn) {
+  discardPrompt = fn;
+  return () => {
+    if (discardPrompt === fn) discardPrompt = void 0;
+  };
+}
+function closeRightPaneThen(next) {
+  if (!isOpen) return next();
+  confirmDiscard(() => {
+    hideRightPane();
+    next();
+  });
+}
+function hideRightPane() {
+  if (!isOpen) return;
+  isOpen = false;
+  notifyOpenListeners();
+}
 function resetRightPaneStore() {
   isOpen = false;
   content = void 0;
+  discardPrompt = void 0;
   notifyOpenListeners();
   notifyContentListeners();
 }
@@ -27118,17 +27155,13 @@ function DocumentScrollRightPaneLayoutRoot(props) {
 // src/components/Layout/RightPaneLayout/useDocumentScrollRightPaneAnchorRef.ts
 import { useCallback as useCallback30, useRef as useRef61 } from "react";
 function useDocumentScrollRightPaneAnchorRef() {
-  const { closePane: closePane2 } = useRightPaneOpenActions();
   const ref = useRef61(null);
-  const setRef = useCallback30(
-    (node) => {
-      if (!node && ref.current) {
-        closePane2();
-      }
-      ref.current = node;
-    },
-    [closePane2]
-  );
+  const setRef = useCallback30((node) => {
+    if (!node && ref.current) {
+      hideRightPane();
+    }
+    ref.current = node;
+  }, []);
   return { ref, setRef };
 }
 
@@ -27853,11 +27886,10 @@ function RightPaneLayout(props) {
   } = props;
   const {
     isRightPaneOpen,
-    clearPane: clearPane2,
-    closePane: closePane2
+    clearPane: clearPane2
   } = useRightPaneOpenState();
   const rightPaneContent = useRightPaneContent();
-  useEffect30(() => closePane2, [closePane2]);
+  useEffect30(() => hideRightPane, []);
   return /* @__PURE__ */ jsx206("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs107(Fragment45, { children: [
     /* @__PURE__ */ jsx206("div", { ...trussProps116({
       ...{
@@ -27947,7 +27979,7 @@ function RightPaneLayout(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-import { createContext as createContext14, useContext as useContext24, useState as useState55 } from "react";
+import { createContext as createContext14, useContext as useContext24, useEffect as useEffect31, useState as useState55 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Layout/RightPaneLayout/internal/DeleteAction.tsx
@@ -28028,6 +28060,7 @@ function RightPanePanel(props) {
     title,
     children,
     tag,
+    isDirty,
     withClose = true,
     primaryAction,
     secondaryAction,
@@ -28038,6 +28071,18 @@ function RightPanePanel(props) {
     closeRightPane
   } = useRightPaneActions();
   const [bannerSlot, setBannerSlot] = useState55(null);
+  const {
+    openModal
+  } = useModal();
+  useEffect31(() => {
+    if (!isDirty) return;
+    return setRightPaneDiscardPrompt((proceed) => {
+      if (!isDirty()) return proceed();
+      openModal({
+        content: /* @__PURE__ */ jsx208(ConfirmCloseModal, { title: "Discard unsaved changes?", onClose: proceed })
+      });
+    });
+  }, [isDirty, openModal]);
   const tagEl = tag && (tag.kind === "status" ? /* @__PURE__ */ jsx208(Tag, { ...tag, ...tid.tag }) : /* @__PURE__ */ jsx208(ContextTag, { ...tag, ...tid.tag }));
   const titleEl = /* @__PURE__ */ jsx208("div", { className: "fw6 fz_16px lh_24px oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", ...tid.title, children: title });
   const closeEl = withClose && /* @__PURE__ */ jsx208(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close });
@@ -28112,7 +28157,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect31, useState as useState56 } from "react";
+import { useEffect as useEffect32, useState as useState56 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx210, jsxs as jsxs110 } from "react/jsx-runtime";
@@ -28153,7 +28198,7 @@ function TableReviewLayout(props) {
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
   const [isPanelVisible, setIsPanelVisible] = useState56(!!panelContent);
-  useEffect31(() => {
+  useEffect32(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
   function handleClosePanel() {
@@ -28313,7 +28358,7 @@ function HomeboundLogo(props) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect14, useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
-import { useCallback as useCallback36, useEffect as useEffect32, useRef as useRef67, useState as useState57 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect33, useRef as useRef67, useState as useState57 } from "react";
 import { trussProps as trussProps122, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { jsx as jsx214, jsxs as jsxs113 } from "react/jsx-runtime";
 function MaxLines({
@@ -28327,7 +28372,7 @@ function MaxLines({
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
-  useEffect32(() => {
+  useEffect33(() => {
     setExpanded(false);
   }, [children]);
   const onResize = useCallback36(() => {
@@ -28586,7 +28631,7 @@ import { camelCase as camelCase7 } from "change-case";
 // src/components/AppNav/AppNavGroup.tsx
 import { useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
 import { camelCase as camelCase6, kebabCase } from "change-case";
-import { useCallback as useCallback39, useEffect as useEffect33, useMemo as useMemo52, useState as useState60 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect34, useMemo as useMemo52, useState as useState60 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo51, useRef as useRef69 } from "react";
@@ -28826,7 +28871,7 @@ function AppNavGroupDisclosure(props) {
     current: contentEl
   }), [contentEl]);
   const [contentHeight, setContentHeight] = useState60(expanded ? "auto" : "0");
-  useEffect33(() => {
+  useEffect34(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
   const onResize = useCallback39(() => {
@@ -28979,7 +29024,7 @@ import {
   createContext as createContext15,
   useCallback as useCallback40,
   useContext as useContext25,
-  useEffect as useEffect34,
+  useEffect as useEffect35,
   useMemo as useMemo53,
   useRef as useRef70,
   useState as useState61
@@ -29013,7 +29058,7 @@ function SideNavLayoutProvider(props) {
   );
   const bp = useBreakpoint();
   const prevMdAndUp = useRef70(bp.mdAndUp);
-  useEffect34(() => {
+  useEffect35(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
@@ -29849,7 +29894,7 @@ function MetricButton(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback41, useEffect as useEffect35, useRef as useRef74 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect36, useRef as useRef74 } from "react";
 
 // src/utils/inlineStyles.ts
 function isInlineStyleValue(value) {
@@ -30020,7 +30065,7 @@ function DnDGrid(props) {
       addPointerDragListeners(onMove, onDragEnd);
     }
   }, [initReorder, onMove, onDragEnd]);
-  useEffect35(() => {
+  useEffect36(() => {
     return () => removePointerDragListeners(onMove, onDragEnd);
   }, [onMove, onDragEnd]);
   const onDragHandleKeyDown = useCallback41((e) => {
@@ -30777,7 +30822,7 @@ import { mergeProps as mergeProps40 } from "react-aria";
 import { trussProps as trussProps139 } from "@homebound/truss/runtime";
 
 // src/components/Grid/useResponsiveGridItem.ts
-import { useContext as useContext27, useEffect as useEffect36, useMemo as useMemo57 } from "react";
+import { useContext as useContext27, useEffect as useEffect37, useMemo as useMemo57 } from "react";
 var injectedResponsiveGridClasses = /* @__PURE__ */ new Set();
 var responsiveGridStyleEl;
 function useResponsiveGridItem(props) {
@@ -30807,7 +30852,7 @@ function useResponsiveGridItem(props) {
   };
 }
 function useResponsiveGridItemStyle(className, cssText) {
-  useEffect36(
+  useEffect37(
     function() {
       if (!className || !cssText || typeof document === "undefined") return;
       if (!responsiveGridStyleEl) {
@@ -30906,12 +30951,12 @@ function HbSpinnerProvider({
 }
 
 // src/components/Modal/OpenModal.tsx
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect38 } from "react";
 import { jsx as jsx246 } from "react/jsx-runtime";
 function OpenModal(props) {
   const { openModal } = useModal();
   const { size, children, keepOpen, aiMode } = props;
-  useEffect37(() => {
+  useEffect38(() => {
     if (!keepOpen) {
       openModal({ size, content: children, aiMode });
     }
@@ -30925,7 +30970,7 @@ function OpenModal(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence6, motion as motion7 } from "framer-motion";
-import { useEffect as useEffect38, useState as useState63 } from "react";
+import { useEffect as useEffect39, useState as useState63 } from "react";
 import { FocusScope as FocusScope7, usePreventScroll as usePreventScroll4 } from "react-aria";
 import { createPortal as createPortal11 } from "react-dom";
 import { useLocation } from "react-router-dom";
@@ -30977,7 +31022,7 @@ function NavbarMobileMenu(props) {
     isDisabled: !isOpen2
   });
   const close = () => setIsOpen(false);
-  useEffect38(() => {
+  useEffect39(() => {
     close();
   }, [pathname, search]);
   return /* @__PURE__ */ jsxs131(Fragment54, { children: [
@@ -31227,7 +31272,7 @@ function NavbarUserMenu({
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback43, useEffect as useEffect39 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect40 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
   const onClose = useCallback43(
@@ -31277,7 +31322,7 @@ function useSnackbar() {
     [onClose, setNotices]
   );
   const closeNotice = useCallback43((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => useEffect39(() => {
+  const useSnackbarOffset = ({ bottom }) => useEffect40(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -31326,7 +31371,7 @@ function simpleDataRows(data = []) {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase8 } from "change-case";
-import { useEffect as useEffect40, useMemo as useMemo60, useRef as useRef76, useState as useState65 } from "react";
+import { useEffect as useEffect41, useMemo as useMemo60, useRef as useRef76, useState as useState65 } from "react";
 import { mergeProps as mergeProps42, useFocusRing as useFocusRing22, useHover as useHover27 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
@@ -31408,7 +31453,7 @@ function Tabs(props) {
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState65(selected);
   const ref = useRef76(null);
-  useEffect40(() => setActive(selected), [selected]);
+  useEffect41(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
       const nextTabValue = getNextTabValue(active, e.key, tabs);
@@ -32276,7 +32321,7 @@ function FormSectionLayout(props) {
 }
 
 // src/layouts/PageBanner/usePageBanner.tsx
-import { useEffect as useEffect41, useId as useId5, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useEffect as useEffect42, useId as useId5, useLayoutEffect as useLayoutEffect18 } from "react";
 
 // src/layouts/PageBanner/pageBannerStore.ts
 var current;
@@ -32319,7 +32364,7 @@ function usePageBanner(banner) {
     setPageBanner(id, banner);
     return () => clearPageBanner(id);
   }, [id, banner]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!banner || hasPageBannerSubscriber() || process.env.NODE_ENV === "production") return;
     console.warn("[usePageBanner] No page layout above this component; the banner will not render.");
   }, [banner]);
@@ -32839,7 +32884,7 @@ function WorkflowPageRightPaneTriggers(props) {
 }
 
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
-import { useEffect as useEffect42, useRef as useRef82 } from "react";
+import { useEffect as useEffect43, useRef as useRef82 } from "react";
 import { useBlocker } from "react-router-dom";
 import { jsx as jsx268 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
@@ -32850,7 +32895,7 @@ function useUnsavedChangesGuard(options) {
   const allowNavigationRef = useRef82(allowNavigation);
   allowNavigationRef.current = allowNavigation;
   const allowCancelNavigationRef = useRef82(false);
-  useEffect42(() => {
+  useEffect43(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -32917,7 +32962,7 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  useEffect42(() => {
+  useEffect43(() => {
     openModal({
       allowClosing: false,
       content: /* @__PURE__ */ jsx268(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
@@ -33175,15 +33220,13 @@ function StepperLayout(props) {
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
   const [currentStep, setCurrentStep] = useState70(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "stepperLayout");
-  const { closeRightPane } = useRightPaneActions();
   const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex >= stepTabs.length - 1;
   const activeStep = stepTabs[currentIndex];
   function goToStep(value) {
     if (value === currentStep) return;
-    closeRightPane();
-    setCurrentStep(value);
+    closeRightPaneThen(() => setCurrentStep(value));
   }
   return /* @__PURE__ */ jsx272(
     WorkflowPageLayout,