react-confirm 0.4.0 → 0.5.0-4

package/README.md

@@ -70,6 +70,23 @@ const handleDelete = async (): Promise<void> => {
 <button onClick={handleDelete}>Delete Item</button>
 ```
 
+## External Control
+
+You can close pending confirmation dialogs from outside using the `proceed` function. This is useful when you need to close a dialog from a different part of your application.
+
+```typescript
+import { proceed } from 'react-confirm';
+
+const p = confirm({ message: 'Continue?' });
+
+// Auto-close after 10 seconds
+setTimeout(() => {
+  proceed(p, false);
+}, 10000);
+
+const result = await p;
+```
+
 ## Using with React Context
 
 If your dialog needs to access React Context (themes, authentication, etc.), use the context-aware approach:
@@ -123,11 +140,9 @@ const Confirmation2: ConfirmDialog<Props, Response> = (props) => (<Dialog />);
 - **React ≤17**: Use `react-confirm` version 0.1.x
 
 
-## More Examples
+## Examples
 
-- [TypeScript Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/1_typescript)
-- [Context Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/2_typescript_using_context)
-- [Bootstrap Example](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)
-- [Chakra UI Example](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
+- [Simple Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/1_typescript) - Complete TypeScript implementation.
+- [Context Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/2_typescript_using_context) - Using React Context with themes and providers
 
-For additional reference examples, you can also check the [react-confirm-sample](https://github.com/haradakunihiko/react-confirm-sample/) repository, which contains archived historical examples and some alternative implementations. **Check the examples above first for the latest patterns.**
+Source code for these examples can be found in the [react-confirm-sample](https://github.com/haradakunihiko/react-confirm-sample/) repository, which also contains some archived older implementations.

package/dist/confirmable.d.ts

@@ -0,0 +1,3 @@
+import type { ConfirmDialog, ConfirmableDialog } from './types';
+declare const confirmable: <P, R>(Component: ConfirmDialog<P, R>) => ConfirmableDialog<P, R>;
+export default confirmable;

package/dist/confirmable.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var confirmable = function (Component) {
+    return function (_a) {
+        var dispose = _a.dispose, reject = _a.reject, resolve = _a.resolve, other = __rest(_a, ["dispose", "reject", "resolve"]);
+        var _b = (0, react_1.useState)(true), show = _b[0], setShow = _b[1];
+        var dismiss = function () {
+            setShow(false);
+            dispose();
+        };
+        var cancel = function (value) {
+            setShow(false);
+            reject(value);
+        };
+        var proceed = function (value) {
+            setShow(false);
+            resolve(value);
+        };
+        return ((0, jsx_runtime_1.jsx)(Component, __assign({ cancel: cancel, dismiss: dismiss, proceed: proceed, show: show }, other)));
+    };
+};
+exports.default = confirmable;

package/dist/context.d.ts

@@ -0,0 +1,3 @@
+import type { ConfirmationContext } from './types';
+export declare function createConfirmationContext(mountNode?: Element | DocumentFragment | HTMLElement): ConfirmationContext;
+export declare const ContextAwareConfirmation: ConfirmationContext;

package/dist/context.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextAwareConfirmation = void 0;
+exports.createConfirmationContext = createConfirmationContext;
+var reactTree_1 = require("./mounter/reactTree");
+var createConfirmation_1 = require("./createConfirmation");
+function createConfirmationContext(mountNode) {
+    var mounter = (0, reactTree_1.createReactTreeMounter)(mountNode);
+    var createConfirmation = (0, createConfirmation_1.createConfirmationCreater)(mounter);
+    var ConfirmationRoot = (0, reactTree_1.createMountPoint)(mounter);
+    return {
+        createConfirmation: function (component, unmountDelay) {
+            return createConfirmation(component, unmountDelay);
+        },
+        ConfirmationRoot: ConfirmationRoot,
+    };
+}
+exports.ContextAwareConfirmation = createConfirmationContext();

package/dist/controls.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Control handle for a confirmation dialog
+ */
+export type ConfirmationHandle<R> = {
+    resolve: (value: R) => void;
+    reject: (reason?: any) => void;
+    dispose: () => void;
+    settled?: boolean;
+};
+/**
+ * Register a Promise and its handle to the registry
+ */
+export declare function register<R>(promise: Promise<R>, handle: ConfirmationHandle<R>): void;
+/**
+ * Resolve a confirmation dialog and close it
+ * @param promise The Promise to resolve
+ * @param response The response value to resolve with
+ * @returns true if successful
+ */
+export declare function proceed<R>(promise: Promise<R>, response: R): boolean;
+/**
+ * Close a confirmation dialog without resolving or rejecting the Promise
+ * The Promise remains pending
+ * @param promise The Promise to dismiss
+ * @returns true if successful
+ */
+export declare function dismiss<R>(promise: Promise<R>): boolean;
+/**
+ * Reject a confirmation dialog and close it
+ * @param promise The Promise to reject
+ * @param reason The rejection reason
+ * @returns true if successful
+ */
+export declare function cancel<R>(promise: Promise<R>, reason?: unknown): boolean;

package/dist/controls.js

@@ -0,0 +1,93 @@
+"use strict";
+// Lightweight registry to control pending confirmations from outside
+// Stores only control handles (resolve/reject/dispose), not UI state
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = register;
+exports.proceed = proceed;
+exports.dismiss = dismiss;
+exports.cancel = cancel;
+var active = new Map();
+/**
+ * Register a Promise and its handle to the registry
+ */
+function register(promise, handle) {
+    active.set(promise, handle);
+    // Auto cleanup after settlement
+    promise
+        .finally(function () {
+        var h = active.get(promise);
+        if (h)
+            h.settled = true;
+        active.delete(promise);
+    })
+        .catch(function () {
+        // Already handled by finally
+    });
+}
+/**
+ * Resolve a confirmation dialog and close it
+ * @param promise The Promise to resolve
+ * @param response The response value to resolve with
+ * @returns true if successful
+ */
+function proceed(promise, response) {
+    var handle = active.get(promise);
+    if (!handle || handle.settled)
+        return false;
+    try {
+        handle.resolve(response);
+    }
+    finally {
+        try {
+            handle.dispose();
+        }
+        catch (_a) {
+            // Ignore
+        }
+        active.delete(promise);
+    }
+    return true;
+}
+/**
+ * Close a confirmation dialog without resolving or rejecting the Promise
+ * The Promise remains pending
+ * @param promise The Promise to dismiss
+ * @returns true if successful
+ */
+function dismiss(promise) {
+    var handle = active.get(promise);
+    if (!handle || handle.settled)
+        return false;
+    try {
+        handle.dispose();
+    }
+    catch (_a) {
+        // Ignore
+    }
+    active.delete(promise);
+    return true;
+}
+/**
+ * Reject a confirmation dialog and close it
+ * @param promise The Promise to reject
+ * @param reason The rejection reason
+ * @returns true if successful
+ */
+function cancel(promise, reason) {
+    var handle = active.get(promise);
+    if (!handle || handle.settled)
+        return false;
+    try {
+        handle.reject(reason);
+    }
+    finally {
+        try {
+            handle.dispose();
+        }
+        catch (_a) {
+            // Ignore
+        }
+        active.delete(promise);
+    }
+    return true;
+}

package/dist/createConfirmation.d.ts

@@ -0,0 +1,4 @@
+import type { ConfirmableDialog, Mounter } from './types';
+export declare const createConfirmationCreater: (mounter: Mounter) => <P, R>(Component: ConfirmableDialog<P, R>, unmountDelay?: number, mountingNode?: HTMLElement) => (props: P) => Promise<R>;
+declare const _default: <P, R>(component: ConfirmableDialog<P, R>, unmountDelay?: number, mountingNode?: HTMLElement) => (props: P) => Promise<R>;
+export default _default;

package/dist/createConfirmation.js

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConfirmationCreater = void 0;
+var domTree_1 = require("./mounter/domTree");
+var controls_1 = require("./controls");
+var createConfirmationCreater = function (mounter) {
+    return function (Component, unmountDelay, mountingNode) {
+        if (unmountDelay === void 0) { unmountDelay = 1000; }
+        return function (props) {
+            var mountId;
+            var resolveRef = function () { };
+            function dispose() {
+                setTimeout(function () {
+                    mounter.unmount(mountId);
+                }, unmountDelay);
+            }
+            var rejectRef = function () { };
+            var inner = new Promise(function (resolve, reject) {
+                resolveRef = resolve;
+                rejectRef = reject;
+                try {
+                    mountId = mounter.mount(Component, __assign({ reject: reject, resolve: resolve, dispose: dispose }, props), mountingNode);
+                }
+                catch (e) {
+                    // keep behavior identical to JS version
+                    console.error(e);
+                    throw e;
+                }
+            });
+            var wrapped = inner.then(function (result) {
+                dispose();
+                return result;
+            }, function (err) {
+                dispose();
+                return Promise.reject(err);
+            });
+            // Register to controls layer for external control
+            (0, controls_1.register)(wrapped, { resolve: resolveRef, reject: rejectRef, dispose: dispose });
+            return wrapped;
+        };
+    };
+};
+exports.createConfirmationCreater = createConfirmationCreater;
+var defaultCreateConfirmation = (0, exports.createConfirmationCreater)((0, domTree_1.createDomTreeMounter)());
+exports.default = defaultCreateConfirmation;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import confirmable from './confirmable';
+import createConfirmation, { createConfirmationCreater } from './createConfirmation';
+import { createDomTreeMounter } from './mounter/domTree';
+import { createReactTreeMounter, createMountPoint } from './mounter/reactTree';
+import { createConfirmationContext, ContextAwareConfirmation } from './context';
+import { proceed, dismiss, cancel } from './controls';
+export type { ConfirmDialogProps, ConfirmDialog, ConfirmableDialog, Mounter, TreeMounter, ConfirmationContext, } from './types';
+export { confirmable, createConfirmation, createConfirmationCreater, createDomTreeMounter, createReactTreeMounter, createMountPoint, createConfirmationContext, ContextAwareConfirmation, proceed, dismiss, cancel, };

package/dist/index.js

@@ -0,0 +1,56 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cancel = exports.dismiss = exports.proceed = exports.ContextAwareConfirmation = exports.createConfirmationContext = exports.createMountPoint = exports.createReactTreeMounter = exports.createDomTreeMounter = exports.createConfirmationCreater = exports.createConfirmation = exports.confirmable = void 0;
+var confirmable_1 = __importDefault(require("./confirmable"));
+exports.confirmable = confirmable_1.default;
+var createConfirmation_1 = __importStar(require("./createConfirmation"));
+exports.createConfirmation = createConfirmation_1.default;
+Object.defineProperty(exports, "createConfirmationCreater", { enumerable: true, get: function () { return createConfirmation_1.createConfirmationCreater; } });
+var domTree_1 = require("./mounter/domTree");
+Object.defineProperty(exports, "createDomTreeMounter", { enumerable: true, get: function () { return domTree_1.createDomTreeMounter; } });
+var reactTree_1 = require("./mounter/reactTree");
+Object.defineProperty(exports, "createReactTreeMounter", { enumerable: true, get: function () { return reactTree_1.createReactTreeMounter; } });
+Object.defineProperty(exports, "createMountPoint", { enumerable: true, get: function () { return reactTree_1.createMountPoint; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "createConfirmationContext", { enumerable: true, get: function () { return context_1.createConfirmationContext; } });
+Object.defineProperty(exports, "ContextAwareConfirmation", { enumerable: true, get: function () { return context_1.ContextAwareConfirmation; } });
+var controls_1 = require("./controls");
+Object.defineProperty(exports, "proceed", { enumerable: true, get: function () { return controls_1.proceed; } });
+Object.defineProperty(exports, "dismiss", { enumerable: true, get: function () { return controls_1.dismiss; } });
+Object.defineProperty(exports, "cancel", { enumerable: true, get: function () { return controls_1.cancel; } });

package/dist/mounter/domTree.d.ts

@@ -0,0 +1,2 @@
+import type { Mounter } from '../types';
+export declare function createDomTreeMounter(defaultMountNode?: Element | DocumentFragment | HTMLElement): Mounter;

package/dist/mounter/domTree.js

@@ -0,0 +1,43 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDomTreeMounter = createDomTreeMounter;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var client_1 = require("react-dom/client");
+function createDomTreeMounter(defaultMountNode) {
+    var confirms = {};
+    var callbacks = {};
+    function mount(Component, props, mountNode) {
+        var key = Math.floor(Math.random() * (1 << 30)).toString(16);
+        var parent = (mountNode || defaultMountNode || document.body);
+        var wrapper = parent.appendChild(document.createElement('div'));
+        confirms[key] = wrapper;
+        var root = (0, client_1.createRoot)(wrapper);
+        root.render((0, jsx_runtime_1.jsx)(Component, __assign({}, props)));
+        callbacks.mounted && callbacks.mounted();
+        return key;
+    }
+    function unmount(key) {
+        var wrapper = confirms[key];
+        delete confirms[key];
+        if (wrapper && wrapper.parentNode) {
+            wrapper.parentNode.removeChild(wrapper);
+        }
+    }
+    return {
+        mount: mount,
+        unmount: unmount,
+        // keep runtime `options` for backward-compat; not part of public type
+        options: {},
+    };
+}

package/dist/mounter/reactTree.d.ts

@@ -0,0 +1,3 @@
+import type { TreeMounter } from '../types';
+export declare function createReactTreeMounter(mountNode?: Element | DocumentFragment | HTMLElement): TreeMounter;
+export declare function createMountPoint(reactTreeMounter: TreeMounter): () => import("react/jsx-runtime").JSX.Element;

package/dist/mounter/reactTree.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReactTreeMounter = createReactTreeMounter;
+exports.createMountPoint = createMountPoint;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+function createReactTreeMounter(mountNode) {
+    var confirms = {};
+    var callbacks = {};
+    function mount(Component, props, _mountNode) {
+        var key = Math.floor(Math.random() * (1 << 30)).toString(16);
+        confirms[key] = { Component: Component, props: props };
+        callbacks.mounted && callbacks.mounted(confirms);
+        return key;
+        // _mountNode is ignored - ReactTreeMounter uses options.mountNode instead
+    }
+    function unmount(key) {
+        delete confirms[key];
+        callbacks.mounted && callbacks.mounted(confirms);
+    }
+    function setMountedCallback(func) {
+        callbacks.mounted = func;
+    }
+    return {
+        mount: mount,
+        unmount: unmount,
+        options: {
+            setMountedCallback: setMountedCallback,
+            mountNode: mountNode,
+        },
+    };
+}
+function createMountPoint(reactTreeMounter) {
+    return function () {
+        var _a = (0, react_1.useState)({}), confirmComponents = _a[0], setConfirmComponents = _a[1];
+        (0, react_1.useEffect)(function () {
+            return reactTreeMounter.options.setMountedCallback(function (components) {
+                setConfirmComponents(__assign({}, components));
+            });
+        }, []);
+        var element = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.keys(confirmComponents).map(function (key) {
+                var _a = confirmComponents[key], Component = _a.Component, props = _a.props;
+                return (0, jsx_runtime_1.jsx)(Component, __assign({}, props), key);
+            }) }));
+        if (reactTreeMounter.options.mountNode) {
+            element = (0, react_dom_1.createPortal)(element, reactTreeMounter.options.mountNode);
+        }
+        return element;
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export type ConfirmableProps<P, R> = {
+    dispose: () => void;
+    resolve: (value: R | PromiseLike<R>) => void;
+    reject: (reason?: any) => void;
+} & P;
+export type ConfirmDialogProps<P, R> = {
+    /** Dismiss dialog without resolving the promise. */
+    dismiss: () => void;
+    /** Resolve the promise with the given value. */
+    proceed: (value: R) => void;
+    /** Reject the promise with the given value. */
+    cancel: (value?: any) => void;
+    /** Indicates if the dialog should be shown aka. someone is waiting for a promise. */
+    show: boolean;
+} & P;
+export type ConfirmDialog<P, R> = React.ComponentType<ConfirmDialogProps<P, R>>;
+export type ConfirmableDialog<P, R> = React.ComponentType<ConfirmableProps<P, R>>;
+export type Mounter = {
+    mount: (component: React.ComponentType, props: any, mountNode?: HTMLElement) => string;
+    unmount: (key: string) => void;
+};
+export type TreeMounter = {
+    options: {
+        setMountedCallback: (callback: (components: any) => void) => void;
+        mountNode?: Element | DocumentFragment | HTMLElement;
+    };
+} & Mounter;
+export interface ConfirmationContext {
+    /**
+     * Creates a confirmation function for a given component
+     * @param component - The confirmable component
+     * @param unmountDelay - Delay before unmounting the component (default: 1000ms)
+     * @returns Confirmation function that returns a Promise
+     */
+    createConfirmation: <P, R>(component: ConfirmableDialog<P, R>, unmountDelay?: number) => (props: P) => Promise<R>;
+    /**
+     * React component that must be rendered in your app to display confirmations
+     * Place this component at the root level of your app or where you want confirmations to appear
+     */
+    ConfirmationRoot: React.ComponentType;
+}
+export declare const __types_marker: 0;

package/dist/types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.__types_marker = void 0;
+// Force declaration file emission for this module
+// This value is never imported by runtime code; it only ensures dist/types.d.ts exists.
+exports.__types_marker = 0;

package/package.json

@@ -1,8 +1,18 @@
 {
   "name": "react-confirm",
-  "version": "0.4.0",
-  "description": "Small library which makes your Dialog component callable",
-  "main": "lib/index.js",
+  "version": "0.5.0-4",
+  "description": "A lightweight React library that simplifies confirmation dialogs with a Promise-based API — like window.confirm(), but fully customizable.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/haradakunihiko/react-confirm.git"
@@ -13,39 +23,46 @@
   "keywords": [
     "react",
     "reactjs",
-    "confirm"
+    "confirm",
+    "confirmation",
+    "dialog",
+    "modal",
+    "promise",
+    "async",
+    "typescript",
+    "ui",
+    "component"
   ],
   "homepage": "https://github.com/haradakunihiko/react-confirm",
+  "sideEffects": false,
   "files": [
-    "lib",
+    "dist",
     "src",
-    "typescript"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
-    "clean": "rimraf lib",
-    "build": "babel src --out-dir lib",
-    "prepublish": "npm run clean && npm run build",
+    "pretest": "npm run build",
+    "clean": "rimraf dist lib",
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run clean && npm run build && npm test",
     "test": "jest",
     "test:types": "jest __tests__/typescript/",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "npm run build && tsc --noEmit",
+    "typecheck:tests": "npm run build && tsc -p tsconfig.tests.json"
   },
-  "author": "",
+  "author": "haradakunihiko",
   "license": "MIT",
   "peerDependencies": {
     "react": ">=18.x",
     "react-dom": ">=18.x"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "babel-jest": "^29.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "react": ">=18.2.0",
@@ -55,6 +72,5 @@
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.0"
   },
-  "dependencies": {},
-  "typings": "typescript/index.d.ts"
+  "dependencies": {}
 }

package/src/confirmable.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import type { ConfirmableProps, ConfirmDialog, ConfirmableDialog } from './types';
+
+const confirmable: <P, R>(Component: ConfirmDialog<P, R>) => ConfirmableDialog<P, R> =
+<P, R>(Component: ConfirmDialog<P, R>) =>
+  ({ dispose, reject, resolve, ...other }: ConfirmableProps<P, R>) => {
+    const [show, setShow] = useState(true);
+
+    const dismiss = () => {
+      setShow(false);
+      dispose();
+    };
+
+    const cancel = (value?: any) => {
+      setShow(false);
+      reject(value);
+    };
+
+    const proceed = (value: R) => {
+      setShow(false);
+      resolve(value);
+    };
+
+    return (
+      <Component
+        cancel={cancel}
+        dismiss={dismiss}
+        proceed={proceed}
+        show={show}
+        {...(other as P)}
+      />
+    );
+  };
+
+export default confirmable;