react-dialogger 1.1.146 → 1.2.2

package/README.md

@@ -91,6 +91,129 @@ Access them using dialog.deps.*`
 
 
 
+# 🌉 Context Bridge (since v1.2.0)
+
+> Opt-in mechanism that lets dialog bodies consume React `Context` values from
+> the host application's main tree — without manual `inject/deps` plumbing for
+> every Context.
+
+#### Why it exists
+
+react-dialogger mounts each dialog into its **own** React root via `createRoot(...)`.
+This is by design (a dialog's lifetime is independent from the parent component
+that opened it), but the side effect is that `useContext(...)` inside a dialog
+body returns the `createContext` default (typically `null`) — Providers from the
+host tree do not reach across roots.
+
+The `inject` / `deps` API already solves this for explicit values. The Context
+Bridge complements it for the cases where:
+
+- you want to use existing hook-based code unchanged (`useContext(AppContext)`,
+  custom hooks like `useTheme`, `useAuth`, etc.) inside dialog bodies; or
+- you have many Contexts to forward and listing them in every `inject({...})`
+  call is noisy.
+
+The bridge is **opt-in and orthogonal to inject/deps** — existing dialogs that
+do not opt in see zero behavior change.
+
+#### Setup — one component, one place
+
+Mount `<DialogContextHost contexts={[...]}/>` once in your app's main tree,
+**beneath** every Provider you want to bridge:
+
+```jsx
+import { DialogContextHost } from "react-dialogger";
+import { AppContext } from "./contexts/AppContext";
+import { ThemeContext } from "./contexts/ThemeContext";
+
+function App() {
+    return (
+        <AppContextProvider>
+            <ThemeProvider>
+                {/* anywhere below the Providers you want to bridge */}
+                <DialogContextHost contexts={[AppContext, ThemeContext]} />
+
+                <Router>{/* ...your app... */}</Router>
+            </ThemeProvider>
+        </AppContextProvider>
+    );
+}
+```
+
+That is the entire setup. Every dialog opened from anywhere in the app from
+this point on will see the bridged Context values inside its body — no
+`setBody` wrapping, no `inject` calls for these Contexts.
+
+#### Dialog body — unchanged
+
+```jsx
+const MyDialogBody = ({ dialog }) => {
+    // Works exactly as if the body were rendered inside the host tree.
+    const app   = React.useContext(AppContext);
+    const theme = React.useContext(ThemeContext);
+
+    return <div>Hello {app.user.name}</div>;
+};
+
+new Dialog(null, { /* opts */ })
+    .setHeader(() => "Greeting")
+    .setBody(d => <MyDialogBody dialog={d} />)
+    .show();
+```
+
+#### Rules and gotchas
+
+1. **Place `<DialogContextHost/>` below every Provider you list.** `useContext(X)`
+   returns the createContext default if no `X.Provider` ancestor exists — so the
+   bridge would capture (and propagate) `null`. The fix is structural: position
+   the Host inside the relevant Providers.
+
+2. **If a bridged Context's Provider is only mounted in some pages, the bridge
+   delivers `null` from pages where it is unmounted.** Two ways to handle this:
+   - Mount the Provider higher up (e.g. at app root) so it is always present.
+   - Or wrap the dialog body locally with that Provider: the nearest Provider
+     wins, so a body-local Provider overrides the bridge's `null`.
+     ```jsx
+     .setBody(d => (
+         <ExpenseProvider>      {/* fresh, only for this dialog */}
+             <MyExpenseBody dialog={d} />
+         </ExpenseProvider>
+     ))
+     ```
+
+3. **The bridge is transparent when not used.** Omit `<DialogContextHost/>` and
+   the internal wrapper detects the empty snapshot and renders children
+   unchanged. Existing pre-v1.2 projects upgrade with no code changes.
+
+4. **`inject` / `deps` still works.** Use it for primitive values, callbacks, or
+   anything you do not want as a full React Context. The bridge does not
+   replace it.
+
+#### Architecture (for the curious)
+
+```
+HOST REACT ROOT                          DIALOG ROOT (per Dialog.show())
++-----------------------+               +------------------------------+
+|  <AppContextProvider>                  |  (internal) ContextProvide  |
+|   <ThemeProvider>                      |    +- AppContext.Provider   |
+|     <DialogContextHost                 |    |   +- ThemeContext.Pr.  |
+|        contexts={[X,Y]}/>|-- channel ->|    |   |   +- DialogBase    |
+|     <Router>                           |    |   |       +- UserBody  |
+|       ...                              |    |   |          useContext(...)
++-----------------------+               +------------------------------+
+                |
+                v
+       globalDialogBridge (module singleton — pub/sub)
+       Host writes here, every open dialog reads from here
+```
+
+`DialogContextHost` mounts one capture slot per registered Context, each calling
+`useContext` exactly once and writing the value into the singleton channel.
+Internally, every dialog body is wrapped with a Provider component that reads the
+channel via `useSyncExternalStore` and re-supplies each Context as a `<Ctx.Provider>`
+above the body. React's "nearest Provider wins" rule then makes hook-based code
+in the body work transparently.
+
 
 # Why react-dialogger?
 > react-dialogger is built for React applications that need dynamic, runtime-managed dialogs rather than static JSX-based modals.

package/bridge/DialogContextHost.d.ts

@@ -0,0 +1,43 @@
+/**
+ * DialogContextHost (PUBLIC)
+ * --------------------------
+ * Mounted ONCE in the host application's main React tree to enable the Context
+ * Bridge. Reads the current value of every Context listed in the `contexts` prop
+ * and publishes them to the internal pub/sub channel — opt-in dialog bodies
+ * automatically consume these values.
+ *
+ * The host component must be placed BELOW the Providers of every Context it
+ * intends to bridge — `useContext(X)` returns the createContext default
+ * (typically null) if no `X.Provider` ancestor exists.
+ *
+ *   <AppProvider>
+ *       <ThemeProvider>
+ *           <DialogContextHost contexts={[AppContext, ThemeContext]} />
+ *           <Router>...</Router>
+ *       </ThemeProvider>
+ *   </AppProvider>
+ *
+ * Renders nothing visible. Each bridged Context gets its own `CaptureSlot`
+ * subcomponent — this is intentional, so React's hook order stays stable even
+ * when the `contexts` prop changes shape (each slot calls `useContext` exactly
+ * once on its own).
+ */
+import * as React from "react";
+import { BridgedContext } from "./channel";
+export interface DialogContextHostProps {
+    /**
+     * Contexts to bridge into every dialog opened by this package.
+     *
+     * Each Context's Provider must be an ancestor of this `DialogContextHost`
+     * element; otherwise the captured value will be the createContext default
+     * (typically null), which is harmless but means the bridge effectively does
+     * nothing for that Context.
+     */
+    contexts: ReadonlyArray<BridgedContext>;
+}
+/**
+ * Mount this once in the host application's main React tree, beneath every
+ * Provider whose Context you want to bridge to dialog bodies.
+ */
+export declare const DialogContextHost: React.FC<DialogContextHostProps>;
+export default DialogContextHost;

package/bridge/DialogContextHost.js

@@ -0,0 +1,90 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContextHost = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DialogContextHost (PUBLIC)
+ * --------------------------
+ * Mounted ONCE in the host application's main React tree to enable the Context
+ * Bridge. Reads the current value of every Context listed in the `contexts` prop
+ * and publishes them to the internal pub/sub channel — opt-in dialog bodies
+ * automatically consume these values.
+ *
+ * The host component must be placed BELOW the Providers of every Context it
+ * intends to bridge — `useContext(X)` returns the createContext default
+ * (typically null) if no `X.Provider` ancestor exists.
+ *
+ *   <AppProvider>
+ *       <ThemeProvider>
+ *           <DialogContextHost contexts={[AppContext, ThemeContext]} />
+ *           <Router>...</Router>
+ *       </ThemeProvider>
+ *   </AppProvider>
+ *
+ * Renders nothing visible. Each bridged Context gets its own `CaptureSlot`
+ * subcomponent — this is intentional, so React's hook order stays stable even
+ * when the `contexts` prop changes shape (each slot calls `useContext` exactly
+ * once on its own).
+ */
+var React = __importStar(require("react"));
+var channel_1 = require("./channel");
+/**
+ * Internal: a single capture point for ONE Context. Calls `useContext(ctx)` and
+ * writes the value into the channel whenever it changes.
+ *
+ * We copy-then-mutate-then-publish so concurrent slots do not clobber each
+ * other's entries in the shared snapshot.
+ */
+var CaptureSlot = function (_a) {
+    var ctx = _a.ctx, channel = _a.channel;
+    var value = React.useContext(ctx);
+    React.useEffect(function () {
+        var next = new Map(channel.getSnapshot());
+        next.set(ctx, value);
+        channel.setSnapshot(next);
+    }, [ctx, value, channel]);
+    return null;
+};
+/**
+ * Mount this once in the host application's main React tree, beneath every
+ * Provider whose Context you want to bridge to dialog bodies.
+ */
+var DialogContextHost = function (_a) {
+    var contexts = _a.contexts;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: contexts.map(function (Ctx, i) { return ((0, jsx_runtime_1.jsx)(CaptureSlot, { ctx: Ctx, channel: channel_1.globalDialogBridge }, i)); }) }));
+};
+exports.DialogContextHost = DialogContextHost;
+exports.default = exports.DialogContextHost;

package/bridge/DialogContextProvide.d.ts

@@ -0,0 +1,28 @@
+/**
+ * DialogContextProvide (INTERNAL)
+ * -------------------------------
+ * NOT part of the public API. The Dialog model wraps every body with this
+ * component automatically — host applications must not import or use it.
+ *
+ * Subscribes to `globalDialogBridge`, reads the current snapshot, and re-supplies
+ * every captured Context as a Provider above `children`. React's nearest-Provider
+ * rule means the dialog body sees these values as if it lived inside the host
+ * tree.
+ *
+ * If the channel snapshot is empty (no `<DialogContextHost/>` mounted, or empty
+ * `contexts` prop), this component is a transparent pass-through — zero
+ * Providers wrapped, zero behavior change. This is the backwards-compatibility
+ * guarantee for existing users who do not opt into the bridge.
+ *
+ * Override semantics: dialog body authors may wrap their own component in an
+ * additional `<X.Provider>` to override the bridged value for that Context. The
+ * nearest Provider wins. This is the recommended pattern when the bridged value
+ * is null (because the source Provider is not mounted in the host tree at the
+ * moment the dialog opens).
+ */
+import * as React from "react";
+interface DialogContextProvideProps {
+    children: React.ReactNode;
+}
+export declare const DialogContextProvide: React.FC<DialogContextProvideProps>;
+export default DialogContextProvide;

package/bridge/DialogContextProvide.js

@@ -0,0 +1,81 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContextProvide = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DialogContextProvide (INTERNAL)
+ * -------------------------------
+ * NOT part of the public API. The Dialog model wraps every body with this
+ * component automatically — host applications must not import or use it.
+ *
+ * Subscribes to `globalDialogBridge`, reads the current snapshot, and re-supplies
+ * every captured Context as a Provider above `children`. React's nearest-Provider
+ * rule means the dialog body sees these values as if it lived inside the host
+ * tree.
+ *
+ * If the channel snapshot is empty (no `<DialogContextHost/>` mounted, or empty
+ * `contexts` prop), this component is a transparent pass-through — zero
+ * Providers wrapped, zero behavior change. This is the backwards-compatibility
+ * guarantee for existing users who do not opt into the bridge.
+ *
+ * Override semantics: dialog body authors may wrap their own component in an
+ * additional `<X.Provider>` to override the bridged value for that Context. The
+ * nearest Provider wins. This is the recommended pattern when the bridged value
+ * is null (because the source Provider is not mounted in the host tree at the
+ * moment the dialog opens).
+ */
+var React = __importStar(require("react"));
+var channel_1 = require("./channel");
+var DialogContextProvide = function (_a) {
+    var children = _a.children;
+    var subscribe = React.useCallback(function (cb) { return channel_1.globalDialogBridge.subscribe(cb); }, []);
+    var getSnapshot = React.useCallback(function () { return channel_1.globalDialogBridge.getSnapshot(); }, []);
+    // useSyncExternalStore is React 18+. The package's peerDependencies already
+    // pin `react: ^18.2.0`, so this is safe.
+    var snapshot = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    // Map iteration order follows insertion order; the FIRST inserted Context
+    // becomes the OUTERMOST Provider, the LAST inserted is nearest to children.
+    // For host-body overrides (a body wrapping its own <X.Provider>), the body's
+    // wrap is even closer to the consumer than this layer, so it wins regardless
+    // of which slot inserted X here.
+    var node = children;
+    snapshot.forEach(function (value, Ctx) {
+        node = (0, jsx_runtime_1.jsx)(Ctx.Provider, { value: value, children: node });
+    });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: node });
+};
+exports.DialogContextProvide = DialogContextProvide;
+exports.default = exports.DialogContextProvide;

package/bridge/channel.d.ts

@@ -0,0 +1,51 @@
+/**
+ * DialogBridgeChannel
+ * -------------------
+ * Internal pub/sub channel used by the Context Bridge.
+ *
+ * react-dialogger mounts each dialog into its OWN React root via `createRoot(...)`,
+ * which makes it impossible for the dialog body to consume Context values from the
+ * host application's tree using `useContext(...)`.
+ *
+ * The Context Bridge solves this by:
+ *   1. Letting the host app declare a list of Contexts to bridge by mounting
+ *      `<DialogContextHost contexts={[...]}/>` once in the main tree.
+ *   2. Capturing the value of each registered Context in the main tree and
+ *      pushing it into this singleton channel.
+ *   3. Internally wrapping every dialog body with `<DialogContextProvide/>` which
+ *      reads the channel and re-supplies each Context as a Provider in the dialog
+ *      tree.
+ *
+ * Public API exposed via the package entry point: only `DialogContextHost`.
+ * This channel and `DialogContextProvide` are internal — host applications should
+ * never reach into them directly.
+ */
+import * as React from "react";
+/** A React Context whose value can be anything. The bridge is value-agnostic. */
+export type BridgedContext = React.Context<any>;
+/** A snapshot of all bridged Contexts' current values. */
+export type ContextSnapshot = Map<BridgedContext, any>;
+/**
+ * Pub/sub channel between the host capture component and per-dialog provide.
+ *
+ * One module-level singleton (`globalDialogBridge`) is shared across the entire
+ * application — host capture writes, every open dialog subscribes. This is safe
+ * because there is only ever one main React tree per application; if you have
+ * multiple isolated apps on a single page, they should each ship their own copy
+ * of this module via independent bundles.
+ */
+export declare class DialogBridgeChannel {
+    private snapshot;
+    private listeners;
+    /** Replace the current snapshot and notify every subscriber. */
+    setSnapshot(next: ContextSnapshot): void;
+    /** Read the current snapshot. Safe to call from any tree. */
+    getSnapshot(): ContextSnapshot;
+    /** Subscribe to snapshot changes. Returns an unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+}
+/**
+ * The single bridge channel. Capture (in host tree) writes; Provide (in every
+ * dialog tree) reads. Never re-instantiate — import this exact reference.
+ */
+export declare const globalDialogBridge: DialogBridgeChannel;

package/bridge/channel.js

@@ -0,0 +1,64 @@
+"use strict";
+/**
+ * DialogBridgeChannel
+ * -------------------
+ * Internal pub/sub channel used by the Context Bridge.
+ *
+ * react-dialogger mounts each dialog into its OWN React root via `createRoot(...)`,
+ * which makes it impossible for the dialog body to consume Context values from the
+ * host application's tree using `useContext(...)`.
+ *
+ * The Context Bridge solves this by:
+ *   1. Letting the host app declare a list of Contexts to bridge by mounting
+ *      `<DialogContextHost contexts={[...]}/>` once in the main tree.
+ *   2. Capturing the value of each registered Context in the main tree and
+ *      pushing it into this singleton channel.
+ *   3. Internally wrapping every dialog body with `<DialogContextProvide/>` which
+ *      reads the channel and re-supplies each Context as a Provider in the dialog
+ *      tree.
+ *
+ * Public API exposed via the package entry point: only `DialogContextHost`.
+ * This channel and `DialogContextProvide` are internal — host applications should
+ * never reach into them directly.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalDialogBridge = exports.DialogBridgeChannel = void 0;
+/**
+ * Pub/sub channel between the host capture component and per-dialog provide.
+ *
+ * One module-level singleton (`globalDialogBridge`) is shared across the entire
+ * application — host capture writes, every open dialog subscribes. This is safe
+ * because there is only ever one main React tree per application; if you have
+ * multiple isolated apps on a single page, they should each ship their own copy
+ * of this module via independent bundles.
+ */
+var DialogBridgeChannel = /** @class */ (function () {
+    function DialogBridgeChannel() {
+        this.snapshot = new Map();
+        this.listeners = new Set();
+    }
+    /** Replace the current snapshot and notify every subscriber. */
+    DialogBridgeChannel.prototype.setSnapshot = function (next) {
+        this.snapshot = next;
+        this.listeners.forEach(function (l) { return l(); });
+    };
+    /** Read the current snapshot. Safe to call from any tree. */
+    DialogBridgeChannel.prototype.getSnapshot = function () {
+        return this.snapshot;
+    };
+    /** Subscribe to snapshot changes. Returns an unsubscribe function. */
+    DialogBridgeChannel.prototype.subscribe = function (listener) {
+        var _this = this;
+        this.listeners.add(listener);
+        return function () {
+            _this.listeners.delete(listener);
+        };
+    };
+    return DialogBridgeChannel;
+}());
+exports.DialogBridgeChannel = DialogBridgeChannel;
+/**
+ * The single bridge channel. Capture (in host tree) writes; Provide (in every
+ * dialog tree) reads. Never re-instantiate — import this exact reference.
+ */
+exports.globalDialogBridge = new DialogBridgeChannel();

package/bridge/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Bridge module — internal barrel.
+ *
+ * Only `DialogContextHost` is re-exported from the package root (`src/index.tsx`).
+ * `DialogContextProvide`, `globalDialogBridge`, and the channel class are
+ * intentionally internal — they are used by the Dialog model to wrap each
+ * dialog body, but host applications should never import them directly.
+ */
+export { DialogContextHost } from "./DialogContextHost";
+export type { DialogContextHostProps } from "./DialogContextHost";
+export { DialogContextProvide } from "./DialogContextProvide";
+export type { BridgedContext, ContextSnapshot } from "./channel";
+export { DialogBridgeChannel, globalDialogBridge } from "./channel";

package/bridge/index.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * Bridge module — internal barrel.
+ *
+ * Only `DialogContextHost` is re-exported from the package root (`src/index.tsx`).
+ * `DialogContextProvide`, `globalDialogBridge`, and the channel class are
+ * intentionally internal — they are used by the Dialog model to wrap each
+ * dialog body, but host applications should never import them directly.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalDialogBridge = exports.DialogBridgeChannel = exports.DialogContextProvide = exports.DialogContextHost = void 0;
+var DialogContextHost_1 = require("./DialogContextHost");
+Object.defineProperty(exports, "DialogContextHost", { enumerable: true, get: function () { return DialogContextHost_1.DialogContextHost; } });
+// Internal — consumed by `models/Dialog.tsx` only.
+var DialogContextProvide_1 = require("./DialogContextProvide");
+Object.defineProperty(exports, "DialogContextProvide", { enumerable: true, get: function () { return DialogContextProvide_1.DialogContextProvide; } });
+var channel_1 = require("./channel");
+Object.defineProperty(exports, "DialogBridgeChannel", { enumerable: true, get: function () { return channel_1.DialogBridgeChannel; } });
+Object.defineProperty(exports, "globalDialogBridge", { enumerable: true, get: function () { return channel_1.globalDialogBridge; } });

package/components/DialogContentBody.js

@@ -125,7 +125,9 @@ var PlaceholderWrapper = function (_a) {
         ? React.cloneElement(initialElement, __assign(__assign({}, dialog.dialogOptions.slotProps.loader), { values: dialog.values, inProcess: dialog.isInProcess() }))
         : null;
     var backgroundColor = (_c = dialogOptions.base.style.backgroundColor) !== null && _c !== void 0 ? _c : "#FFFFFF";
-    return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-content-placeholder', style: { display: inProcess.loading ? 'flex' : 'none', backgroundColor: backgroundColor }, children: LoaderSlotElement });
+    return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-content-placeholder', style: { display: inProcess.loading ? 'flex' : 'none', backgroundColor: backgroundColor, 
+            // @ts-ignore
+            zIndex: parseInt(dialog.getDom().style.zIndex) }, children: LoaderSlotElement });
 };
 // const DialogContentBody: React.FC<IContentBodyProps> = React.forwardRef(({
 //         body

package/index.d.ts

@@ -7,3 +7,5 @@ export { DialogProcessing, DialogCloseAction, DialogFullscreenAction, DialogActi
 export { DialogAction, ActionProgress, baseDialogOptions } from "./models";
 export { InitDialogMemoizeBounds } from "./helpers";
 export { IDialogApiDef, ActionApiDef } from './types';
+export { DialogContextHost } from "./bridge";
+export type { DialogContextHostProps } from "./bridge";

package/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitDialogMemoizeBounds = exports.baseDialogOptions = exports.ActionProgress = exports.DialogAction = exports.DialogInfoAction = exports.DialogActionsWrapper = exports.DialogFullscreenAction = exports.DialogCloseAction = exports.DialogProcessing = exports.default = void 0;
+exports.DialogContextHost = exports.InitDialogMemoizeBounds = exports.baseDialogOptions = exports.ActionProgress = exports.DialogAction = exports.DialogInfoAction = exports.DialogActionsWrapper = exports.DialogFullscreenAction = exports.DialogCloseAction = exports.DialogProcessing = exports.default = void 0;
 require("./styles/dialog.css");
 require("./styles/dialog.action.css");
 require("./styles/circular-progress.css");
@@ -24,3 +24,9 @@ Object.defineProperty(exports, "baseDialogOptions", { enumerable: true, get: fun
 // Hooks
 var helpers_1 = require("./helpers");
 Object.defineProperty(exports, "InitDialogMemoizeBounds", { enumerable: true, get: function () { return helpers_1.InitDialogMemoizeBounds; } });
+// Context Bridge — opt-in mechanism that lets dialog bodies consume Contexts
+// from the host application's main React tree without manual inject/deps.
+// Mount <DialogContextHost contexts={[...]}/> once in the main tree; nothing
+// else is needed at dialog call sites. See ./bridge/* and README for details.
+var bridge_1 = require("./bridge");
+Object.defineProperty(exports, "DialogContextHost", { enumerable: true, get: function () { return bridge_1.DialogContextHost; } });

package/models/Dialog.js

@@ -51,6 +51,10 @@ var React = __importStar(require("react"));
 var DialogBase_1 = __importDefault(require("../components/DialogBase"));
 var client_1 = require("react-dom/client");
 var appLogger_1 = require("../helpers/appLogger");
+// Internal Context Bridge wrapper. Wraps every dialog body so that Contexts
+// registered via <DialogContextHost/> in the host tree flow into the dialog
+// tree. No behavior change when no host is mounted (empty snapshot → no-op).
+var bridge_1 = require("../bridge");
 var Dialog = /** @class */ (function () {
     // private _initialValues                :Dialogify<V>;
     function Dialog(dialogRef, options, _initialValues, _inject) {
@@ -240,10 +244,20 @@ var Dialog = /** @class */ (function () {
         // >, props ) );
         // root.render( React.createElement( DialogBase as React.ComponentType<BaseDialogProps<Values, I>>, props ) );
         var element = React.createElement(DialogBase_1.default, props);
+        // Internal Context Bridge: every dialog body is wrapped so that Contexts
+        // registered by the host application via <DialogContextHost/> flow into
+        // the dialog's React root. If no host is mounted (or its contexts list
+        // is empty), the snapshot is empty and DialogContextProvide passes
+        // children through untouched — zero behavior change for existing users
+        // who do not opt into the bridge.
+        var bridged = React.createElement(bridge_1.DialogContextProvide, null, element);
         // Wrapper varsa sar, yoksa direkt render
+        // Sıralama: globalWrapper (kullanıcı tanımlı) en dışta, ardından bridge,
+        // en içte gerçek dialog ağacı. Bu sayede globalWrapper'ın eklediği
+        // Provider'ları bridge override edebilir (en yakın Provider kuralı).
         root.render(Dialog._globalWrapper
-            ? React.createElement(Dialog._globalWrapper, null, element)
-            : element);
+            ? React.createElement(Dialog._globalWrapper, null, bridged)
+            : bridged);
     };
     return Dialog;
 }());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.146",
+  "version": "1.2.2",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",