@rokku-x/react-hook-dialog 0.0.1 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rokku-x
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,7 @@
 # react-hook-dialog
 
+[![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)
+
 A 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
@@ -9,7 +11,6 @@ A powerful and flexible React dialog hook library for confirmation dialogs, aler
 - 🧩 **Modular Components** - Composed from reusable Backdrop and DialogWindow components
 - 📝 **Dialog Actions** - Flexible action button system with left/right positioning
 - 💅 **Full Customization** - Injectable className and styles at every level
-- 🧮 **Zustand State** - Centralized state management with Zustand
 - ⌨️ **Rich Configuration** - Default configs with per-call overrides
 - 🎁 **Zero Dependencies** - Only requires React, Zustand, and @rokku-x/react-hook-modal
 - 📱 **TypeScript Support** - Full type safety out of the box
@@ -132,6 +133,7 @@ Configuration for individual dialog calls.
 | `classNames` | `DialogClassNames` | Custom CSS classes for elements |
 | `styles` | `DialogStyles` | Custom inline styles for elements |
 | `variantStyles` | `DialogVariantStyles` | Custom variant button styles |
+| `isReturnSubmit` | `boolean` | When `true` and `content` is a `<form>`, clicking a submit action returns the serialized form values as the dialog result |
 
 ### ModalAction
 
@@ -141,11 +143,14 @@ Individual action button configuration.
 |---|---|---|---|
 | `title` | `React.ReactNode` | ✓ | Button label (string or React element) |
 | `value` | `ValidValue` | | Value to return when clicked |
-| `isCancel` | `boolean` | | Treat as cancel button (respects rejectOnCancel) |
+| `isCancel` | `boolean` | | Treat as cancel button (respects `rejectOnCancel`) |
 | `isOnLeft` | `boolean` | | Position button on left side of row |
+| `isFocused` | `boolean` | | Request initial focus when the dialog opens (highest focus priority) |
+| `isSubmit` | `boolean` | | Render as `type="submit"` and trigger form submit if `content` is a `<form>` |
+| `noActionReturn` | `boolean` | | Run `onClick` but do _not_ perform default dialog action (`handleAction`) — useful for custom flows |
 | `variant` | `ModalVariant` | | Visual style variant |
-| `className` | `string` | | Additional CSS class |
-| `style` | `React.CSSProperties` | | Custom inline styles |
+| `className` | `string` | | Additional CSS class applied to the button |
+| `style` | `React.CSSProperties` | | Custom inline styles applied to the button (highest style priority) |
 | `onClick` | `((event, action) => void) \| (() => void)` | | Click handler called before default handling |
 
 ### ModalVariant
@@ -166,6 +171,23 @@ type ModalVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' |
 | `info` | Sky (#0ea5e9) | White |
 | `neutral` | Gray (#6b7280) | White |
 
+### Action Flags — Priority & Behavior 🔀
+
+- **Focus priority**: `isFocused` (per-action) > close button (if shown) > first action button > dialog container
+- **Click ordering**: `action.onClick` is executed first. Then:
+  1. If `isSubmit` is true and `isReturnSubmit` is also enabled (and `content` is a `<form>`), the form is serialized and its values are returned as the dialog result immediately (no native submit is triggered).
+  2. Else if `isSubmit` is true, the form's `requestSubmit()` is invoked (useful for native validation flows).
+  3. Else if `noActionReturn` is true, the default dialog action is skipped (use to perform custom flows and close the dialog manually).
+  4. Otherwise `handleAction` is called and the dialog resolves/rejects using the action's `value`.
+- **isCancel**: marks a cancel action — dialog resolves or rejects according to `rejectOnCancel` and `defaultCancelValue` settings.
+- **Placement**: `isOnLeft` positions the action on the left side; other actions render on the right.
+- **Style & class precedence** (lowest → highest):
+  1. built-in `baseVariantStyles` (library defaults)
+  2. `ConfirmConfig.variantStyles` (per-call variant overrides)
+  3. `ConfirmConfig.styles.actionButton` (per-call default action button styles)
+  4. `ModalAction.style` (per-action inline style — highest precedence)
+  5. `className` values are appended so per-action `className` and `ConfirmConfig.classNames.actionButton` both apply (per-action classes appear last).
+
 ### DialogClassNames
 
 Customize CSS classes for all elements:
@@ -565,6 +587,43 @@ const handleFormSubmit = async (formData: any) => {
 };
 ```
 
+### Example 15: Form Dialog Returning Values (isReturnSubmit)
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+async function openProfileDialog() {
+  const result = await requestDialog({
+    title: 'Edit Profile',
+    content: (
+      <form>
+        <label>
+          Name
+          <input name="name" defaultValue="Alice" />
+        </label>
+        <label>
+          Email
+          <input name="email" defaultValue="alice@example.com" />
+        </label>
+      </form>
+    ),
+    actions: [[
+      { title: 'Cancel', isCancel: true },
+      // `isSubmit` triggers native submit; when `isReturnSubmit` is enabled on the dialog config, the dialog returns the form values object
+      { title: 'Save', isSubmit: true }
+    ]],
+    isReturnSubmit: true
+  });
+
+  if (result && typeof result === 'object') {
+    // `result` is the object built from the submitted form
+    console.log('Form values:', result);
+    // e.g. result.name, result.email
+  }
+}
+```
+
+> 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

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rokku-x
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.