@rokku-x/react-hook-dialog 1.0.3 → 1.1.0

package/README.md

@@ -72,13 +72,6 @@ function MyComponent() {
 }
 ```
 
-## Bundle Size
-
-- ESM: ~4.06 kB gzipped (13.48 kB raw)
-- CJS: ~3.48 kB gzipped (9.21 kB raw)
-
-Measured with Vite build for v0.0.1.
-
 ## API Reference
 
 ### useHookDialog
@@ -103,7 +96,57 @@ useHookDialog(defaultConfig?: UseHookDialogConfig)
 
 | Return Value | Type | Description |
 |---|---|---|
-| `requestDialog` | `(config: ConfirmConfig) => Promise<ValidValue>` | Function to open a dialog and get user response |
+| `requestDialog` | `(config: ConfirmConfig) => RequestDialogReturnType<ValidValue>` | Function to open a dialog and get user response. `RequestDialogReturnType<T>` is defined as `Promise<T> & { id: string; context: DialogInstanceContext }` which means the native Promise resolves with `T` while the *returned* value exposes `id` and `context` for programmatic control. |
+
+```typescript
+// Convenience alias shown in the library
+type RequestDialogReturnType<T> = Promise<T> & { id: string; context: DialogInstanceContext };
+```
+
+### Dialog Context & Force Functions ✅
+
+The Promise returned from `requestDialog(...)` is augmented with:
+
+- `id: string` — unique identifier for the dialog instance
+- `context: DialogInstanceContext` — helper methods to programmatically control the dialog instance
+
+You can access the context either directly from the returned Promise (`promise.context`) or via the second value returned from the hook (`getContext(id)`).
+
+Dialog context methods:
+
+- `forceCancel(forceReject?: boolean)` — close the dialog as a cancellation. If `forceReject` is `true` the promise will be rejected even if the dialog `rejectOnCancel` config is `false`. Otherwise the usual `rejectOnCancel` behavior applies.
+- `forceAction(action: ModalAction)` — programmatically trigger a specific action (resolve/reject according to the action and dialog config).
+- `forceDefault()` — triggers the dialog's default action (first action marked with `isFocused`). Throws if no default action is defined.
+
+Example usage:
+
+```tsx
+const [requestDialog, getContext] = useHookDialog();
+
+// open a dialog and get the augmented promise
+const p = requestDialog({
+  title: 'Confirm',
+  content: 'Proceed?',
+  actions: [[
+    { title: 'Cancel', isCancel: true },
+    { title: 'OK', value: true, isFocused: true }
+  ]]
+});
+
+console.log('dialog id:', p.id);
+
+// force the default action (same as clicking the focused action)
+p.context.forceDefault();
+
+// or cancel programmatically (forces reject by default)
+p.context.forceCancel();
+
+// you can also use the helper returned from the hook
+const ctx = getContext(p.id);
+ctx.forceAction({ title: 'OK', value: true });
+```
+
+> Note: `forceDefault()` will throw if no action is marked with `isFocused`. Use `forceAction(...)` to explicitly specify which action to run.
 
 #### Default Config Options
 
@@ -276,6 +319,8 @@ function DeleteConfirm() {
 }
 ```
 
+![Example 1 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-1.png)
+
 ### Example 2: Multiple Action Rows
 
 ```tsx
@@ -294,6 +339,8 @@ await requestDialog({
 });
 ```
 
+![Example 2 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-2.png)
+
 ### Example 3: Custom Styling
 
 ```tsx
@@ -318,6 +365,8 @@ await requestDialog({
 });
 ```
 
+![Example 3 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-3.png)
+
 ### Example 4: Custom Button Variants
 
 ```tsx
@@ -338,6 +387,8 @@ await requestDialog({
 });
 ```
 
+![Example 4 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-4.png)
+
 ### Example 5: Button Click Handlers
 
 ```tsx
@@ -357,6 +408,8 @@ await requestDialog({
 });
 ```
 
+![Example 5 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-5.png)
+
 ### Example 6: Rich Content
 
 ```tsx
@@ -377,6 +430,8 @@ await requestDialog({
 });
 ```
 
+![Example 6 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-6.png)
+
 ### Example 7: Default Configuration
 
 ```tsx
@@ -395,6 +450,8 @@ await requestDialog({
 });
 ```
 
+![Example 7 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-7.png)
+
 ### Example 8: Alert Dialog
 
 ```tsx
@@ -413,6 +470,8 @@ async function showAlert(message: string) {
 showAlert('Operation completed successfully!');
 ```
 
+![Example 8 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-8.png)
+
 ### Example 9: Multiple Choice with Different Values
 
 ```tsx
@@ -439,6 +498,8 @@ const handleSaveOptions = async () => {
 };
 ```
 
+![Example 9 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-9.png)
+
 ### Example 10: Numeric Rating Dialog
 
 ```tsx
@@ -468,6 +529,8 @@ const handleRating = async () => {
 };
 ```
 
+![Example 10 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-10.png)
+
 ### Example 11: Conditional Actions Based on Result
 
 ```tsx
@@ -515,6 +578,8 @@ const handleFileOperation = async () => {
 };
 ```
 
+![Example 11 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-11.png)
+
 ### Example 12: Handle Cancel vs Reject
 
 ```tsx
@@ -544,6 +609,8 @@ const handleWithErrorHandling = async () => {
 };
 ```
 
+![Example 12 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-12.png)
+
 ### Example 13: Form Submission with Validation
 
 ```tsx
@@ -587,6 +654,33 @@ const handleFormSubmit = async (formData: any) => {
 };
 ```
 
+![Example 13 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-13.png)
+
+### Example 14: Boolean Result with Custom Values
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+const handleLogout = async () => {
+  const shouldLogout = await requestDialog({
+    title: 'Confirm Logout',
+    content: 'Are you sure you want to log out?',
+    actions: [[
+      { title: 'Stay Logged In', variant: 'secondary', value: false },
+      { title: 'Log Out', variant: 'danger', value: true }
+    ]]
+  });
+
+  if (shouldLogout) {
+    // Perform logout
+    sessionStorage.clear();
+    window.location.href = '/login';
+  }
+};
+```
+
+![Example 14 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-14.png)
+
 ### Example 15: Form Dialog Returning Values (isReturnSubmit)
 
 ```tsx
@@ -623,40 +717,9 @@ async function openProfileDialog() {
 }
 ```
 
-> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
-### Example 14: Boolean Result with Custom Values
-
-```tsx
-const [requestDialog] = useHookDialog();
-
-const handleLogout = async () => {
-  const shouldLogout = await requestDialog({
-    title: 'Confirm Logout',
-    content: 'Are you sure you want to log out?',
-    actions: [[
-      { title: 'Stay Logged In', variant: 'secondary', value: false },
-      { title: 'Log Out', variant: 'danger', value: true }
-    ]]
-  });
-
-  if (shouldLogout) {
-    // Perform logout
-    sessionStorage.clear();
-    window.location.href = '/login';
-  }
-};
-```
+![Example 15 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-15.png)
 
-## Best Practices
-
-1. **Mount `BaseModalRenderer` at root level** - Required for modals to render
-2. **Use default configs for consistency** - Set common styles/behaviors once
-3. **Provide meaningful button labels** - Users should know what each button does
-4. **Use appropriate variants** - Use `danger` for destructive actions, `success` for confirmations
-5. **Keep content concise** - Dialogs should be focused and brief
-6. **Handle both resolve and reject** - Account for cancellation scenarios
-7. **Use `isOnLeft` for secondary actions** - Helps with visual hierarchy
-8. **Customize responsibly** - Maintain accessibility and usability standards
+> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
 
 ## Types
 
@@ -684,6 +747,17 @@ Custom styles for each variant type.
 - ARIA labels provided for interactive elements
 - Supports custom ARIA attributes via className injection
 
+## Best Practices
+
+1. **Mount `BaseModalRenderer` at root level** - Required for modals to render
+2. **Use default configs for consistency** - Set common styles/behaviors once
+3. **Provide meaningful button labels** - Users should know what each button does
+4. **Use appropriate variants** - Use `danger` for destructive actions, `success` for confirmations
+5. **Keep content concise** - Dialogs should be focused and brief
+6. **Handle both resolve and reject** - Account for cancellation scenarios
+7. **Use `isOnLeft` for secondary actions** - Helps with visual hierarchy
+8. **Customize responsibly** - Maintain accessibility and usability standards
+
 ## Troubleshooting
 
 ### Dialog not appearing
@@ -699,6 +773,14 @@ Custom styles for each variant type.
 - Ensure action buttons have appropriate `value` or are configured as cancel buttons
 - Check that action click handlers don't prevent default behavior
 
+
+## Bundle Size
+
+- ESM: ~4.06 kB gzipped (13.48 kB raw)
+- CJS: ~3.48 kB gzipped (9.21 kB raw)
+
+Measured with Vite build for v0.0.1.
+
 ## License
 
 MIT

package/dist/README.md

@@ -72,13 +72,6 @@ function MyComponent() {
 }
 ```
 
-## Bundle Size
-
-- ESM: ~4.06 kB gzipped (13.48 kB raw)
-- CJS: ~3.48 kB gzipped (9.21 kB raw)
-
-Measured with Vite build for v0.0.1.
-
 ## API Reference
 
 ### useHookDialog
@@ -103,7 +96,57 @@ useHookDialog(defaultConfig?: UseHookDialogConfig)
 
 | Return Value | Type | Description |
 |---|---|---|
-| `requestDialog` | `(config: ConfirmConfig) => Promise<ValidValue>` | Function to open a dialog and get user response |
+| `requestDialog` | `(config: ConfirmConfig) => RequestDialogReturnType<ValidValue>` | Function to open a dialog and get user response. `RequestDialogReturnType<T>` is defined as `Promise<T> & { id: string; context: DialogInstanceContext }` which means the native Promise resolves with `T` while the *returned* value exposes `id` and `context` for programmatic control. |
+
+```typescript
+// Convenience alias shown in the library
+type RequestDialogReturnType<T> = Promise<T> & { id: string; context: DialogInstanceContext };
+```
+
+### Dialog Context & Force Functions ✅
+
+The Promise returned from `requestDialog(...)` is augmented with:
+
+- `id: string` — unique identifier for the dialog instance
+- `context: DialogInstanceContext` — helper methods to programmatically control the dialog instance
+
+You can access the context either directly from the returned Promise (`promise.context`) or via the second value returned from the hook (`getContext(id)`).
+
+Dialog context methods:
+
+- `forceCancel(forceReject?: boolean)` — close the dialog as a cancellation. If `forceReject` is `true` the promise will be rejected even if the dialog `rejectOnCancel` config is `false`. Otherwise the usual `rejectOnCancel` behavior applies.
+- `forceAction(action: ModalAction)` — programmatically trigger a specific action (resolve/reject according to the action and dialog config).
+- `forceDefault()` — triggers the dialog's default action (first action marked with `isFocused`). Throws if no default action is defined.
+
+Example usage:
+
+```tsx
+const [requestDialog, getContext] = useHookDialog();
+
+// open a dialog and get the augmented promise
+const p = requestDialog({
+  title: 'Confirm',
+  content: 'Proceed?',
+  actions: [[
+    { title: 'Cancel', isCancel: true },
+    { title: 'OK', value: true, isFocused: true }
+  ]]
+});
+
+console.log('dialog id:', p.id);
+
+// force the default action (same as clicking the focused action)
+p.context.forceDefault();
+
+// or cancel programmatically (forces reject by default)
+p.context.forceCancel();
+
+// you can also use the helper returned from the hook
+const ctx = getContext(p.id);
+ctx.forceAction({ title: 'OK', value: true });
+```
+
+> Note: `forceDefault()` will throw if no action is marked with `isFocused`. Use `forceAction(...)` to explicitly specify which action to run.
 
 #### Default Config Options
 
@@ -276,6 +319,8 @@ function DeleteConfirm() {
 }
 ```
 
+![Example 1 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-1.png)
+
 ### Example 2: Multiple Action Rows
 
 ```tsx
@@ -294,6 +339,8 @@ await requestDialog({
 });
 ```
 
+![Example 2 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-2.png)
+
 ### Example 3: Custom Styling
 
 ```tsx
@@ -318,6 +365,8 @@ await requestDialog({
 });
 ```
 
+![Example 3 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-3.png)
+
 ### Example 4: Custom Button Variants
 
 ```tsx
@@ -338,6 +387,8 @@ await requestDialog({
 });
 ```
 
+![Example 4 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-4.png)
+
 ### Example 5: Button Click Handlers
 
 ```tsx
@@ -357,6 +408,8 @@ await requestDialog({
 });
 ```
 
+![Example 5 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-5.png)
+
 ### Example 6: Rich Content
 
 ```tsx
@@ -377,6 +430,8 @@ await requestDialog({
 });
 ```
 
+![Example 6 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-6.png)
+
 ### Example 7: Default Configuration
 
 ```tsx
@@ -395,6 +450,8 @@ await requestDialog({
 });
 ```
 
+![Example 7 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-7.png)
+
 ### Example 8: Alert Dialog
 
 ```tsx
@@ -413,6 +470,8 @@ async function showAlert(message: string) {
 showAlert('Operation completed successfully!');
 ```
 
+![Example 8 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-8.png)
+
 ### Example 9: Multiple Choice with Different Values
 
 ```tsx
@@ -439,6 +498,8 @@ const handleSaveOptions = async () => {
 };
 ```
 
+![Example 9 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-9.png)
+
 ### Example 10: Numeric Rating Dialog
 
 ```tsx
@@ -468,6 +529,8 @@ const handleRating = async () => {
 };
 ```
 
+![Example 10 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-10.png)
+
 ### Example 11: Conditional Actions Based on Result
 
 ```tsx
@@ -515,6 +578,8 @@ const handleFileOperation = async () => {
 };
 ```
 
+![Example 11 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-11.png)
+
 ### Example 12: Handle Cancel vs Reject
 
 ```tsx
@@ -544,6 +609,8 @@ const handleWithErrorHandling = async () => {
 };
 ```
 
+![Example 12 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-12.png)
+
 ### Example 13: Form Submission with Validation
 
 ```tsx
@@ -587,6 +654,33 @@ const handleFormSubmit = async (formData: any) => {
 };
 ```
 
+![Example 13 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-13.png)
+
+### Example 14: Boolean Result with Custom Values
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+const handleLogout = async () => {
+  const shouldLogout = await requestDialog({
+    title: 'Confirm Logout',
+    content: 'Are you sure you want to log out?',
+    actions: [[
+      { title: 'Stay Logged In', variant: 'secondary', value: false },
+      { title: 'Log Out', variant: 'danger', value: true }
+    ]]
+  });
+
+  if (shouldLogout) {
+    // Perform logout
+    sessionStorage.clear();
+    window.location.href = '/login';
+  }
+};
+```
+
+![Example 14 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-14.png)
+
 ### Example 15: Form Dialog Returning Values (isReturnSubmit)
 
 ```tsx
@@ -623,40 +717,9 @@ async function openProfileDialog() {
 }
 ```
 
-> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
-### Example 14: Boolean Result with Custom Values
-
-```tsx
-const [requestDialog] = useHookDialog();
-
-const handleLogout = async () => {
-  const shouldLogout = await requestDialog({
-    title: 'Confirm Logout',
-    content: 'Are you sure you want to log out?',
-    actions: [[
-      { title: 'Stay Logged In', variant: 'secondary', value: false },
-      { title: 'Log Out', variant: 'danger', value: true }
-    ]]
-  });
-
-  if (shouldLogout) {
-    // Perform logout
-    sessionStorage.clear();
-    window.location.href = '/login';
-  }
-};
-```
+![Example 15 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-15.png)
 
-## Best Practices
-
-1. **Mount `BaseModalRenderer` at root level** - Required for modals to render
-2. **Use default configs for consistency** - Set common styles/behaviors once
-3. **Provide meaningful button labels** - Users should know what each button does
-4. **Use appropriate variants** - Use `danger` for destructive actions, `success` for confirmations
-5. **Keep content concise** - Dialogs should be focused and brief
-6. **Handle both resolve and reject** - Account for cancellation scenarios
-7. **Use `isOnLeft` for secondary actions** - Helps with visual hierarchy
-8. **Customize responsibly** - Maintain accessibility and usability standards
+> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
 
 ## Types
 
@@ -684,6 +747,17 @@ Custom styles for each variant type.
 - ARIA labels provided for interactive elements
 - Supports custom ARIA attributes via className injection
 
+## Best Practices
+
+1. **Mount `BaseModalRenderer` at root level** - Required for modals to render
+2. **Use default configs for consistency** - Set common styles/behaviors once
+3. **Provide meaningful button labels** - Users should know what each button does
+4. **Use appropriate variants** - Use `danger` for destructive actions, `success` for confirmations
+5. **Keep content concise** - Dialogs should be focused and brief
+6. **Handle both resolve and reject** - Account for cancellation scenarios
+7. **Use `isOnLeft` for secondary actions** - Helps with visual hierarchy
+8. **Customize responsibly** - Maintain accessibility and usability standards
+
 ## Troubleshooting
 
 ### Dialog not appearing
@@ -699,6 +773,14 @@ Custom styles for each variant type.
 - Ensure action buttons have appropriate `value` or are configured as cancel buttons
 - Check that action click handlers don't prevent default behavior
 
+
+## Bundle Size
+
+- ESM: ~4.06 kB gzipped (13.48 kB raw)
+- CJS: ~3.48 kB gzipped (9.21 kB raw)
+
+Measured with Vite build for v0.0.1.
+
 ## License
 
 MIT

package/dist/components/ModalWindow.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../constants/theme.cjs.js"),o=require("../utils/utils.cjs.js"),n=require("@rokku-x/react-hook-modal"),i=require("react"),a=n.ModalWindow;exports.default=function({modalWindowId:s,handleAction:l,handleClose:r,config:c}){const{actions:u=[],title:d,backdropCancel:f,showCloseButton:m,classNames:p={},styles:h={},variantStyles:g={}}=c;let{content:y}=c;const b=(u.length?u:[[{title:"OK",variant:"primary"}]]).filter(e=>e&&e.length),x={...t.baseVariantStyles,...g},k=i.useRef(null),v=i.useRef(null),j=i.useRef(null);return i.useEffect(()=>{const e=k.current;if(!e)return;const t=document.activeElement;if(v.current)v.current.focus();else{const t=e.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");t?t.focus():(e.setAttribute("tabindex","-1"),e.focus())}const o=t=>{if("Escape"===t.key)t.stopPropagation(),r(s);else if("Tab"===t.key){const o=Array.from(e.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(0===o.length)return void t.preventDefault();const n=o[0],i=o[o.length-1];t.shiftKey?document.activeElement===n&&(t.preventDefault(),i.focus()):document.activeElement===i&&(t.preventDefault(),n.focus())}};return e.addEventListener("keydown",o),()=>{e.removeEventListener("keydown",o),t&&t.focus&&t.focus()}},[r,s]),o.IsForm(y)&&(y=i.cloneElement(y,{ref:j})),e.jsx(n.ModalBackdrop,{onClick:()=>f&&r(s),className:p.backdrop||"",style:h.backdrop,children:e.jsxs(a,{ref:k,role:"dialog","aria-modal":"true","aria-labelledby":d?`${s}-title`:void 0,className:p.dialog||"",style:h.dialog,children:[m&&e.jsx("button",{type:"button",className:`hook-dialog-close-button ${p.closeButton||""}`,"aria-label":"Close",onClick:()=>r(s),style:{position:"absolute",top:0,right:0,transform:"translate(75%, -75%)",width:32,height:32,background:"none",border:"none",fontSize:21,cursor:"pointer",lineHeight:1,color:"#555",...h.closeButton},children:"×"}),d&&e.jsx("h3",{id:`${s}-title`,className:`hook-dialog-title ${p.title||""}`,style:{margin:"0 0 15px",fontSize:20,...h.title},children:d}),y&&e.jsx("div",{className:`hook-dialog-content ${p.content||""}`,style:{marginBottom:15,color:"#555",...h.content},children:y}),e.jsx("div",{className:`hook-dialog-actions ${p.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,paddingTop:15,...h.actions},children:b.map((t,n)=>{const i=t.filter(e=>e.isOnLeft),a=t.filter(e=>!e.isOnLeft),r=(t,n)=>{const i=x[t.variant||"secondary"]||x.secondary;return e.jsx("button",{ref:e=>{t.isFocused&&e&&(v.current=e)},"data-action-focused":t.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${t.variant||"secondary"} ${p.actionButton||""} ${t.className||""}`,onClick:e=>{try{t.onClick?.(e,t)}catch{}return t.isSubmit&&c.isReturnSubmit&&j.current?l(s,t,o.FormDataToObject(new FormData(j.current))):(t.isSubmit&&j.current?.requestSubmit(),t.noActionReturn?e.stopPropagation():void l(s,t))},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...i,...h.actionButton,...t.style||{}},children:t.title},`${t.title}-${n}`)};return e.jsxs("div",{className:`hook-dialog-actions-row ${p.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",...h.actionsRow},children:[e.jsx("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:i.map((e,t)=>r(e,t))}),e.jsx("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:a.map((e,t)=>r(e,t))})]},n)})})]})})};

package/dist/components/ModalWindow.esm.js

@@ -0,0 +1,6 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{baseVariantStyles as o}from"../constants/theme.esm.js";import{IsForm as n,FormDataToObject as i}from"../utils/utils.esm.js";import{ModalBackdrop as a,ModalWindow as l}from"@rokku-x/react-hook-modal";import r,{useRef as s,useEffect as c}from"react";const d=l;function u({modalWindowId:l,handleAction:u,handleClose:m,config:f}){const{actions:p=[],title:h,backdropCancel:g,showCloseButton:y,classNames:b={},styles:k={},variantStyles:v={}}=f;let{content:x}=f;const N=(p.length?p:[[{title:"OK",variant:"primary"}]]).filter(t=>t&&t.length),$={...o,...v},w=s(null),S=s(null),C=s(null);return c(()=>{const t=w.current;if(!t)return;const e=document.activeElement;if(S.current)S.current.focus();else{const e=t.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");e?e.focus():(t.setAttribute("tabindex","-1"),t.focus())}const o=e=>{if("Escape"===e.key)e.stopPropagation(),m(l);else if("Tab"===e.key){const o=Array.from(t.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(0===o.length)return void e.preventDefault();const n=o[0],i=o[o.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),n.focus())}};return t.addEventListener("keydown",o),()=>{t.removeEventListener("keydown",o),e&&e.focus&&e.focus()}},[m,l]),n(x)&&(x=r.cloneElement(x,{ref:C})),/* @__PURE__ */t(a,{onClick:()=>g&&m(l),className:b.backdrop||"",style:k.backdrop,children:/* @__PURE__ */e(d,{ref:w,role:"dialog","aria-modal":"true","aria-labelledby":h?`${l}-title`:void 0,className:b.dialog||"",style:k.dialog,children:[y&&/* @__PURE__ */t("button",{type:"button",className:`hook-dialog-close-button ${b.closeButton||""}`,"aria-label":"Close",onClick:()=>m(l),style:{position:"absolute",top:0,right:0,transform:"translate(75%, -75%)",width:32,height:32,background:"none",border:"none",fontSize:21,cursor:"pointer",lineHeight:1,color:"#555",...k.closeButton},children:"×"}),h&&/* @__PURE__ */t("h3",{id:`${l}-title`,className:`hook-dialog-title ${b.title||""}`,style:{margin:"0 0 15px",fontSize:20,...k.title},children:h}),x&&/* @__PURE__ */t("div",{className:`hook-dialog-content ${b.content||""}`,style:{marginBottom:15,color:"#555",...k.content},children:x}),
+/* @__PURE__ */t("div",{className:`hook-dialog-actions ${b.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,paddingTop:15,...k.actions},children:N.map((o,n)=>{const a=o.filter(t=>t.isOnLeft),r=o.filter(t=>!t.isOnLeft),s=(e,o)=>{const n=$[e.variant||"secondary"]||$.secondary;/* @__PURE__ */
+return t("button",{ref:t=>{e.isFocused&&t&&(S.current=t)},"data-action-focused":e.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${e.variant||"secondary"} ${b.actionButton||""} ${e.className||""}`,onClick:t=>{try{e.onClick?.(t,e)}catch{}return e.isSubmit&&f.isReturnSubmit&&C.current?u(l,e,i(new FormData(C.current))):(e.isSubmit&&C.current?.requestSubmit(),e.noActionReturn?t.stopPropagation():void u(l,e))},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...n,...k.actionButton,...e.style||{}},children:e.title},`${e.title}-${o}`)};/* @__PURE__ */
+return e("div",{className:`hook-dialog-actions-row ${b.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",...k.actionsRow},children:[
+/* @__PURE__ */t("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:a.map((t,e)=>s(t,e))}),
+/* @__PURE__ */t("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:r.map((t,e)=>s(t,e))})]},n)})})]})})}export{u as default};

package/dist/constants/theme.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.baseVariantStyles={primary:{backgroundColor:"#2563eb",color:"#fff"},secondary:{backgroundColor:"#e5e7eb",color:"#111"},danger:{backgroundColor:"#dc2626",color:"#fff"},success:{backgroundColor:"#16a34a",color:"#fff"},warning:{backgroundColor:"#f59e0b",color:"#111"},info:{backgroundColor:"#0ea5e9",color:"#fff"},neutral:{backgroundColor:"#6b7280",color:"#fff"}};

package/dist/constants/theme.esm.js

@@ -0,0 +1 @@
+const o={primary:{backgroundColor:"#2563eb",color:"#fff"},secondary:{backgroundColor:"#e5e7eb",color:"#111"},danger:{backgroundColor:"#dc2626",color:"#fff"},success:{backgroundColor:"#16a34a",color:"#fff"},warning:{backgroundColor:"#f59e0b",color:"#111"},info:{backgroundColor:"#0ea5e9",color:"#fff"},neutral:{backgroundColor:"#6b7280",color:"#fff"}};export{o as baseVariantStyles};

package/dist/hooks/useHookDialog.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@rokku-x/react-hook-modal"),s=require("../store/dialogStore.cjs.js");exports.default=function(o){const{addInstance:t,handleAction:a,handleClose:n,getContext:l}=s.useDialogStore();return e.useBaseModal(),[function(e){const s=Math.random().toString(36).substring(2,6);(e.actions?.flat().filter(e=>e.isFocused)||[]).length>1&&console.warn(`useHookDialog: Multiple actions are marked as isFocused in dialog "${s}". Only one action should be focused.`);const a=e.actions?.some(e=>e.some(e=>e.isCancel)),n=e.backdropCancel??o?.backdropCancel??!a,r={...o,...e,classNames:{...o?.classNames,...e.classNames},styles:{...o?.styles,...e.styles},variantStyles:{...o?.variantStyles,...e.variantStyles},backdropCancel:n},c=new Promise((e,o)=>{t({id:s,config:r,resolve:e,reject:o})});return Object.defineProperties(c,{context:{get:()=>l(s),enumerable:!0,configurable:!1},id:{get:()=>s,enumerable:!0,configurable:!1}}),c},l]};

package/dist/hooks/useHookDialog.d.ts

@@ -1,4 +1,4 @@
-import { FormDataObject, ConfirmConfig, UseHookDialogConfig, ValidValue } from '../types';
+import { UseHookDialogConfig, ValidValue, UseHookDialogReturnType } from '../types';
 /**
  * Hook for displaying confirmation dialogs and alerts.
  *
@@ -34,9 +34,4 @@ import { FormDataObject, ConfirmConfig, UseHookDialogConfig, ValidValue } from '
  * });
  * ```
  */
-export default function useHookDialog<T = ValidValue>(defaultConfig?: UseHookDialogConfig): {
-    <U = FormDataObject>(config: ConfirmConfig & {
-        isReturnSubmit: true;
-    }): Promise<U>;
-    <U = T>(config: ConfirmConfig): Promise<U>;
-}[];
+export default function useHookDialog<T = ValidValue>(defaultConfig?: UseHookDialogConfig): UseHookDialogReturnType<T>;

package/dist/hooks/useHookDialog.esm.js

@@ -0,0 +1 @@
+import{useBaseModal as e}from"@rokku-x/react-hook-modal";import{useDialogStore as o}from"../store/dialogStore.esm.js";function s(s){const{addInstance:t,handleAction:a,handleClose:n,getContext:r}=o();return e(),[function(e){const o=Math.random().toString(36).substring(2,6);(e.actions?.flat().filter(e=>e.isFocused)||[]).length>1&&console.warn(`useHookDialog: Multiple actions are marked as isFocused in dialog "${o}". Only one action should be focused.`);const a=e.actions?.some(e=>e.some(e=>e.isCancel)),n=e.backdropCancel??s?.backdropCancel??!a,l={...s,...e,classNames:{...s?.classNames,...e.classNames},styles:{...s?.styles,...e.styles},variantStyles:{...s?.variantStyles,...e.variantStyles},backdropCancel:n},c=new Promise((e,s)=>{t({id:o,config:l,resolve:e,reject:s})});return Object.defineProperties(c,{context:{get:()=>r(o),enumerable:!0,configurable:!1},id:{get:()=>o,enumerable:!0,configurable:!1}}),c},r]}export{s as default};

package/dist/index.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("@rokku-x/react-hook-modal"),p=require("react"),d=require("react/jsx-runtime"),$=require("zustand"),D={primary:{backgroundColor:"#2563eb",color:"#fff"},secondary:{backgroundColor:"#e5e7eb",color:"#111"},danger:{backgroundColor:"#dc2626",color:"#fff"},success:{backgroundColor:"#16a34a",color:"#fff"},warning:{backgroundColor:"#f59e0b",color:"#111"},info:{backgroundColor:"#0ea5e9",color:"#fff"},neutral:{backgroundColor:"#6b7280",color:"#fff"}};function w(t){const u={};return t.forEach((n,s)=>{if(s in u){const a=u[s];Array.isArray(a)?a.push(n):u[s]=[a,n]}else u[s]=n}),u}const A=t=>p.isValidElement(t)&&(t.type==="form"||typeof t.type=="string"&&t.type.toLowerCase()==="form"),q=j.ModalWindow;function O({modalWindowId:t,handleAction:u,handleClose:n,config:s}){const{actions:a=[],title:g,backdropCancel:R,showCloseButton:N,classNames:f={},styles:o={},variantStyles:r={}}=s;let{content:l}=s;const y=(a.length?a:[[{title:"OK",variant:"primary"}]]).filter(c=>c&&c.length),h={...D,...r},x=()=>R&&n(t),M=p.useRef(null),B=p.useRef(null),C=p.useRef(null);return p.useEffect(()=>{const c=M.current;if(!c)return;const k=document.activeElement;if(B.current)B.current.focus();else{const i=c.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");i?i.focus():(c.setAttribute("tabindex","-1"),c.focus())}const S=i=>{if(i.key==="Escape")i.stopPropagation(),n(t);else if(i.key==="Tab"){const b=Array.from(c.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(b.length===0){i.preventDefault();return}const e=b[0],m=b[b.length-1];i.shiftKey?document.activeElement===e&&(i.preventDefault(),m.focus()):document.activeElement===m&&(i.preventDefault(),e.focus())}};return c.addEventListener("keydown",S),()=>{c.removeEventListener("keydown",S),k&&k.focus&&k.focus()}},[n,t]),A(l)&&(l=p.cloneElement(l,{ref:C})),d.jsx(j.ModalBackdrop,{onClick:x,className:f.backdrop||"",style:o.backdrop,children:d.jsxs(q,{ref:M,role:"dialog","aria-modal":"true","aria-labelledby":g?`${t}-title`:void 0,className:f.dialog||"",style:o.dialog,children:[N&&d.jsx("button",{type:"button",className:`hook-dialog-close-button ${f.closeButton||""}`,"aria-label":"Close",onClick:()=>n(t),style:{position:"absolute",top:0,right:0,transform:"translate(75%, -75%)",width:32,height:32,background:"none",border:"none",fontSize:21,cursor:"pointer",lineHeight:1,color:"#555",...o.closeButton},children:"×"}),g&&d.jsx("h3",{id:`${t}-title`,className:`hook-dialog-title ${f.title||""}`,style:{margin:"0 0 15px",fontSize:20,...o.title},children:g}),l&&d.jsx("div",{className:`hook-dialog-content ${f.content||""}`,style:{marginBottom:15,color:"#555",...o.content},children:l}),d.jsx("div",{className:`hook-dialog-actions ${f.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,paddingTop:15,...o.actions},children:y.map((c,k)=>{const S=c.filter(e=>e.isOnLeft),i=c.filter(e=>!e.isOnLeft),b=(e,m)=>{const E=h[e.variant||"secondary"]||h.secondary;return d.jsx("button",{ref:v=>{e.isFocused&&v&&(B.current=v)},"data-action-focused":e.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${e.variant||"secondary"} ${f.actionButton||""} ${e.className||""}`,onClick:v=>{if(e.onClick?.(v,e),e.isSubmit&&s.isReturnSubmit&&C.current)return u(t,e,w(new FormData(C.current)));if(e.isSubmit&&C.current?.requestSubmit(),e.noActionReturn)return v.stopPropagation();u(t,e)},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...E,...o.actionButton,...e.style||{}},children:e.title},`${e.title}-${m}`)};return d.jsxs("div",{className:`hook-dialog-actions-row ${f.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",...o.actionsRow},children:[d.jsx("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:S.map((e,m)=>b(e,m))}),d.jsx("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:i.map((e,m)=>b(e,m))})]},k)})})]})})}const F=$.create((t,u)=>({instances:[],addInstance:n=>t(s=>({instances:[...s.instances,n]})),removeInstance:n=>t(s=>({instances:s.instances.filter(a=>a.id!==n)})),getInstance:n=>u().instances.find(s=>s.id===n)}));function L(t){const{instances:u,addInstance:n,removeInstance:s,getInstance:a}=F(),g=j.useBaseModal(),R=p.useCallback(o=>{const r=a(o);r&&(g.popModal(o),r.config.rejectOnCancel!==!1?r.reject(r.config.defaultCancelValue):r.resolve(r.config.defaultCancelValue),s(o))},[a,s,g]),N=p.useCallback((o,r)=>{const l=a(o);l&&(g.popModal(o),r.isCancel&&l.config.rejectOnCancel!==!1?l.reject(r.value):l.resolve(r.value),s(o))},[a,s,g]);function f(o){return new Promise((r,l)=>{const y=Math.random().toString(36).substring(2,6),h={...t,...o,classNames:{...t?.classNames,...o.classNames},styles:{...t?.styles,...o.styles},variantStyles:{...t?.variantStyles,...o.variantStyles}},x={id:y,config:h,resolve:r,reject:l};n(x),x.id=g.pushModal(y,p.createElement(O,{config:h,modalWindowId:y,handleClose:R,handleAction:N}))})}return[f]}Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>j.BaseModalRenderer});exports.useHookDialog=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@rokku-x/react-hook-modal"),o=require("./hooks/useHookDialog.cjs.js");Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>e.BaseModalRenderer}),exports.useHookDialog=o.default;

package/dist/index.esm.js

@@ -1,192 +1 @@
-"use client";
-import { ModalBackdrop as A, ModalWindow as j, useBaseModal as F } from "@rokku-x/react-hook-modal";
-import { BaseModalRenderer as X } from "@rokku-x/react-hook-modal";
-import R, { useRef as E, useEffect as O, useCallback as M } from "react";
-import { jsx as p, jsxs as w } from "react/jsx-runtime";
-import { create as L } from "zustand";
-const V = {
-  primary: { backgroundColor: "#2563eb", color: "#fff" },
-  secondary: { backgroundColor: "#e5e7eb", color: "#111" },
-  danger: { backgroundColor: "#dc2626", color: "#fff" },
-  success: { backgroundColor: "#16a34a", color: "#fff" },
-  warning: { backgroundColor: "#f59e0b", color: "#111" },
-  info: { backgroundColor: "#0ea5e9", color: "#fff" },
-  neutral: { backgroundColor: "#6b7280", color: "#fff" }
-};
-function q(t) {
-  const u = {};
-  return t.forEach((s, n) => {
-    if (n in u) {
-      const a = u[n];
-      Array.isArray(a) ? a.push(s) : u[n] = [a, s];
-    } else
-      u[n] = s;
-  }), u;
-}
-const z = (t) => R.isValidElement(t) && (t.type === "form" || typeof t.type == "string" && t.type.toLowerCase() === "form"), I = j;
-function K({ modalWindowId: t, handleAction: u, handleClose: s, config: n }) {
-  const { actions: a = [], title: d, backdropCancel: S, showCloseButton: N, classNames: f = {}, styles: o = {}, variantStyles: r = {} } = n;
-  let { content: l } = n;
-  const y = (a.length ? a : [[{ title: "OK", variant: "primary" }]]).filter((i) => i && i.length), b = { ...V, ...r }, k = () => S && s(t), $ = E(null), B = E(null), x = E(null);
-  return O(() => {
-    const i = $.current;
-    if (!i) return;
-    const h = document.activeElement;
-    if (B.current)
-      B.current.focus();
-    else {
-      const c = i.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
-      c ? c.focus() : (i.setAttribute("tabindex", "-1"), i.focus());
-    }
-    const C = (c) => {
-      if (c.key === "Escape")
-        c.stopPropagation(), s(t);
-      else if (c.key === "Tab") {
-        const g = Array.from(i.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);
-        if (g.length === 0) {
-          c.preventDefault();
-          return;
-        }
-        const e = g[0], m = g[g.length - 1];
-        c.shiftKey ? document.activeElement === e && (c.preventDefault(), m.focus()) : document.activeElement === m && (c.preventDefault(), e.focus());
-      }
-    };
-    return i.addEventListener("keydown", C), () => {
-      i.removeEventListener("keydown", C), h && h.focus && h.focus();
-    };
-  }, [s, t]), z(l) && (l = R.cloneElement(l, { ref: x })), /* @__PURE__ */ p(
-    A,
-    {
-      onClick: k,
-      className: f.backdrop || "",
-      style: o.backdrop,
-      children: /* @__PURE__ */ w(
-        I,
-        {
-          ref: $,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": d ? `${t}-title` : void 0,
-          className: f.dialog || "",
-          style: o.dialog,
-          children: [
-            N && /* @__PURE__ */ p(
-              "button",
-              {
-                type: "button",
-                className: `hook-dialog-close-button ${f.closeButton || ""}`,
-                "aria-label": "Close",
-                onClick: () => s(t),
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  right: 0,
-                  transform: "translate(75%, -75%)",
-                  width: 32,
-                  height: 32,
-                  background: "none",
-                  border: "none",
-                  fontSize: 21,
-                  cursor: "pointer",
-                  lineHeight: 1,
-                  color: "#555",
-                  ...o.closeButton
-                },
-                children: "×"
-              }
-            ),
-            d && /* @__PURE__ */ p("h3", { id: `${t}-title`, className: `hook-dialog-title ${f.title || ""}`, style: { margin: "0 0 15px", fontSize: 20, ...o.title }, children: d }),
-            l && /* @__PURE__ */ p("div", { className: `hook-dialog-content ${f.content || ""}`, style: { marginBottom: 15, color: "#555", ...o.content }, children: l }),
-            /* @__PURE__ */ p("div", { className: `hook-dialog-actions ${f.actions || ""}`, style: { display: "flex", flexDirection: "column", gap: 10, paddingTop: 15, ...o.actions }, children: y.map((i, h) => {
-              const C = i.filter((e) => e.isOnLeft), c = i.filter((e) => !e.isOnLeft), g = (e, m) => {
-                const D = b[e.variant || "secondary"] || b.secondary;
-                return /* @__PURE__ */ p(
-                  "button",
-                  {
-                    ref: (v) => {
-                      e.isFocused && v && (B.current = v);
-                    },
-                    "data-action-focused": e.isFocused ? "true" : void 0,
-                    className: `hook-dialog-action-button hook-dialog-action-${e.variant || "secondary"} ${f.actionButton || ""} ${e.className || ""}`,
-                    onClick: (v) => {
-                      if (e.onClick?.(v, e), e.isSubmit && n.isReturnSubmit && x.current) return u(t, e, q(new FormData(x.current)));
-                      if (e.isSubmit && x.current?.requestSubmit(), e.noActionReturn) return v.stopPropagation();
-                      u(t, e);
-                    },
-                    style: {
-                      border: "none",
-                      borderRadius: 15,
-                      padding: "10px 18px",
-                      fontSize: 14,
-                      fontWeight: 800,
-                      cursor: "pointer",
-                      ...D,
-                      ...o.actionButton,
-                      ...e.style || {}
-                    },
-                    children: e.title
-                  },
-                  `${e.title}-${m}`
-                );
-              };
-              return /* @__PURE__ */ w("div", { className: `hook-dialog-actions-row ${f.actionsRow || ""}`, style: { display: "flex", gap: 8, justifyContent: "space-between", ...o.actionsRow }, children: [
-                /* @__PURE__ */ p("div", { className: "hook-dialog-actions-left", style: { display: "flex", gap: 8 }, children: C.map((e, m) => g(e, m)) }),
-                /* @__PURE__ */ p("div", { className: "hook-dialog-actions-right", style: { display: "flex", gap: 8 }, children: c.map((e, m) => g(e, m)) })
-              ] }, h);
-            }) })
-          ]
-        }
-      )
-    }
-  );
-}
-const P = L((t, u) => ({
-  instances: [],
-  addInstance: (s) => t((n) => ({
-    instances: [...n.instances, s]
-  })),
-  removeInstance: (s) => t((n) => ({
-    instances: n.instances.filter((a) => a.id !== s)
-  })),
-  getInstance: (s) => u().instances.find((n) => n.id === s)
-}));
-function Q(t) {
-  const { instances: u, addInstance: s, removeInstance: n, getInstance: a } = P(), d = F(), S = M((o) => {
-    const r = a(o);
-    r && (d.popModal(o), r.config.rejectOnCancel !== !1 ? r.reject(r.config.defaultCancelValue) : r.resolve(r.config.defaultCancelValue), n(o));
-  }, [a, n, d]), N = M((o, r) => {
-    const l = a(o);
-    l && (d.popModal(o), r.isCancel && l.config.rejectOnCancel !== !1 ? l.reject(r.value) : l.resolve(r.value), n(o));
-  }, [a, n, d]);
-  function f(o) {
-    return new Promise((r, l) => {
-      const y = Math.random().toString(36).substring(2, 6), b = {
-        ...t,
-        ...o,
-        classNames: {
-          ...t?.classNames,
-          ...o.classNames
-        },
-        styles: {
-          ...t?.styles,
-          ...o.styles
-        },
-        variantStyles: {
-          ...t?.variantStyles,
-          ...o.variantStyles
-        }
-      }, k = {
-        id: y,
-        config: b,
-        resolve: r,
-        reject: l
-      };
-      s(k), k.id = d.pushModal(y, R.createElement(K, { config: b, modalWindowId: y, handleClose: S, handleAction: N }));
-    });
-  }
-  return [f];
-}
-export {
-  X as BaseModalRenderer,
-  Q as useHookDialog
-};
+import{BaseModalRenderer as o}from"@rokku-x/react-hook-modal";import{default as a}from"./hooks/useHookDialog.esm.js";export{o as BaseModalRenderer,a as useHookDialog};

package/dist/store/dialogStore.cjs.js

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

package/dist/store/dialogStore.d.ts

@@ -1,4 +1,4 @@
-import { ConfirmInstance, ValidValue } from '../types';
+import { ConfirmInstance, ModalAction, ValidValue } from '../types';
 /**
  * Zustand store interface for managing dialog instances.
  * Maintains a centralized list of active dialog instances.
@@ -11,8 +11,18 @@ interface DialogStore<T = ValidValue> {
     addInstance: (instance: ConfirmInstance<T>) => void;
     /** Remove a dialog instance from the store by ID */
     removeInstance: (id: string) => void;
+    /** Handle closing a dialog instance */
+    handleClose: (id: string, isForceCancel?: boolean) => void;
+    /** Handle an action taken on a dialog instance */
+    handleAction: (id: string, action: ModalAction) => void;
     /** Get a dialog instance by ID */
     getInstance: (id: string) => ConfirmInstance<T> | undefined;
+    /** Get the context of a dialog instance by ID */
+    getContext: (id: string) => {
+        id: string;
+        config: any;
+        forceCancel: () => void;
+    } | undefined;
 }
 /**
  * Zustand store for managing dialog instances.

package/dist/store/dialogStore.esm.js

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

package/dist/types/index.d.ts

@@ -235,4 +235,26 @@ interface HandleActionCallback {
  * Friendly Form Data object type
  */
 export type FormDataObject = Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+/** Function type for requesting a dialog*/
+export interface RequestDialog<U> {
+    <U = FormDataObject>(config: ConfirmConfig & {
+        isReturnSubmit: true;
+    }): RequestDialogReturnType<U>;
+    <U = ValidValue>(config: ConfirmConfig): RequestDialogReturnType<U>;
+}
+/** Context information for a dialog instance */
+export type DialogInstanceContext = {
+    id: string;
+    config: any;
+    forceCancel: (forceReject?: boolean) => void;
+    forceAction: (action: ModalAction) => void;
+    forceDefault: () => void;
+};
+/** Return type of the requestDialog function with added context property */
+export type RequestDialogReturnType<T> = Promise<T> & {
+    id: string;
+    context: DialogInstanceContext;
+};
+/** Return type of the useHookDialog hook */
+export type UseHookDialogReturnType<T> = [requestDialog: RequestDialog<T>, getContext: (id: string) => DialogInstanceContext];
 export {};

package/dist/utils/utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.FormDataToObject=function(e){const t={};return e.forEach((e,r)=>{if(r in t){const o=t[r];Array.isArray(o)?o.push(e):t[r]=[o,e]}else t[r]=e}),t},exports.IsForm=t=>e.isValidElement(t)&&("form"===t.type||"string"==typeof t.type&&"form"===t.type.toLowerCase());

package/dist/utils/utils.esm.js

@@ -0,0 +1 @@
+import r from"react";function t(r){const t={};return r.forEach((r,e)=>{if(e in t){const o=t[e];Array.isArray(o)?o.push(r):t[e]=[o,r]}else t[e]=r}),t}const e=t=>r.isValidElement(t)&&("form"===t.type||"string"==typeof t.type&&"form"===t.type.toLowerCase());export{t as FormDataToObject,e as IsForm};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-dialog",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "author": "rokku-x",
   "repository": {
     "type": "git",
@@ -8,24 +8,8 @@
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
-  "devDependencies": {
-    "@changesets/cli": "^2.29.8",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^14.3.1",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^18.3.27",
-    "@types/react-dom": "^18.3.7",
-    "jsdom": "^24.1.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^1.6.1",
-    "copyfiles": "^2.4.1"
-  },
   "peerDependencies": {
-    "@rokku-x/react-hook-modal": "^0.7.8",
+    "@rokku-x/react-hook-modal": "^0.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "zustand": "^5.0.10"
@@ -66,20 +50,6 @@
     "react-modal"
   ],
   "license": "MIT",
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
-  "scripts": {
-    "build": "vite build && copyfiles -u 1 \"src/types/**/*.d.ts\" dist/ && copyfiles README.md LICENSE dist/",
-    "publish:first": "npm publish --access public --provenance false",
-    "dev": "vite",
-    "preview": "vite preview",
-    "test": "vitest",
-    "changeset": "changeset",
-    "version:changeset": "changeset version",
-    "publish:changeset": "changeset publish --access public"
-  },
   "sideEffects": false,
   "types": "dist/index.d.ts",
   "typesVersions": {
@@ -89,4 +59,4 @@
       ]
     }
   }
-}
+}