@homebound/beam 2.299.0 → 2.300.0

package/dist/components/AutoSaveStatus/AutoSaveStatusProvider.d.ts

@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from "react";
+export declare enum AutoSaveStatus {
+    IDLE = "idle",
+    SAVING = "saving",
+    DONE = "done",
+    ERROR = "error"
+}
+export interface AutoSaveStatusContextType {
+    status: AutoSaveStatus;
+    /** Resets status to IDLE, particularly useful if "Error" or "Done" is stale */
+    resetStatus: VoidFunction;
+    errors: unknown[];
+    /** Notifies AutoSaveContext that a request is in-flight */
+    triggerAutoSave: VoidFunction;
+    /** Notifies AutoSaveContext that a request has settled, optionally taking an error */
+    resolveAutoSave: (error?: unknown) => void;
+}
+export declare const AutoSaveStatusContext: React.Context<AutoSaveStatusContextType>;
+type AutoSaveStatusProviderProps = PropsWithChildren<{
+    /** After a successful save, reset Status back to `Idle` after this many milliseconds */
+    resetToIdleTimeout?: number;
+}>;
+export declare function AutoSaveStatusProvider({ children, resetToIdleTimeout }: AutoSaveStatusProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AutoSaveStatus/AutoSaveStatusProvider.js

@@ -0,0 +1,89 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoSaveStatusProvider = exports.AutoSaveStatusContext = exports.AutoSaveStatus = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+var AutoSaveStatus;
+(function (AutoSaveStatus) {
+    AutoSaveStatus["IDLE"] = "idle";
+    AutoSaveStatus["SAVING"] = "saving";
+    AutoSaveStatus["DONE"] = "done";
+    AutoSaveStatus["ERROR"] = "error";
+})(AutoSaveStatus = exports.AutoSaveStatus || (exports.AutoSaveStatus = {}));
+exports.AutoSaveStatusContext = react_1.default.createContext({
+    status: AutoSaveStatus.IDLE,
+    resetStatus() { },
+    errors: [],
+    triggerAutoSave() { },
+    resolveAutoSave() { },
+});
+function AutoSaveStatusProvider({ children, resetToIdleTimeout = 6000 }) {
+    const [status, setStatus] = (0, react_1.useState)(AutoSaveStatus.IDLE);
+    const [errors, setErrors] = (0, react_1.useState)([]);
+    const [inFlight, setInFlight] = (0, react_1.useState)(0);
+    const resetToIdleTimeoutRef = (0, react_1.useRef)(null);
+    /** Handles setting Status */
+    (0, react_1.useEffect)(() => {
+        if (inFlight > 0)
+            return setStatus(AutoSaveStatus.SAVING);
+        if (status === AutoSaveStatus.IDLE)
+            return;
+        if (errors.length)
+            return setStatus(AutoSaveStatus.ERROR);
+        return setStatus(AutoSaveStatus.DONE);
+    }, [errors.length, inFlight, status]);
+    const triggerAutoSave = (0, react_1.useCallback)(() => {
+        setInFlight((c) => c + 1);
+        setErrors([]);
+    }, []);
+    const resolveAutoSave = (0, react_1.useCallback)((error) => {
+        setInFlight((c) => Math.max(0, c - 1));
+        if (error)
+            setErrors((errs) => errs.concat(error));
+    }, []);
+    const resetStatus = (0, react_1.useCallback)(() => {
+        setStatus(AutoSaveStatus.IDLE);
+        setErrors([]);
+    }, []);
+    /** Resets AutoSaveStatus from "Done" to "Idle" after a timeout, if one is provided */
+    (0, react_1.useEffect)(() => {
+        if (resetToIdleTimeout === undefined)
+            return;
+        // Specifically avoid auto-reset if Errors are present
+        if (status !== AutoSaveStatus.DONE)
+            return;
+        // Only run the latest Timeout
+        if (resetToIdleTimeoutRef.current)
+            clearTimeout(resetToIdleTimeoutRef.current);
+        resetToIdleTimeoutRef.current = window.setTimeout(() => {
+            resetStatus();
+            resetToIdleTimeoutRef.current = null;
+        }, resetToIdleTimeout);
+    }, [resetStatus, resetToIdleTimeout, status]);
+    const value = (0, react_1.useMemo)(() => ({ status, resetStatus, errors, triggerAutoSave, resolveAutoSave }), [errors, resetStatus, resolveAutoSave, status, triggerAutoSave]);
+    return (0, jsx_runtime_1.jsx)(exports.AutoSaveStatusContext.Provider, { value: value, children: children });
+}
+exports.AutoSaveStatusProvider = AutoSaveStatusProvider;

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

@@ -0,0 +1,2 @@
+export { AutoSaveStatus, AutoSaveStatusContext, AutoSaveStatusProvider } from "./AutoSaveStatusProvider";
+export { useAutoSaveStatus } from "./useAutoSaveStatus";

package/dist/components/AutoSaveStatus/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoSaveStatus = exports.AutoSaveStatusProvider = exports.AutoSaveStatusContext = exports.AutoSaveStatus = void 0;
+var AutoSaveStatusProvider_1 = require("./AutoSaveStatusProvider");
+Object.defineProperty(exports, "AutoSaveStatus", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatus; } });
+Object.defineProperty(exports, "AutoSaveStatusContext", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatusContext; } });
+Object.defineProperty(exports, "AutoSaveStatusProvider", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatusProvider; } });
+var useAutoSaveStatus_1 = require("./useAutoSaveStatus");
+Object.defineProperty(exports, "useAutoSaveStatus", { enumerable: true, get: function () { return useAutoSaveStatus_1.useAutoSaveStatus; } });

package/dist/components/AutoSaveStatus/useAutoSaveStatus.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Provides access to the current auto-save status, i.e. idle/saving/done.
+ *
+ * Applications should generally instrument their network layer, i.e. GraphQL
+ * mutations, to automatically update the auto-save status on any wire call,
+ * and then just use this `useAutoSaveStatus` to "show spinners" in appropriate
+ * places.
+ *
+ * See the `apolloHooks.ts` file in `internal-frontend` for an example.
+ */
+export declare function useAutoSaveStatus(): import("./AutoSaveStatusProvider").AutoSaveStatusContextType;

package/dist/components/AutoSaveStatus/useAutoSaveStatus.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoSaveStatus = void 0;
+const react_1 = require("react");
+const AutoSaveStatusProvider_1 = require("./AutoSaveStatusProvider");
+/**
+ * Provides access to the current auto-save status, i.e. idle/saving/done.
+ *
+ * Applications should generally instrument their network layer, i.e. GraphQL
+ * mutations, to automatically update the auto-save status on any wire call,
+ * and then just use this `useAutoSaveStatus` to "show spinners" in appropriate
+ * places.
+ *
+ * See the `apolloHooks.ts` file in `internal-frontend` for an example.
+ */
+function useAutoSaveStatus() {
+    return (0, react_1.useContext)(AutoSaveStatusProvider_1.AutoSaveStatusContext);
+}
+exports.useAutoSaveStatus = useAutoSaveStatus;

package/dist/components/BeamContext.js

@@ -2,26 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBeamContext = exports.BeamProvider = exports.BeamContext = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const form_state_1 = require("@homebound/form-state");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
+const index_1 = require("./AutoSaveStatus/index");
 const Modal_1 = require("./Modal/Modal");
 const PresentationContext_1 = require("./PresentationContext");
 const SnackbarContext_1 = require("./Snackbar/SnackbarContext");
 const SuperDrawer_1 = require("./SuperDrawer/SuperDrawer");
-const index_1 = require("../utils/index");
+const index_2 = require("../utils/index");
 const Layout_1 = require("./Layout");
 const ToastContext_1 = require("./Toast/ToastContext");
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
 exports.BeamContext = (0, react_1.createContext)({
-    modalState: new index_1.EmptyRef(),
-    modalCanCloseChecks: new index_1.EmptyRef(),
+    modalState: new index_2.EmptyRef(),
+    modalCanCloseChecks: new index_2.EmptyRef(),
     modalHeaderDiv: undefined,
     modalBodyDiv: undefined,
     modalFooterDiv: undefined,
-    drawerContentStack: new index_1.EmptyRef(),
-    drawerCanCloseChecks: new index_1.EmptyRef(),
-    drawerCanCloseDetailsChecks: new index_1.EmptyRef(),
+    drawerContentStack: new index_2.EmptyRef(),
+    drawerCanCloseChecks: new index_2.EmptyRef(),
+    drawerCanCloseDetailsChecks: new index_2.EmptyRef(),
     sdHeaderDiv: undefined,
 });
 function BeamProvider({ children, ...presentationProps }) {
@@ -61,7 +61,7 @@ function BeamProvider({ children, ...presentationProps }) {
             sdHeaderDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
-    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, { value: { ...context }, children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { ...presentationProps, children: (0, jsx_runtime_1.jsx)(Layout_1.RightPaneProvider, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)(SnackbarContext_1.SnackbarProvider, { children: (0, jsx_runtime_1.jsxs)(ToastContext_1.ToastProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...modalRef.current })] }), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {})] }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, { value: { ...context }, children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { ...presentationProps, children: (0, jsx_runtime_1.jsx)(Layout_1.RightPaneProvider, { children: (0, jsx_runtime_1.jsx)(index_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)(SnackbarContext_1.SnackbarProvider, { children: (0, jsx_runtime_1.jsxs)(ToastContext_1.ToastProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...modalRef.current })] }), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {})] }) }) }) }) }) }));
 }
 exports.BeamProvider = BeamProvider;
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./AutoSaveStatus";
 export * from "./Chip";
 export * from "./Chips";
 export * from "./Table/GridTable";

package/dist/components/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useToast = exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.HB_QUIPS_MISSION = exports.HB_QUIPS_FLAVOR = exports.HbSpinnerProvider = exports.HbLoadingSpinner = exports.BeamProvider = void 0;
+__exportStar(require("./AutoSaveStatus"), exports);
 __exportStar(require("./Chip"), exports);
 __exportStar(require("./Chips"), exports);
 __exportStar(require("./Table/GridTable"), exports);

package/package.json

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