@rokku-x/react-hook-dialog 1.2.0 → 1.2.1

package/README.md

@@ -2,6 +2,8 @@
 
 [![CI](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml/badge.svg)](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![license](https://img.shields.io/npm/l/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![downloads](https://img.shields.io/npm/dm/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) ![TS](https://img.shields.io/badge/TS-%E2%9C%93-blue)
 
+<p><a href="https://jgd.qzz.io/rhd.png"><img src="https://jgd.qzz.io/rhd.png" alt="react-hook-dialog Logo" width="600"/></a></p>
+
 A lightweight, powerful, and flexible React dialog hook library for confirmation dialogs, alerts, and modals. Built on top of `@rokku-x/react-hook-modal` with a focus on dialog-specific features like action buttons, variants, and customizable styling.
 
 ## Features
@@ -299,6 +301,42 @@ import { BaseDialogRenderer } from '@rokku-x/react-hook-dialog';
 
 > Note: `BaseModalRenderer` from `@rokku-x/react-hook-modal` can still be used directly if you prefer — this wrapper only adds `defaultConfig` convenience.
 
+### Multiple renderer instances 🔁
+
+You can mount multiple modal renderers (either `BaseDialogRenderer` from this package or the upstream `BaseModalRenderer`) and give each a unique `id`. Use the `instanceId` option (in the hook's `defaultConfig` or per-call `ConfirmConfig`) to target which renderer/store should manage the dialog.
+
+- Mount two renderers:
+
+```tsx
+<BaseDialogRenderer id="primary" defaultConfig={{ showCloseButton: false }} />
+<BaseDialogRenderer id="secondary" defaultConfig={{ showCloseButton: true }} />
+```
+
+- Use the hook with a default instance:
+
+```tsx
+const [requestDialog] = useHookDialog({ instanceId: 'secondary' });
+await requestDialog({ title: 'Settings' });
+```
+
+- Or target a renderer per call:
+
+```tsx
+const [requestDialog] = useHookDialog();
+await requestDialog({ title: 'Switch', instanceId: 'primary' });
+```
+
+- Programmatic store access:
+
+```ts
+import storeDialog from '@rokku-x/react-hook-dialog';
+const primaryStore = storeDialog('primary'); // returns the zustand store hook
+const state = primaryStore.getState();
+primaryStore.setState({ rendererDefaultConfig: { /* ... */ } });
+```
+
+> Note: The default instance id is `"default"`. Make sure you mount a renderer with the same `id` if you want dialogs to be visible. If a renderer with the requested id is not mounted, the store will still be created and you can use it programmatically, but dialogs will not be rendered until a matching renderer is mounted.
+
 ### Backdrop
 
 Overlay component that wraps dialog windows.

package/dist/README.md

@@ -2,6 +2,8 @@
 
 [![CI](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml/badge.svg)](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![license](https://img.shields.io/npm/l/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![downloads](https://img.shields.io/npm/dm/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) ![TS](https://img.shields.io/badge/TS-%E2%9C%93-blue)
 
+<p><a href="https://jgd.qzz.io/rhd.png"><img src="https://jgd.qzz.io/rhd.png" alt="react-hook-dialog Logo" width="600"/></a></p>
+
 A lightweight, powerful, and flexible React dialog hook library for confirmation dialogs, alerts, and modals. Built on top of `@rokku-x/react-hook-modal` with a focus on dialog-specific features like action buttons, variants, and customizable styling.
 
 ## Features
@@ -299,6 +301,42 @@ import { BaseDialogRenderer } from '@rokku-x/react-hook-dialog';
 
 > Note: `BaseModalRenderer` from `@rokku-x/react-hook-modal` can still be used directly if you prefer — this wrapper only adds `defaultConfig` convenience.
 
+### Multiple renderer instances 🔁
+
+You can mount multiple modal renderers (either `BaseDialogRenderer` from this package or the upstream `BaseModalRenderer`) and give each a unique `id`. Use the `instanceId` option (in the hook's `defaultConfig` or per-call `ConfirmConfig`) to target which renderer/store should manage the dialog.
+
+- Mount two renderers:
+
+```tsx
+<BaseDialogRenderer id="primary" defaultConfig={{ showCloseButton: false }} />
+<BaseDialogRenderer id="secondary" defaultConfig={{ showCloseButton: true }} />
+```
+
+- Use the hook with a default instance:
+
+```tsx
+const [requestDialog] = useHookDialog({ instanceId: 'secondary' });
+await requestDialog({ title: 'Settings' });
+```
+
+- Or target a renderer per call:
+
+```tsx
+const [requestDialog] = useHookDialog();
+await requestDialog({ title: 'Switch', instanceId: 'primary' });
+```
+
+- Programmatic store access:
+
+```ts
+import storeDialog from '@rokku-x/react-hook-dialog';
+const primaryStore = storeDialog('primary'); // returns the zustand store hook
+const state = primaryStore.getState();
+primaryStore.setState({ rendererDefaultConfig: { /* ... */ } });
+```
+
+> Note: The default instance id is `"default"`. Make sure you mount a renderer with the same `id` if you want dialogs to be visible. If a renderer with the requested id is not mounted, the store will still be created and you can use it programmatically, but dialogs will not be rendered until a matching renderer is mounted.
+
 ### Backdrop
 
 Overlay component that wraps dialog windows.

package/dist/components/BaseDialogRenderer.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../store/dialog.cjs.js"),t=require("@rokku-x/react-hook-modal"),o=require("react");exports.default=function({defaultConfig:u,...s}){const{setDefaultConfig:a}=r.default();return o.useEffect(()=>{a(u||{})},[u]),e.jsx(t.BaseModalRenderer,{...s})};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../store/dialog.cjs.js"),t=require("@rokku-x/react-hook-modal"),o=require("react");exports.default=function({defaultConfig:u,...s}){const{setDefaultConfig:a}=r.default(s.id)();return o.useEffect(()=>{a(u||{})},[u]),e.jsx(t.BaseModalRenderer,{...s})};

package/dist/components/BaseDialogRenderer.esm.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import r from"../store/dialog.esm.js";import{BaseModalRenderer as t}from"@rokku-x/react-hook-modal";import{useEffect as e}from"react";function m({defaultConfig:m,...f}){const{setDefaultConfig:a}=r();return e(()=>{a(m||{})},[m]),/* @__PURE__ */o(t,{...f})}export{m as default};
+import{jsx as o}from"react/jsx-runtime";import r from"../store/dialog.esm.js";import{BaseModalRenderer as t}from"@rokku-x/react-hook-modal";import{useEffect as e}from"react";function m({defaultConfig:m,...f}){const{setDefaultConfig:i}=r(f.id)();return e(()=>{i(m||{})},[m]),/* @__PURE__ */o(t,{...f})}export{m as default};

package/dist/hooks/useHookDialog.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),s=require("@rokku-x/react-hook-modal"),t=require("../components/ModalWindow.cjs.js"),a=require("../store/dialog.cjs.js");exports.default=function(o){const n=s.useBaseModal(),{addInstance:r,handleAction:l,handleClose:i,rendererDefaultConfig:d}=a.default();return[function(s){return new Promise((a,c)=>{const u=Math.random().toString(36).substring(2,6),m={...d,...o,...s,classNames:{...d?.classNames,...o?.classNames,...s.classNames},styles:{...d?.styles,...o?.styles,...s.styles},variantStyles:{...d?.variantStyles,...o?.variantStyles,...s.variantStyles}},f={id:u,config:m,resolve:a,reject:c};r(f),f.id=n.pushModal(u,e.createElement(t.default,{config:m,modalWindowId:u,handleClose:i,handleAction:l}))})}]};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),s=require("@rokku-x/react-hook-modal"),t=require("../components/ModalWindow.cjs.js"),a=require("../store/dialog.cjs.js");exports.default=function(n){const r=s.useBaseModal({rendererId:n?.instanceId}),{addInstance:o,handleAction:l,handleClose:d,rendererDefaultConfig:i}=a.default(n?.instanceId)();return[function(s){return new Promise((a,c)=>{const u=Math.random().toString(36).substring(2,6),m={...i,...n,...s,classNames:{...i?.classNames,...n?.classNames,...s.classNames},styles:{...i?.styles,...n?.styles,...s.styles},variantStyles:{...i?.variantStyles,...n?.variantStyles,...s.variantStyles}},f={id:u,config:m,resolve:a,reject:c};o(f),f.id=r.pushModal(u,e.createElement(t.default,{config:m,modalWindowId:u,handleClose:d,handleAction:l}))})}]};

package/dist/hooks/useHookDialog.esm.js

@@ -1 +1 @@
-import e from"react";import{useBaseModal as s}from"@rokku-x/react-hook-modal";import t from"../components/ModalWindow.esm.js";import o from"../store/dialog.esm.js";function a(a){const n=s(),{addInstance:r,handleAction:l,handleClose:i,rendererDefaultConfig:m}=o();return[function(s){return new Promise((o,d)=>{const c=Math.random().toString(36).substring(2,6),f={...m,...a,...s,classNames:{...m?.classNames,...a?.classNames,...s.classNames},styles:{...m?.styles,...a?.styles,...s.styles},variantStyles:{...m?.variantStyles,...a?.variantStyles,...s.variantStyles}},u={id:c,config:f,resolve:o,reject:d};r(u),u.id=n.pushModal(c,e.createElement(t,{config:f,modalWindowId:c,handleClose:i,handleAction:l}))})}]}export{a as default};
+import e from"react";import{useBaseModal as s}from"@rokku-x/react-hook-modal";import t from"../components/ModalWindow.esm.js";import n from"../store/dialog.esm.js";function a(a){const o=s({rendererId:a?.instanceId}),{addInstance:r,handleAction:l,handleClose:i,rendererDefaultConfig:d}=n(a?.instanceId)();return[function(s){return new Promise((n,c)=>{const m=Math.random().toString(36).substring(2,6),f={...d,...a,...s,classNames:{...d?.classNames,...a?.classNames,...s.classNames},styles:{...d?.styles,...a?.styles,...s.styles},variantStyles:{...d?.variantStyles,...a?.variantStyles,...s.variantStyles}},u={id:m,config:f,resolve:n,reject:c};r(u),u.id=o.pushModal(m,e.createElement(t,{config:f,modalWindowId:m,handleClose:i,handleAction:l}))})}]}export{a as default};

package/dist/index.cjs.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@rokku-x/react-hook-modal"),o=require("./components/BaseDialogRenderer.cjs.js"),r=require("./hooks/useHookDialog.cjs.js");Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>e.BaseModalRenderer}),exports.BaseDialogRenderer=o.default,exports.useHookDialog=r.default;
 
 if (typeof document !== 'undefined') { const style = document.createElement('style'); style.textContent = ".hook-dialog-close-button{position:absolute;top:0;right:0;transform:translate(75%,-75%);width:32px;height:32px;background:none;border:none;font-size:21px;cursor:pointer;line-height:1;color:#555}.hook-dialog-title{margin:0 0 15px;font-size:20px}.hook-dialog-content{margin-bottom:15px;color:#555}.hook-dialog-actions{display:flex;flex-direction:column;gap:10px;padding-top:15px}.hook-dialog-actions-row{display:flex;gap:8px;justify-content:space-between}.hook-dialog-actions-left,.hook-dialog-actions-right{display:flex;gap:8px}.hook-dialog-action-button{border:none;border-radius:15px;padding:10px 18px;font-size:14px;font-weight:800;cursor:pointer}\n"; document.head.appendChild(style); }

package/dist/index.esm.js

@@ -1,3 +1,4 @@
+"use client";
 import{BaseModalRenderer as o}from"@rokku-x/react-hook-modal";import{default as e}from"./components/BaseDialogRenderer.esm.js";import{default as a}from"./hooks/useHookDialog.esm.js";export{e as BaseDialogRenderer,o as BaseModalRenderer,a as useHookDialog};
 
 if (typeof document !== 'undefined') { const style = document.createElement('style'); style.textContent = ".hook-dialog-close-button{position:absolute;top:0;right:0;transform:translate(75%,-75%);width:32px;height:32px;background:none;border:none;font-size:21px;cursor:pointer;line-height:1;color:#555}.hook-dialog-title{margin:0 0 15px;font-size:20px}.hook-dialog-content{margin-bottom:15px;color:#555}.hook-dialog-actions{display:flex;flex-direction:column;gap:10px;padding-top:15px}.hook-dialog-actions-row{display:flex;gap:8px;justify-content:space-between}.hook-dialog-actions-left,.hook-dialog-actions-right{display:flex;gap:8px}.hook-dialog-action-button{border:none;border-radius:15px;padding:10px 18px;font-size:14px;font-weight:800;cursor:pointer}\n"; document.head.appendChild(style); }

package/dist/store/dialog.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../components/ModalWindow.cjs.js"),n=require("@rokku-x/react-hook-modal"),t=require("react"),o=require("zustand").create((o,a)=>({instances:[],rendererDefaultConfig:{},setDefaultConfig:e=>{o(()=>({rendererDefaultConfig:e}))},addInstance:c=>{o(e=>({instances:[...e.instances,c]})),c.id=n.storeBaseModal.getState().actions.pushModal(c.id,t.createElement(e.default,{config:c.config,modalWindowId:c.id,handleClose:a().handleClose,handleAction:a().handleAction}))},removeInstance:e=>o(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,t=!1)=>{const o=a().getInstance(e);o&&(n.storeBaseModal.getState().actions.popModal(e),!1!==o.config.rejectOnCancel||t?o.reject(o.config.defaultCancelValue):o.resolve(o.config.defaultCancelValue),a().removeInstance(e))},handleAction:(e,t)=>{const o=a().getInstance(e);o&&(n.storeBaseModal.getState().actions.popModal(e),t.isCancel&&!1!==o.config.rejectOnCancel?o.reject(t.value):o.resolve(t.value),a().removeInstance(e))},getContext:e=>{const n=a().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>a().handleClose(e,n),forceAction:n=>{a().handleAction(e,n)},forceDefault:()=>{const t=n.config.actions?.flat().find(e=>e.isFocused);if(!t)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);a().handleAction(e,t)}}},getInstance:e=>a().instances.find(n=>n.id===e)}));exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../components/ModalWindow.cjs.js"),n=require("@rokku-x/react-hook-modal"),t=require("react"),o=require("zustand");const a=new Map;exports.default=function(c="default"){return a.has(c)||a.set(c,function(a="default"){const c=n.storeBaseModal(a);return o.create((n,o)=>({instances:[],rendererDefaultConfig:{},setDefaultConfig:e=>{n(()=>({rendererDefaultConfig:e}))},addInstance:a=>{n(e=>({instances:[...e.instances,a]})),a.id=c.getState().actions.pushModal(a.id,t.createElement(e.default,{config:a.config,modalWindowId:a.id,handleClose:o().handleClose,handleAction:o().handleAction}))},removeInstance:e=>n(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,n=!1)=>{const t=o().getInstance(e);t&&(c.getState().actions.popModal(e),!1!==t.config.rejectOnCancel||n?t.reject(t.config.defaultCancelValue):t.resolve(t.config.defaultCancelValue),o().removeInstance(e))},handleAction:(e,n)=>{const t=o().getInstance(e);t&&(c.getState().actions.popModal(e),n.isCancel&&!1!==t.config.rejectOnCancel?t.reject(n.value):t.resolve(n.value),o().removeInstance(e))},getContext:e=>{const n=o().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>o().handleClose(e,n),forceAction:n=>{o().handleAction(e,n)},forceDefault:()=>{const t=n.config.actions?.flat().find(e=>e.isFocused);if(!t)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);o().handleAction(e,t)}}},getInstance:e=>o().instances.find(n=>n.id===e)}))}(c)),a.get(c)};

package/dist/store/dialog.d.ts

@@ -28,15 +28,7 @@ interface DialogStore<T = ValidValue> {
         forceCancel: () => void;
     } | undefined;
 }
-/**
- * Zustand store for managing dialog instances.
- * Provides centralized state management for all active dialogs.
- *
- * @internal
- * @example
- * ```tsx
- * const { addInstance, removeInstance, getInstance } = useDialogStore();
- * ```
- */
-declare const storeDialog: import('zustand').UseBoundStore<import('zustand').StoreApi<DialogStore<any>>>;
-export default storeDialog;
+declare function createStore(instanceId?: string): import('zustand').UseBoundStore<import('zustand').StoreApi<DialogStore<any>>>;
+export type BaseDialogStoreInstance = ReturnType<typeof createStore>;
+export default function BaseDialogStore(instanceId?: string): BaseDialogStoreInstance;
+export {};

package/dist/store/dialog.esm.js

@@ -1 +1 @@
-import e from"../components/ModalWindow.esm.js";import{storeBaseModal as n}from"@rokku-x/react-hook-modal";import t from"react";import{create as o}from"zustand";const a=o((o,a)=>({instances:[],rendererDefaultConfig:{},setDefaultConfig:e=>{o(()=>({rendererDefaultConfig:e}))},addInstance:c=>{o(e=>({instances:[...e.instances,c]})),c.id=n.getState().actions.pushModal(c.id,t.createElement(e,{config:c.config,modalWindowId:c.id,handleClose:a().handleClose,handleAction:a().handleAction}))},removeInstance:e=>o(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,t=!1)=>{const o=a().getInstance(e);o&&(n.getState().actions.popModal(e),!1!==o.config.rejectOnCancel||t?o.reject(o.config.defaultCancelValue):o.resolve(o.config.defaultCancelValue),a().removeInstance(e))},handleAction:(e,t)=>{const o=a().getInstance(e);o&&(n.getState().actions.popModal(e),t.isCancel&&!1!==o.config.rejectOnCancel?o.reject(t.value):o.resolve(t.value),a().removeInstance(e))},getContext:e=>{const n=a().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>a().handleClose(e,n),forceAction:n=>{a().handleAction(e,n)},forceDefault:()=>{const t=n.config.actions?.flat().find(e=>e.isFocused);if(!t)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);a().handleAction(e,t)}}},getInstance:e=>a().instances.find(n=>n.id===e)}));export{a as default};
+import e from"../components/ModalWindow.esm.js";import{storeBaseModal as n}from"@rokku-x/react-hook-modal";import t from"react";import{create as o}from"zustand";const a=/* @__PURE__ */new Map;function c(c="default"){return a.has(c)||a.set(c,function(a="default"){const c=n(a);return o((n,o)=>({instances:[],rendererDefaultConfig:{},setDefaultConfig:e=>{n(()=>({rendererDefaultConfig:e}))},addInstance:a=>{n(e=>({instances:[...e.instances,a]})),a.id=c.getState().actions.pushModal(a.id,t.createElement(e,{config:a.config,modalWindowId:a.id,handleClose:o().handleClose,handleAction:o().handleAction}))},removeInstance:e=>n(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,n=!1)=>{const t=o().getInstance(e);t&&(c.getState().actions.popModal(e),!1!==t.config.rejectOnCancel||n?t.reject(t.config.defaultCancelValue):t.resolve(t.config.defaultCancelValue),o().removeInstance(e))},handleAction:(e,n)=>{const t=o().getInstance(e);t&&(c.getState().actions.popModal(e),n.isCancel&&!1!==t.config.rejectOnCancel?t.reject(n.value):t.resolve(n.value),o().removeInstance(e))},getContext:e=>{const n=o().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>o().handleClose(e,n),forceAction:n=>{o().handleAction(e,n)},forceDefault:()=>{const t=n.config.actions?.flat().find(e=>e.isFocused);if(!t)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);o().handleAction(e,t)}}},getInstance:e=>o().instances.find(n=>n.id===e)}))}(c)),a.get(c)}export{c as default};

package/dist/types/index.d.ts

@@ -183,6 +183,8 @@ export interface ConfirmConfig {
  * ```
  */
 export interface UseHookDialogConfig {
+    /** Optional instance ID for the dialog store (default: 'default') */
+    instanceId?: string;
     /** If true, allows closing dialogs by clicking the backdrop (default: false) */
     backdropCancel?: boolean;
     /** If true, rejects the promise on cancel instead of resolving (default: true) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-dialog",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "author": "rokku-x",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "zustand": "^5.0.10",
-    "@rokku-x/react-hook-modal": "^0.9.4"
+    "@rokku-x/react-hook-modal": "^0.10.0"
   },
   "exports": {
     ".": {
@@ -50,7 +50,23 @@
     "dialog-box",
     "confirmation-dialog",
     "react-dialog",
-    "react-modal"
+    "react-modal",
+    "hooks",
+    "modal-dialog",
+    "modal-window",
+    "overlay",
+    "overlays",
+    "popup",
+    "toast",
+    "form",
+    "spinner",
+    "loading",
+    "ui-blocker",
+    "blocker",
+    "portal",
+    "accessibility",
+    "a11y",
+    "library"
   ],
   "license": "MIT",
   "sideEffects": [