react-confirm 0.3.1 → 0.4.0-0

package/README.md

@@ -1,142 +1,133 @@
 # react-confirm
-react-confirm is a lightweight library that simplifies the implementation of confirmation dialogs in React applications by offering a Promise-based API that works seamlessly with async/await syntax, similar to `window.confirm`.
 
-One key feature of react-confirm is that it doesn't provide a specific view or component for the confirmation dialog, allowing you to easily customize the appearance of the dialog to match your application's design.
+Create confirmation dialogs as simple as `window.confirm()`, but with full customization and Promise-based API.
 
 [![npm version](https://badge.fury.io/js/react-confirm.svg)](https://badge.fury.io/js/react-confirm)
 
-## Demo
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/1_typescript)
-
-## Motivation
-React is a powerful library that allows for reactive rendering based on component state. However, managing temporary states like confirmation dialogs can quickly become complex. The question is: is it worth implementing these states within your app? The answer is not always a clear yes.
-
 ## What you can do
-react-confirm library offers several benefits:
-
-- You can open a dialog component by calling a function without appending it into your React tree. The function returns a promise, allowing you to handle confirmation results with callbacks.
-- You can pass arguments to the function and use them inside the dialog component.
-- You can retrieve values from the component in the promise.
-- The library provides flexibility in designing the dialog. There is no limitation in the type of components you can use, whether it be input forms or multiple buttons. You can even check out the demo site to see examples of how to customize the dialog.
-
-## Versions
-
-- React 18+ users should use `react-confirm` version 0.2.x or 0.3.x
-- React <=17 users should stick to `react-confirm` version 0.1.x
 
-## Usage
-1. Create your dialog component.
-2. Apply `confirmable` HOC to your component (Optional. See `confirmable` implementation).
-3. Create a function using `createConfirmation` by passing your `confirmable` component.
-4. Call it!
+**🎯 Simple confirmation dialogs**
+```typescript
+const result = await confirm({ message: 'Delete this item?' });
+if (result) {
+  // User confirmed
+}
+```
 
-### Create your dialog component and Apply `confirmable` HOC to your component.
+**🎨 Fully customizable UI** - No built-in styling. Use your own components, UI libraries, or design system.
 
-```ts
-import * as React from 'react';
+**⚡ Promise-based API** - Works seamlessly with async/await, no complex state management needed.
 
-import Modal from 'react-bootstrap/Modal'
-import Button from 'react-bootstrap/Button'
+**🔄 React Context support** - Access your app's context, themes, and providers from within dialogs.
 
-import { confirmable, ConfirmDialog } from 'react-confirm';
+**📦 Lightweight** - No dependencies, small bundle size.
 
-export interface Props {
-  confirmation?: string;
-};
+## Demo
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/1_typescript)
 
-const Confirmation: ConfirmDialog<Props, boolean> = ({show, proceed, confirmation}) => (
-  <Dialog onHide={() => proceed(false)} show={show}>
-    {confirmation}
-    <button onClick={() => proceed(false)}>CANCEL</button>
-    <button onClick={() => proceed(true)}>OK</button>
-  </Dialog>
-);
+## Quick Start
 
-export default confirmable(Confirmation);
+### 1. Install
+```bash
+npm install react-confirm
 ```
 
-### Create a function using `createConfirmation`
-```js
-import { createConfirmation } from 'react-confirm';
-import YourDialog from './YourDialog';
+### 2. Create your dialog and confirmation function
+```typescript
+import React from 'react';
+import { confirmable, createConfirmation, type ConfirmDialogProps } from 'react-confirm';
+
+const MyDialog = ({ show, proceed, message }: ConfirmDialogProps<{ message: string }, boolean>) => (
+  <div className={`dialog-overlay ${show ? 'show' : 'hide'}`}>
+    <div className="dialog">
+      <p>{message}</p>
+      <button onClick={() => proceed(true)}>Yes</button>
+      <button onClick={() => proceed(false)}>No</button>
+    </div>
+  </div>
+);
 
-// create confirm function
-export const confirm = createConfirmation(YourDialog);
+export const confirm = createConfirmation(confirmable(MyDialog));
 ```
 
-### Call it!
-Now, you can show dialog just like window.confirm with async-await. The most common example is onclick handler for submit buttons.
-
-```js
-import { confirm } from './confirm'
-
-const handleOnClick = async () => {
-  if (await confirm({
-    confirmation: 'Are you sure?'
-  })) {
-    console.log('yes');
-  } else {
-    console.log('no');
+### 3. Use it!
+```typescript
+import { confirm } from './confirm';
+
+const handleDelete = async (): Promise<void> => {
+  // Fully type-safe: message is required, result is boolean
+  const result = await confirm({ 
+    message: 'Are you sure you want to delete this item?' 
+  });
+  
+  if (result) {
+    // User confirmed - proceed with deletion
+    deleteItem();
   }
-}
+};
 
+// In your component
+<button onClick={handleDelete}>Delete Item</button>
 ```
 
-You can check more complex example in [codesandbox](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)
+## Using with React Context
 
-## Using with Context
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/2_typescript_using_context)
+If your dialog needs to access React Context (themes, authentication, etc.), use the context-aware approach:
 
-By default, this library renders the confirmation dialog without appending the component to your app's React component tree. While this can be useful, it may cause issues if you need to consume context in your component. To overcome this problem, you can use the `MountPoint` component to include your confirmation dialog within your app's tree, enabling it to access context and other data from the app.
+### Simple Context Usage
 
-Create your own `createConfirmation` function and `MountPoint` Component using `createConfirmationCreater` and `createReactTreeMounter`.
+Key differences from Quick Start:
 
-```js
-import { createConfirmationCreater, createReactTreeMounter, createMountPoint } from 'react-confirm';
-
-const mounter = createReactTreeMounter();
-
-export const createConfirmation = createConfirmationCreater(mounter);
-export const MountPoint = createMountPoint(mounter);
-```
+```typescript
+// 1. Import ContextAwareConfirmation instead of createConfirmation
+import { confirmable, ContextAwareConfirmation, type ConfirmDialogProps } from 'react-confirm';
 
-Put `MountPoint` into your React tree.
-```js
-const YourRootComponent = () => {
+// 2. Add ConfirmationRoot to your app
+function App(): JSX.Element {
   return (
-    <YourContext.Provider>
-      <MountPoint />
-      <YourApp />
-    </YourContext.Provider>
-  )
+    <ThemeProvider>
+      <div>
+        <ContextAwareConfirmation.ConfirmationRoot />
+        <YourAppContent />
+      </div>
+    </ThemeProvider>
+  );
 }
-```
 
-use your `createConfirmation` as usual.
-```js
-export const confirm = createConfirmation(YourDialog);
+// 3. Your dialog can now use context
+const ThemedDialog = ({ show, proceed, message }: ConfirmDialogProps<Props, boolean>) => {
+  const theme = useContext(ThemeContext); // ✅ Context works!
+  // ... rest of dialog implementation
+};
+
+// 4. Use ContextAwareConfirmation.createConfirmation
+const confirm = ContextAwareConfirmation.createConfirmation(confirmable(ThemedDialog));
 ```
 
-To render the confirmation dialog within the React component tree but in a different part of the DOM, you can pass a DOM element to the `createReactTreeMounter` function. This will use the `createPortal` method to render the confirmation dialog in the specified DOM element while keeping it within the React component tree.
+## TypeScript Support
+
+TypeScript automatically infers types from your dialog's Props definition, making the confirmation function fully type-safe.
 
-```js
-const mounter = createReactTreeMounter(document.body);
+```typescript
+// Option 1: Using React.FC with ConfirmDialogProps
+const Confirmation1: React.FC<ConfirmDialogProps<Props, Response>> = (props) => (<Dialog />);
+
+// Option 2: Using ConfirmDialog type
+const Confirmation2: ConfirmDialog<Props, Response> = (props) => (<Dialog />);
 ```
 
-### example
-Context example with Chakra-ui in [codesandbox](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
 
-## typescript usage
-Below, we present two possible ways to define a confirmation dialog component using react-confirm. You can choose either based on your preference.
+## React Version Compatibility
+
+- **React 18+**: Use `react-confirm` version 0.2.x or 0.3.x
+- **React ≤17**: Use `react-confirm` version 0.1.x
 
-```ts
-const Confirmation1: React.FC<ConfirmDialogProps<Props, Response>> = (props) => (<Dialog></Dialog>)
-const Confirmation2: ConfirmDialog<Props, Response> = (props) => (<Dialog></Dialog>)
-```
 
-When defining your dialog component, set both the `Props` for the dialog and the `Response` value to be passed when the dialog closes. This will be handy when calling the dialog.
+## More 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)
 
-## Other Examples
-- [chakra-ui(using context) demo in codesandbox](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
-- [material-ui example](https://github.com/haradakunihiko/react-confirm/tree/master/example/material-ui)
+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.**

package/lib/confirmable.js

@@ -1,23 +1,22 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _excluded = ["dispose", "reject", "resolve"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) { o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } } return t; }
 var confirmable = function confirmable(Component) {
   return function (_ref) {
     var dispose = _ref.dispose,
@@ -48,5 +47,4 @@ var confirmable = function confirmable(Component) {
     }, other));
   };
 };
-var _default = confirmable;
-exports["default"] = _default;
+var _default = exports["default"] = confirmable;

package/lib/context.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextAwareConfirmation = void 0;
+exports.createConfirmationContext = createConfirmationContext;
+var _reactTree = require("./mounter/reactTree");
+var _createConfirmation2 = require("./createConfirmation");
+/**
+ * Creates a React context-aware confirmation system.
+ * This provides a simple interface for using confirmations within React component tree.
+ * 
+ * @param {HTMLElement} [mountNode] - Optional DOM node to mount dialogs in
+ * @returns {Object} Object containing createConfirmation function and ConfirmationRoot component
+ */
+function createConfirmationContext(mountNode) {
+  var mounter = (0, _reactTree.createReactTreeMounter)(mountNode);
+  var _createConfirmation = (0, _createConfirmation2.createConfirmationCreater)(mounter);
+  var ConfirmationRoot = (0, _reactTree.createMountPoint)(mounter);
+  return {
+    /**
+     * Creates a confirmation function for a given component
+     * @param {React.ComponentType} component - The confirmable component
+     * @param {number} [unmountDelay=1000] - Delay before unmounting the component
+     * @returns {Function} Confirmation function that returns a Promise
+     */
+    createConfirmation: function createConfirmation(component, unmountDelay) {
+      return _createConfirmation(component, unmountDelay);
+    },
+    /**
+     * 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: ConfirmationRoot
+  };
+}
+
+/**
+ * Context-aware confirmation system for convenient usage
+ * Use this if you don't need custom mount nodes
+ */
+var ContextAwareConfirmation = exports.ContextAwareConfirmation = createConfirmationContext();

package/lib/createConfirmation.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.createConfirmationCreater = void 0;
 var _domTree = require("./mounter/domTree");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-var createConfirmationCreater = function createConfirmationCreater(mounter) {
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var createConfirmationCreater = exports.createConfirmationCreater = function createConfirmationCreater(mounter) {
   return function (Component) {
     var unmountDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
     var mountingNode = arguments.length > 2 ? arguments[2] : undefined;
@@ -41,6 +44,4 @@ var createConfirmationCreater = function createConfirmationCreater(mounter) {
     };
   };
 };
-exports.createConfirmationCreater = createConfirmationCreater;
-var _default = createConfirmationCreater((0, _domTree.createDomTreeMounter)());
-exports["default"] = _default;
+var _default = exports["default"] = createConfirmationCreater((0, _domTree.createDomTreeMounter)());

package/lib/index.js

@@ -1,9 +1,15 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ContextAwareConfirmation", {
+  enumerable: true,
+  get: function get() {
+    return _context.ContextAwareConfirmation;
+  }
+});
 Object.defineProperty(exports, "confirmable", {
   enumerable: true,
   get: function get() {
@@ -16,6 +22,12 @@ Object.defineProperty(exports, "createConfirmation", {
     return _createConfirmation["default"];
   }
 });
+Object.defineProperty(exports, "createConfirmationContext", {
+  enumerable: true,
+  get: function get() {
+    return _context.createConfirmationContext;
+  }
+});
 Object.defineProperty(exports, "createConfirmationCreater", {
   enumerable: true,
   get: function get() {
@@ -44,6 +56,6 @@ var _confirmable = _interopRequireDefault(require("./confirmable"));
 var _createConfirmation = _interopRequireWildcard(require("./createConfirmation"));
 var _domTree = require("./mounter/domTree");
 var _reactTree = require("./mounter/reactTree");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _context = require("./context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/lib/mounter/domTree.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createDomTreeMounter = createDomTreeMounter;
 var _react = _interopRequireDefault(require("react"));
 var _client = require("react-dom/client");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function createDomTreeMounter(defaultMountNode) {
   var confirms = {};
   var callbacks = {};
@@ -15,7 +15,7 @@ function createDomTreeMounter(defaultMountNode) {
     var wrapper = (mountNode || defaultMountNode || document.body).appendChild(document.createElement('div'));
     confirms[key] = wrapper;
     var root = (0, _client.createRoot)(wrapper);
-    root.render( /*#__PURE__*/_react["default"].createElement(Component, props));
+    root.render(/*#__PURE__*/_react["default"].createElement(Component, props));
     callbacks.mounted && callbacks.mounted();
     return key;
   }

package/lib/mounter/reactTree.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,22 +8,23 @@ exports.createMountPoint = createMountPoint;
 exports.createReactTreeMounter = createReactTreeMounter;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function createReactTreeMounter(mountNode) {
   var confirms = {};
   var callbacks = {};
-  function mount(Component, props) {
+  function mount(Component, props, _mountNode) {
     var key = Math.floor(Math.random() * (1 << 30)).toString(16);
     confirms[key] = {
       Component: Component,
@@ -31,6 +32,7 @@ function createReactTreeMounter(mountNode) {
     };
     callbacks.mounted && callbacks.mounted(confirms);
     return key;
+    // _mountNode is ignored - ReactTreeMounter uses options.mountNode instead
   }
   function unmount(key) {
     delete confirms[key];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm",
-  "version": "0.3.1",
+  "version": "0.4.0-0",
   "description": "Small library which makes your Dialog component callable",
   "main": "lib/index.js",
   "repository": {
@@ -25,7 +25,9 @@
     "clean": "rimraf lib",
     "build": "babel src --out-dir lib",
     "prepublish": "npm run clean && npm run build",
-    "test": "jest"
+    "test": "jest",
+    "test:types": "jest __tests__/typescript/",
+    "typecheck": "tsc --noEmit"
   },
   "author": "",
   "license": "MIT",
@@ -35,19 +37,23 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.9",
+    "@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",
-    "babel-core": "^6.26.3",
+    "@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",
     "react-dom": ">=18.2.0",
     "regenerator-runtime": "^0.13.11",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.0"
   },
   "dependencies": {},
   "typings": "typescript/index.d.ts"

package/src/context.js

@@ -0,0 +1,37 @@
+import { createReactTreeMounter, createMountPoint } from './mounter/reactTree';
+import { createConfirmationCreater } from './createConfirmation';
+
+/**
+ * Creates a React context-aware confirmation system.
+ * This provides a simple interface for using confirmations within React component tree.
+ * 
+ * @param {HTMLElement} [mountNode] - Optional DOM node to mount dialogs in
+ * @returns {Object} Object containing createConfirmation function and ConfirmationRoot component
+ */
+export function createConfirmationContext(mountNode) {
+    const mounter = createReactTreeMounter(mountNode);
+    const createConfirmation = createConfirmationCreater(mounter);
+    const ConfirmationRoot = createMountPoint(mounter);
+
+    return {
+        /**
+         * Creates a confirmation function for a given component
+         * @param {React.ComponentType} component - The confirmable component
+         * @param {number} [unmountDelay=1000] - Delay before unmounting the component
+         * @returns {Function} Confirmation function that returns a Promise
+         */
+        createConfirmation: (component, unmountDelay) => createConfirmation(component, unmountDelay),
+        
+        /**
+         * 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
+    };
+}
+
+/**
+ * Context-aware confirmation system for convenient usage
+ * Use this if you don't need custom mount nodes
+ */
+export const ContextAwareConfirmation = createConfirmationContext();

package/src/index.js

@@ -2,5 +2,18 @@ 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';
 
-export { confirmable, createConfirmation, createConfirmationCreater, createDomTreeMounter, createReactTreeMounter, createMountPoint };
+export { 
+  confirmable, 
+  createConfirmation, 
+  createConfirmationCreater, 
+  createDomTreeMounter, 
+  createReactTreeMounter, 
+  createMountPoint,
+  createConfirmationContext,
+  ContextAwareConfirmation
+};

package/src/mounter/reactTree.js

@@ -5,11 +5,12 @@ export function createReactTreeMounter(mountNode) {
     const confirms = {};
     const callbacks = {};
 
-    function mount(Component, props){
+    function mount(Component, props, _mountNode){
         const key = Math.floor(Math.random() * (1 << 30)).toString(16);
         confirms[key] = { Component, props};
         callbacks.mounted && callbacks.mounted(confirms);
         return key;
+        // _mountNode is ignored - ReactTreeMounter uses options.mountNode instead
     }
     function unmount(key) {
         delete confirms[key];

package/typescript/context.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ConfirmDialog, ConfirmableDialog } from './index';
+
+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;
+}
+
+/**
+ * Creates a React context-aware confirmation system.
+ * This provides a simple interface for using confirmations within React component tree.
+ * 
+ * @param mountNode - Optional DOM node to mount dialogs in
+ * @returns Object containing createConfirmation function and ConfirmationRoot component
+ */
+export declare function createConfirmationContext(
+  mountNode?: Element | DocumentFragment | HTMLElement
+): ConfirmationContext;
+
+/**
+ * Context-aware confirmation system for convenient usage
+ * Use this if you don't need custom mount nodes
+ */
+export declare const ContextAwareConfirmation: ConfirmationContext;

package/typescript/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 type ConfirmableProps<P, R> = {
     dispose: () => void;
-    resolve: PromiseLike<R>;
+    resolve: (value: R | PromiseLike<R>) => void;
     reject: (reason?: any) => void;
 } & P;
 
@@ -32,18 +32,25 @@ export declare function createConfirmation<P, R>(
 ): (props: P) => Promise<R>;
 
 type Mounter = {
-  mount: (component: React.ComponentType, ) => string
+  mount: (component: React.ComponentType, props: any, mountNode?: HTMLElement) => string
   unmount: (key: string) => void
 }
 
 type TreeMounter = {
   options: {
-      setMountedCallback: (callback: any) => void
-      mountNode: Element | DocumentFragment
+      setMountedCallback: (callback: (components: any) => void) => void
+      mountNode?: Element | DocumentFragment | HTMLElement
   }
-} & Mounter;
+} & Mounter
 
-export declare function createReactTreeMounter(mountNode?: HTMLElement): TreeMounter;
-export declare function createMountPoint(moounter: TreeMounter): React.ComponentType;
-export declare function createDomTreeMounter(mountNode?: HTMLElement): Mounter;
+export declare function createReactTreeMounter(mountNode?: Element | DocumentFragment | HTMLElement): TreeMounter;
+export declare function createMountPoint(mounter: TreeMounter): React.ComponentType;
+export declare function createDomTreeMounter(defaultMountNode?: Element | DocumentFragment | HTMLElement): Mounter;
 export declare function createConfirmationCreater(mounter: Mounter): typeof createConfirmation;
+
+// Context-aware confirmation system
+export { 
+  createConfirmationContext, 
+  ContextAwareConfirmation,
+  ConfirmationContext
+} from './context';