@cube-dev/ui-kit 0.188.0 → 0.190.0

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.188.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.0 | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { c } from "react-compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";
@@ -7,19 +7,56 @@ import invariant from "tiny-invariant";
 
 //#region src/components/overlays/AlertDialog/AlertDialogApiProvider.tsx
 const DialogApiContext = createContext(null);
+function isThenable(value) {
+	return !!value && typeof value.then === "function";
+}
+/** Runs an action handler, turning a throw into a rejected promise. */
+function runHandler(handler) {
+	if (!handler) return void 0;
+	try {
+		return handler();
+	} catch (error) {
+		return Promise.reject(error);
+	}
+}
+/**
+* Runs the button's `onPress` and the dialog's callback for the same action.
+* Returns a promise when either does, so the dialog waits for both.
+*/
+function runActionHandlers(handlers) {
+	const pending = handlers.map(runHandler).filter(isThenable);
+	return pending.length ? Promise.all(pending) : void 0;
+}
+/** A cancel rejection nobody listens to is not an error worth reporting. */
+function ignoreUnhandled(promise) {
+	promise.catch(() => {});
+	return promise;
+}
+/** Reports a failed action handler without throwing into the press. */
+function reportActionError(error) {
+	if (typeof globalThis.reportError === "function") globalThis.reportError(error);
+	else setTimeout(() => {
+		throw error;
+	});
+}
 /**
 * @internal Do not use it in your code!
 */
 function AlertDialogApiProvider(props) {
-	const $ = c(6);
+	const $ = c(7);
 	const [openedDialog, setOpenedDialog] = useState(null);
+	const [pendingAction, setPendingAction] = useState(null);
 	const id = useRef(0);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { open: (dialogProps, t1) => {
 			const params = t1 === void 0 ? {} : t1;
-			const { onDismiss, ...restProps } = dialogProps;
+			const { onDismiss, onConfirm, onSecondary, onCancel, ...restProps } = dialogProps;
 			const { cancelToken } = params;
+			if (cancelToken?.aborted) {
+				onCancel?.();
+				return ignoreUnhandled(Promise.reject(void 0));
+			}
 			const currentId = id.current = id.current + 1;
 			const currentDialog = {
 				props: null,
@@ -29,10 +66,19 @@ function AlertDialogApiProvider(props) {
 					isVisible: true
 				}
 			};
+			let pending = null;
+			const setPending = (status) => {
+				pending = status;
+				setPendingAction((current) => status ? {
+					id: currentId,
+					status
+				} : current?.id === currentId ? null : current);
+			};
+			const onAbort = () => currentDialog.meta.reject(void 0);
 			const close = () => {
-				if (currentDialog.meta.isClosed) return;
+				if (currentDialog.meta.isClosed) return false;
 				currentDialog.meta.isClosed = true;
-				params.cancelToken?.removeEventListener("abort", close);
+				cancelToken?.removeEventListener("abort", onAbort);
 				setOpenedDialog((currentState) => currentState?.meta.id !== currentId ? currentState : {
 					props: currentState.props,
 					meta: {
@@ -41,28 +87,55 @@ function AlertDialogApiProvider(props) {
 					}
 				});
 				setTimeout(() => setOpenedDialog((currentState_0) => currentState_0?.meta.id !== currentId ? currentState_0 : null), 300);
+				return true;
 			};
-			if (cancelToken?.aborted) return new Promise(_temp);
-			cancelToken?.addEventListener("abort", close, { once: true });
+			let resolvePromise;
+			let rejectPromise;
 			currentDialog.meta.promise = new Promise((resolve, reject) => {
-				currentDialog.meta.resolve = (status) => {
-					close();
-					resolve(status);
-				};
-				currentDialog.meta.reject = (reason) => {
-					close();
-					reject(reason);
-				};
+				resolvePromise = resolve;
+				rejectPromise = reject;
 			});
+			currentDialog.meta.resolve = (status_0) => {
+				if (close()) resolvePromise(status_0);
+			};
+			currentDialog.meta.reject = (reason) => {
+				if (!close()) return;
+				if (reason !== void 0) {
+					rejectPromise(reason);
+					return;
+				}
+				ignoreUnhandled(currentDialog.meta.promise);
+				rejectPromise(void 0);
+				onCancel?.();
+			};
+			currentDialog.meta.act = (status_1, onPress) => {
+				const result = runActionHandlers([onPress, status_1 === "confirm" ? onConfirm : onSecondary]);
+				if (!isThenable(result)) {
+					currentDialog.meta.resolve(status_1);
+					return;
+				}
+				setPending(status_1);
+				result.then(() => {
+					setPending(null);
+					if (currentDialog.meta.isClosed) return;
+					currentDialog.meta.resolve(status_1);
+					onDismiss?.(status_1);
+				}, (error) => {
+					setPending(null);
+					reportActionError(error);
+				});
+			};
+			cancelToken?.addEventListener("abort", onAbort, { once: true });
 			currentDialog.props = {
 				...restProps,
-				onDismiss: (e) => {
-					onDismiss?.(e);
+				onDismiss: (action) => {
+					if (pending) return;
+					onDismiss?.(action);
 					currentDialog.meta.reject(void 0);
 				}
 			};
 			setOpenedDialog((openedDialog_0) => {
-				if (openedDialog_0 !== null) {
+				if (openedDialog_0 !== null && !openedDialog_0.meta.isClosed) {
 					currentDialog.meta.reject(/* @__PURE__ */ new Error("Another dialog is already opened. It's a bad practice to open more than one <AlertDialog /> at the same time"));
 					return openedDialog_0;
 				}
@@ -74,78 +147,72 @@ function AlertDialogApiProvider(props) {
 	} else t0 = $[0];
 	const api = t0;
 	let t1;
-	if ($[1] !== openedDialog) {
-		t1 = /* @__PURE__ */ jsx(AlertDialogZone, { openedDialog });
+	if ($[1] !== openedDialog || $[2] !== pendingAction) {
+		t1 = /* @__PURE__ */ jsx(AlertDialogZone, {
+			openedDialog,
+			pendingAction
+		});
 		$[1] = openedDialog;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[2] = pendingAction;
+		$[3] = t1;
+	} else t1 = $[3];
 	let t2;
-	if ($[3] !== props.children || $[4] !== t1) {
+	if ($[4] !== props.children || $[5] !== t1) {
 		t2 = /* @__PURE__ */ jsxs(DialogApiContext.Provider, {
 			value: api,
 			children: [t1, props.children]
 		});
-		$[3] = props.children;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[4] = props.children;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
 	return t2;
 }
 /**
 * Hook gives the ability to open `<AlertDialog />` imperatively.
 *
-* ***Important*** it's commonly a bad practice when you open multiple dialogs in a row;
-* that means this api will reject all dialogs when there is already open one
+* Pass the action as `onConfirm`. If it returns a promise, the dialog waits
+* for it with the button loading, and stays open if it fails.
+*
+* The returned promise resolves with the action the user picked and rejects
+* with `undefined` on a cancel. A caller that runs everything in the callbacks
+* can ignore it: an ignored cancel is not reported as an unhandled rejection.
+*
+* ***Important*** only one alert dialog can be open at a time: `open` rejects
+* with an `Error` while another one is open. A dialog that is already closing
+* gives way.
 *
-* @example calling in a side effect
-* const alertDialogAPI = useAlertDialogAPI();
+* @example running the action from the dialog.
+* const { open } = useAlertDialogAPI();
 *
-* useEffect(() => {
-*   const abortDialog = new AbortController();
-*   const openedDialog = alertDialogAPI.open({
-*     title: 'Are you sure?',
-*     content: <Paragraph>Test content</Paragraph>
-*   }, {
-*      cancelToken: abortDialog.signal
+* const onPress = () => {
+*   open({
+*     title: 'Delete the item?',
+*     danger: true,
+*     actions: { confirm: { children: 'Delete' }, cancel: true },
+*     onConfirm: () => deleteItem(),
 *   });
+* };
 *
-*   openedDialog
-*     .then((status) => {
-*       // User confirmed or used secondary action
-*       if (status === 'confirm') {
-*         // Handle confirm
-*       } else if (status === 'secondary') {
-*         // Handle secondary action
-*       }
-*     })
-*     .catch(() => {
-*       // User cancelled or dismissed the dialog
-*       // Handle cancel/dismiss
-*     })
+* return <Button onPress={onPress}>Delete</Button>
 *
-*   return () => {
-*     abortDialog.abort();
-*   }
-* }, [])
+* @example closing the dialog from code with a cancel token.
+* const { open } = useAlertDialogAPI();
+* const controllerRef = useRef<AbortController | null>(null);
 *
-* @example opening dialog on Button click.
-* const alertDialogAPI = useAlertDialogAPI();
+* const onPress = () => {
+*   // A signal stays aborted, so every dialog needs a fresh controller.
+*   controllerRef.current = new AbortController();
 *
-* const onPress = useCallback(() => {
-*   alertDialogAPI.open({...})
-*     .then((status) => {
-*       if (status === 'confirm') {
-*         // Handle confirm
-*       }
-*     })
-*     .catch(() => {
-*       // Handle cancel/dismiss
-*     })
-* }, [])
+*   open(
+*     { title: 'Waiting for approval', actions: { confirm: { children: 'Hide' } } },
+*     { cancelToken: controllerRef.current.signal },
+*   );
+* };
 *
-* return <Button onPress={onPress}>New issue</Button>
+* // Later, e.g. when the approval arrives:
+* controllerRef.current?.abort();
 */
-function _temp() {}
 function useAlertDialogAPI() {
 	const api = useContext(DialogApiContext);
 	invariant(api !== null, "You can't use DialogApi outside of <Root /> component. Please, check if your component is descendant of <Root/> component");

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogApiProvider.js","names":["createContext","useContext","useMemo","useRef","useState","invariant","AlertDialogZone","AlertDialogResolveStatus","Dialog","DialogProps","DialogApiContext","DialogApi","open","dialogProps","params","DialogApiParams","Promise","cancelToken","AbortSignal","AlertDialogApiProvider","props","$","_c","openedDialog","setOpenedDialog","id","t0","Symbol","for","t1","undefined","onDismiss","restProps","currentId","current","currentDialog","meta","isClosed","isVisible","close","removeEventListener","currentState","setTimeout","currentState_0","aborted","_temp","addEventListener","once","promise","resolve","reject","status","reason","e","openedDialog_0","Error","api","t2","children","useAlertDialogAPI"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogApiProvider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useRef, useState } from 'react';\nimport invariant from 'tiny-invariant';\n\nimport { AlertDialogZone } from './AlertDialogZone';\nimport { AlertDialogResolveStatus, Dialog, DialogProps } from './types';\n\nconst DialogApiContext = createContext<DialogApi | null>(null);\n\ninterface DialogApi {\n  open: (\n    dialogProps: DialogProps,\n    params?: DialogApiParams,\n  ) => Promise<AlertDialogResolveStatus>;\n}\n\ninterface DialogApiParams {\n  cancelToken?: AbortSignal;\n}\n\n/**\n * @internal Do not use it in your code!\n */\nexport function AlertDialogApiProvider(props) {\n  const [openedDialog, setOpenedDialog] = useState<Dialog | null>(null);\n  const id = useRef(0);\n\n  const api = useMemo<DialogApi>(\n    () => ({\n      open: (dialogProps, params = {}) => {\n        const { onDismiss, ...restProps } = dialogProps;\n        const { cancelToken } = params;\n        const currentId = ++id.current;\n        const currentDialog = {\n          props: null,\n          meta: { id: currentId, isClosed: false, isVisible: true },\n        } as unknown as Dialog;\n\n        const close = () => {\n          if (currentDialog.meta.isClosed) return;\n\n          currentDialog.meta.isClosed = true;\n          params.cancelToken?.removeEventListener('abort', close);\n\n          setOpenedDialog((currentState) =>\n            currentState?.meta.id !== currentId\n              ? currentState\n              : {\n                  props: currentState.props,\n                  meta: { ...currentState.meta, isVisible: false },\n                },\n          );\n\n          setTimeout(\n            () =>\n              setOpenedDialog((currentState) =>\n                currentState?.meta.id !== currentId ? currentState : null,\n              ),\n            300,\n          );\n        };\n\n        if (cancelToken?.aborted)\n          return new Promise<AlertDialogResolveStatus>(() => {});\n        cancelToken?.addEventListener('abort', close, { once: true });\n\n        currentDialog.meta.promise = new Promise((resolve, reject) => {\n          currentDialog.meta.resolve = (status: AlertDialogResolveStatus) => {\n            close();\n            resolve(status);\n          };\n          currentDialog.meta.reject = (reason) => {\n            close();\n            reject(reason);\n          };\n        });\n\n        currentDialog.props = {\n          ...restProps,\n          onDismiss: (e) => {\n            onDismiss?.(e);\n            currentDialog.meta.reject(undefined);\n          },\n        };\n\n        setOpenedDialog((openedDialog) => {\n          // we already have opened dialog, so we reject opening another\n          if (openedDialog !== null) {\n            currentDialog.meta.reject(\n              new Error(\n                \"Another dialog is already opened. It's a bad practice to open more than one <AlertDialog /> at the same time\",\n              ),\n            );\n\n            return openedDialog;\n          }\n\n          return currentDialog;\n        });\n\n        return currentDialog.meta.promise;\n      },\n    }),\n    [],\n  );\n\n  return (\n    <DialogApiContext.Provider value={api}>\n      <AlertDialogZone openedDialog={openedDialog} />\n      {props.children}\n    </DialogApiContext.Provider>\n  );\n}\n\n/**\n * Hook gives the ability to open `<AlertDialog />` imperatively.\n *\n * ***Important*** it's commonly a bad practice when you open multiple dialogs in a row;\n * that means this api will reject all dialogs when there is already open one\n *\n * @example calling in a side effect\n * const alertDialogAPI = useAlertDialogAPI();\n *\n * useEffect(() => {\n *   const abortDialog = new AbortController();\n *   const openedDialog = alertDialogAPI.open({\n *     title: 'Are you sure?',\n *     content: <Paragraph>Test content</Paragraph>\n *   }, {\n *      cancelToken: abortDialog.signal\n *   });\n *\n *   openedDialog\n *     .then((status) => {\n *       // User confirmed or used secondary action\n *       if (status === 'confirm') {\n *         // Handle confirm\n *       } else if (status === 'secondary') {\n *         // Handle secondary action\n *       }\n *     })\n *     .catch(() => {\n *       // User cancelled or dismissed the dialog\n *       // Handle cancel/dismiss\n *     })\n *\n *   return () => {\n *     abortDialog.abort();\n *   }\n * }, [])\n *\n * @example opening dialog on Button click.\n * const alertDialogAPI = useAlertDialogAPI();\n *\n * const onPress = useCallback(() => {\n *   alertDialogAPI.open({...})\n *     .then((status) => {\n *       if (status === 'confirm') {\n *         // Handle confirm\n *       }\n *     })\n *     .catch(() => {\n *       // Handle cancel/dismiss\n *     })\n * }, [])\n *\n * return <Button onPress={onPress}>New issue</Button>\n */\nexport function useAlertDialogAPI(): DialogApi {\n  const api = useContext(DialogApiContext);\n\n  invariant(\n    api !== null,\n    \"You can't use DialogApi outside of <Root /> component. Please, check if your component is descendant of <Root/> component\",\n  );\n\n  return api;\n}\n"],"mappings":";;;;;;;;AAMA,MAAMU,mBAAmBV,cAAgC,KAAK;;;;AAgB9D,SAAOmB,uBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,CAAAC,cAAAC,mBAAwCpB,SAAwB,KAAK;CACrE,MAAAqB,KAAWtB,OAAO,EAAE;CAAC,IAAAuB;AAAA,KAAAL,EAAA,OAAAM,OAAAC,IAAA,4BAAA,EAAA;AAGZF,OAAA,EAAAd,OACCC,aAAAgB,OAAA;GAAc,MAAAf,SAAAe,OAAAC,SAAA,EAAW,GAAXD;GAClB,MAAA,EAAAE,WAAA,GAAAC,cAAoCnB;GACpC,MAAA,EAAAI,gBAAwBH;GACxB,MAAAmB,YAAoBR,GAAES,UAAFT,GAAES,UAAQ;GAC9B,MAAAC,gBAAsB;IAAAf,OACb;IAAIgB,MACL;KAAAX,IAAMQ;KAASI,UAAY;KAAKC,WAAa;KAAK;IACzD;GAED,MAAAC,cAAc;AACZ,QAAIJ,cAAaC,KAAKC,SAAS;AAE/BF,kBAAaC,KAAKC,WAAY;AAC9BvB,WAAMG,aAAiCuB,oBAAC,SAASD,MAAM;AAEvDf,qBAAgBiB,iBACdA,cAAYL,KAASX,OAAKQ,YAA1BQ,eAAA;KAAArB,OAGaqB,aAAYrB;KAAMgB,MACnB;MAAA,GAAKK,aAAYL;MAAKE,WAAa;MAAM;KAEvD,CAAC;AAEDI,qBAEIlB,iBAAgBmB,mBACdF,gBAAYL,KAASX,OAAKQ,YAA1BU,iBAAA,KACD,EACH,IACD;;AAGH,OAAI1B,aAAW2B,QAAS,QACf,IAAI5B,QAAkC6B,MAAS;AACxD5B,gBAAW6B,iBAAmB,SAASP,OAAO,EAAAQ,MAAQ,MAAM,CAAC;AAE7DZ,iBAAaC,KAAKY,UAAW,IAAIhC,SAAQiC,SAAAC,WAAA;AACvCf,kBAAaC,KAAKa,WAAWE,WAAA;AAC3BZ,YAAO;AACPU,aAAQE,OAAO;;AAEjBhB,kBAAaC,KAAKc,UAAUE,WAAA;AAC1Bb,YAAO;AACPW,YAAOE,OAAO;;KAPQ;AAW1BjB,iBAAaf,QAAS;IAAA,GACjBY;IAASD,YACDsB,MAAA;AACTtB,iBAAYsB,EAAE;AACdlB,mBAAaC,KAAKc,OAAQpB,OAAU;;IAJrB;AAQnBN,oBAAgB8B,mBAAA;AAEd,QAAI/B,mBAAiB,MAAI;AACvBY,mBAAaC,KAAKc,uBAChB,IAAIK,MACF,+GAEJ,CAAC;AAAA,YAEMhC;;AACR,WAEMY;KACP;AAAA,UAEKA,cAAaC,KAAKY;KAE5B;AAAA3B,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CA3EH,MAAAmC,MACS9B;CA4EP,IAAAG;AAAA,KAAAR,EAAA,OAAAE,cAAA;AAIEM,OAAA,oBAAC,mBAA8BN,eAAgB;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAoC;AAAA,KAAApC,EAAA,OAAAD,MAAAsC,YAAArC,EAAA,OAAAQ,IAAA;AADjD4B,OAAA,qBAAA,iBAAA;GAAkCD,OAAAA;cAChC3B,IACCT,MAAKsC;IACoB;AAAArC,IAAA,KAAAD,MAAAsC;AAAArC,IAAA,KAAAQ;AAAAR,IAAA,KAAAoC;OAAAA,MAAApC,EAAA;AAAA,QAH5BoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApFG,SAAAZ,QAAA;AAiJP,SAAOc,oBAAA;CACL,MAAAH,MAAYvD,WAAWS,iBAAiB;AAExCL,WACEmD,QAAQ,MACR,4HACD;AAAA,QAEMA"}
+{"version":3,"file":"AlertDialogApiProvider.js","names":["createContext","useContext","useMemo","useRef","useState","invariant","AlertDialogZone","AlertDialogResolveStatus","Dialog","DialogProps","DialogApiContext","AlertDialogApi","open","dialogProps","params","AlertDialogApiParams","Promise","cancelToken","AbortSignal","isThenable","value","PromiseLike","then","runHandler","handler","undefined","error","reject","runActionHandlers","handlers","pending","map","filter","length","all","ignoreUnhandled","promise","T","catch","reportActionError","globalThis","reportError","setTimeout","PendingAction","id","status","AlertDialogApiProvider","props","$","_c","openedDialog","setOpenedDialog","pendingAction","setPendingAction","t0","Symbol","for","t1","onDismiss","onConfirm","onSecondary","onCancel","restProps","aborted","currentId","current","currentDialog","meta","isClosed","isVisible","setPending","onAbort","close","removeEventListener","currentState","currentState_0","resolvePromise","rejectPromise","resolve","status_0","reason","act","status_1","onPress","result","addEventListener","once","action","openedDialog_0","Error","api","t2","children","useAlertDialogAPI"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogApiProvider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useRef, useState } from 'react';\nimport invariant from 'tiny-invariant';\n\nimport { AlertDialogZone } from './AlertDialogZone';\nimport { AlertDialogResolveStatus, Dialog, DialogProps } from './types';\n\nconst DialogApiContext = createContext<AlertDialogApi | null>(null);\n\nexport interface AlertDialogApi {\n  /**\n   * Opens the dialog. Resolves with the action the user picked. Rejects with\n   * `undefined` when the dialog closes without one (Cancel, dismissal or an\n   * aborted `cancelToken`), and with an `Error` when it cannot open. A cancel\n   * is not reported as an unhandled rejection when the promise is ignored.\n   */\n  open: (\n    dialogProps: DialogProps,\n    params?: AlertDialogApiParams,\n  ) => Promise<AlertDialogResolveStatus>;\n}\n\nexport interface AlertDialogApiParams {\n  /** Closes the dialog when aborted, which settles it as a cancel. */\n  cancelToken?: AbortSignal;\n}\n\nfunction isThenable(value: unknown): value is PromiseLike<unknown> {\n  return !!value && typeof (value as PromiseLike<unknown>).then === 'function';\n}\n\n/** Runs an action handler, turning a throw into a rejected promise. */\nfunction runHandler(handler: (() => unknown) | undefined): unknown {\n  if (!handler) return undefined;\n\n  try {\n    return handler();\n  } catch (error) {\n    return Promise.reject(error);\n  }\n}\n\n/**\n * Runs the button's `onPress` and the dialog's callback for the same action.\n * Returns a promise when either does, so the dialog waits for both.\n */\nfunction runActionHandlers(handlers: ((() => unknown) | undefined)[]) {\n  const pending = handlers.map(runHandler).filter(isThenable);\n\n  return pending.length ? Promise.all(pending) : undefined;\n}\n\n/** A cancel rejection nobody listens to is not an error worth reporting. */\nfunction ignoreUnhandled<T>(promise: Promise<T>) {\n  promise.catch(() => {});\n\n  return promise;\n}\n\n/** Reports a failed action handler without throwing into the press. */\nfunction reportActionError(error: unknown) {\n  if (typeof globalThis.reportError === 'function') {\n    globalThis.reportError(error);\n  } else {\n    setTimeout(() => {\n      throw error;\n    });\n  }\n}\n\n/**\n * The dialog whose action handler is still running, and which action.\n * @internal\n */\nexport interface PendingAction {\n  id: number;\n  status: AlertDialogResolveStatus;\n}\n\n/**\n * @internal Do not use it in your code!\n */\nexport function AlertDialogApiProvider(props) {\n  const [openedDialog, setOpenedDialog] = useState<Dialog | null>(null);\n  const [pendingAction, setPendingAction] = useState<PendingAction | null>(\n    null,\n  );\n  const id = useRef(0);\n\n  // A context value: callers put `open` in effect dependencies, so its\n  // identity has to stay the same.\n  const api = useMemo<AlertDialogApi>(\n    () => ({\n      open: (dialogProps, params = {}) => {\n        const { onDismiss, onConfirm, onSecondary, onCancel, ...restProps } =\n          dialogProps;\n        const { cancelToken } = params;\n\n        // An aborted signal is a cancel: it settles before anything opens.\n        if (cancelToken?.aborted) {\n          onCancel?.();\n\n          return ignoreUnhandled(Promise.reject(undefined));\n        }\n\n        const currentId = ++id.current;\n        const currentDialog = {\n          props: null,\n          meta: { id: currentId, isClosed: false, isVisible: true },\n        } as unknown as Dialog;\n        // Set while an action handler's promise runs: the dialog stays open.\n        let pending: AlertDialogResolveStatus | null = null;\n\n        const setPending = (status: AlertDialogResolveStatus | null) => {\n          pending = status;\n          setPendingAction((current) =>\n            status\n              ? { id: currentId, status }\n              : current?.id === currentId\n                ? null\n                : current,\n          );\n        };\n\n        // Aborting is a cancel, so it settles the promise the way Cancel does.\n        const onAbort = () => currentDialog.meta.reject(undefined);\n\n        const close = () => {\n          if (currentDialog.meta.isClosed) return false;\n\n          currentDialog.meta.isClosed = true;\n          cancelToken?.removeEventListener('abort', onAbort);\n\n          setOpenedDialog((currentState) =>\n            currentState?.meta.id !== currentId\n              ? currentState\n              : {\n                  props: currentState.props,\n                  meta: { ...currentState.meta, isVisible: false },\n                },\n          );\n\n          setTimeout(\n            () =>\n              setOpenedDialog((currentState) =>\n                currentState?.meta.id !== currentId ? currentState : null,\n              ),\n            300,\n          );\n\n          return true;\n        };\n\n        let resolvePromise!: (status: AlertDialogResolveStatus) => void;\n        let rejectPromise!: (reason: unknown) => void;\n\n        currentDialog.meta.promise = new Promise((resolve, reject) => {\n          resolvePromise = resolve;\n          rejectPromise = reject;\n        });\n\n        currentDialog.meta.resolve = (status) => {\n          if (close()) resolvePromise(status);\n        };\n\n        // A rejection without a reason is a cancel: the Cancel button, a\n        // dismissal, an aborted `cancelToken` or `content` calling `reject()`.\n        // Anything else is a failure.\n        currentDialog.meta.reject = (reason) => {\n          if (!close()) return;\n\n          if (reason !== undefined) {\n            rejectPromise(reason);\n\n            return;\n          }\n\n          ignoreUnhandled(currentDialog.meta.promise);\n          rejectPromise(undefined);\n          onCancel?.();\n        };\n\n        // The confirm and secondary buttons: run the handlers, and settle\n        // once they have finished. A handler that throws or rejects keeps the\n        // dialog open for another try.\n        currentDialog.meta.act = (status, onPress) => {\n          const result = runActionHandlers([\n            onPress,\n            status === 'confirm' ? onConfirm : onSecondary,\n          ]);\n\n          if (!isThenable(result)) {\n            currentDialog.meta.resolve(status);\n\n            return;\n          }\n\n          setPending(status);\n\n          result.then(\n            () => {\n              setPending(null);\n\n              if (currentDialog.meta.isClosed) return;\n\n              currentDialog.meta.resolve(status);\n              // The press's own dismissal was held back while it ran.\n              onDismiss?.(status);\n            },\n            (error) => {\n              setPending(null);\n              reportActionError(error);\n            },\n          );\n        };\n\n        cancelToken?.addEventListener('abort', onAbort, { once: true });\n\n        currentDialog.props = {\n          ...restProps,\n          // Called with the action's name by the action buttons, and without\n          // one by Escape and a click outside.\n          onDismiss: (action) => {\n            if (pending) return;\n\n            onDismiss?.(action);\n            currentDialog.meta.reject(undefined);\n          },\n        };\n\n        setOpenedDialog((openedDialog) => {\n          // Another dialog is open, so this one can't be. One that is only\n          // animating out gives way: its cleanup checks the id, so it leaves\n          // the new dialog alone.\n          if (openedDialog !== null && !openedDialog.meta.isClosed) {\n            currentDialog.meta.reject(\n              new Error(\n                \"Another dialog is already opened. It's a bad practice to open more than one <AlertDialog /> at the same time\",\n              ),\n            );\n\n            return openedDialog;\n          }\n\n          return currentDialog;\n        });\n\n        return currentDialog.meta.promise;\n      },\n    }),\n    [],\n  );\n\n  return (\n    <DialogApiContext.Provider value={api}>\n      <AlertDialogZone\n        openedDialog={openedDialog}\n        pendingAction={pendingAction}\n      />\n      {props.children}\n    </DialogApiContext.Provider>\n  );\n}\n\n/**\n * Hook gives the ability to open `<AlertDialog />` imperatively.\n *\n * Pass the action as `onConfirm`. If it returns a promise, the dialog waits\n * for it with the button loading, and stays open if it fails.\n *\n * The returned promise resolves with the action the user picked and rejects\n * with `undefined` on a cancel. A caller that runs everything in the callbacks\n * can ignore it: an ignored cancel is not reported as an unhandled rejection.\n *\n * ***Important*** only one alert dialog can be open at a time: `open` rejects\n * with an `Error` while another one is open. A dialog that is already closing\n * gives way.\n *\n * @example running the action from the dialog.\n * const { open } = useAlertDialogAPI();\n *\n * const onPress = () => {\n *   open({\n *     title: 'Delete the item?',\n *     danger: true,\n *     actions: { confirm: { children: 'Delete' }, cancel: true },\n *     onConfirm: () => deleteItem(),\n *   });\n * };\n *\n * return <Button onPress={onPress}>Delete</Button>\n *\n * @example closing the dialog from code with a cancel token.\n * const { open } = useAlertDialogAPI();\n * const controllerRef = useRef<AbortController | null>(null);\n *\n * const onPress = () => {\n *   // A signal stays aborted, so every dialog needs a fresh controller.\n *   controllerRef.current = new AbortController();\n *\n *   open(\n *     { title: 'Waiting for approval', actions: { confirm: { children: 'Hide' } } },\n *     { cancelToken: controllerRef.current.signal },\n *   );\n * };\n *\n * // Later, e.g. when the approval arrives:\n * controllerRef.current?.abort();\n */\nexport function useAlertDialogAPI(): AlertDialogApi {\n  const api = useContext(DialogApiContext);\n\n  invariant(\n    api !== null,\n    \"You can't use DialogApi outside of <Root /> component. Please, check if your component is descendant of <Root/> component\",\n  );\n\n  return api;\n}\n"],"mappings":"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"}

package/dist/components/overlays/AlertDialog/AlertDialogZone.d.ts

@@ -1,3 +1,4 @@
 
 import "./types.js";
+import "./AlertDialogApiProvider.js";
 import "react/jsx-runtime";

package/dist/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.188.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.0 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { _AlertDialog } from "./AlertDialog.js";
@@ -11,8 +11,8 @@ const PORTAL_KEY = "AlertDialogZone";
 * @internal Do not use it
 */
 function AlertDialogZone(props) {
-	const $ = c(40);
-	const { openedDialog } = props;
+	const $ = c(45);
+	const { openedDialog, pendingAction } = props;
 	if (openedDialog === null) {
 		let t0;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -45,124 +45,138 @@ function AlertDialogZone(props) {
 		type = $[7];
 	}
 	const isDismissable = t0 === void 0 ? true : t0;
-	const { resolve, reject, isVisible, dialogType } = openedDialog.meta;
+	const { id, resolve, reject, act, isVisible, dialogType } = openedDialog.meta;
+	const pending = pendingAction?.id === id ? pendingAction.status : null;
 	let t1;
-	bb0: {
-		let t2;
-		if ($[8] !== resolve) {
-			t2 = (action, status) => {
-				if (typeof action === "undefined") return;
-				if (typeof action === "boolean") return action ? { onPress: () => resolve(status) } : false;
-				const onPress = action.onPress;
-				return {
-					...action,
-					onPress: (e) => {
-						onPress?.(e);
-						resolve(status);
-					}
-				};
+	if ($[8] !== pending) {
+		t1 = (status) => pending ? {
+			isLoading: pending === status,
+			isDisabled: true
+		} : null;
+		$[8] = pending;
+		$[9] = t1;
+	} else t1 = $[9];
+	const lock = t1;
+	let t2;
+	if ($[10] !== act || $[11] !== lock) {
+		t2 = (action, status_0) => {
+			if (typeof action === "undefined") return;
+			if (typeof action === "boolean") return action ? {
+				...lock(status_0),
+				onPress: () => act(status_0)
+			} : false;
+			const { onPress } = action;
+			return {
+				...action,
+				...lock(status_0),
+				onPress: (e) => act(status_0, onPress && (() => onPress(e)))
 			};
-			$[8] = resolve;
-			$[9] = t2;
-		} else t2 = $[9];
-		const mergeActionProps = t2;
-		if (typeof actions === "undefined") {
-			let t3;
-			if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-				t3 = {};
-				$[10] = t3;
-			} else t3 = $[10];
-			t1 = t3;
-			break bb0;
-		}
-		let t3;
-		if ($[11] !== actions.confirm || $[12] !== mergeActionProps) {
-			t3 = mergeActionProps(actions.confirm, "confirm");
-			$[11] = actions.confirm;
-			$[12] = mergeActionProps;
-			$[13] = t3;
-		} else t3 = $[13];
-		let t4;
-		if ($[14] !== actions.secondary || $[15] !== mergeActionProps) {
-			t4 = mergeActionProps(actions.secondary, "secondary");
-			$[14] = actions.secondary;
-			$[15] = mergeActionProps;
-			$[16] = t4;
-		} else t4 = $[16];
-		let t5;
-		if ($[17] !== actions.cancel || $[18] !== reject) {
-			t5 = typeof actions.cancel === "undefined" ? void 0 : typeof actions.cancel === "boolean" ? actions.cancel ? { onPress: () => reject(void 0) } : false : {
-				...actions.cancel,
-				onPress: (e_0) => {
-					actions.cancel.onPress?.(e_0);
-					reject(void 0);
-				}
-			};
-			$[17] = actions.cancel;
-			$[18] = reject;
-			$[19] = t5;
-		} else t5 = $[19];
-		let t6;
-		if ($[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
-			t6 = {
-				confirm: t3,
-				secondary: t4,
-				cancel: t5
-			};
-			$[20] = t3;
-			$[21] = t4;
-			$[22] = t5;
-			$[23] = t6;
-		} else t6 = $[23];
-		t1 = t6;
-	}
-	const _actions = t1;
-	const t2 = dialogType === "form";
-	const t3 = !isVisible;
-	let t4;
-	if ($[24] !== content || $[25] !== reject || $[26] !== resolve) {
-		t4 = typeof content === "function" ? content({
+		};
+		$[10] = act;
+		$[11] = lock;
+		$[12] = t2;
+	} else t2 = $[12];
+	const mergeActionProps = t2;
+	let t3;
+	if ($[13] !== actions) {
+		t3 = actions ?? {};
+		$[13] = actions;
+		$[14] = t3;
+	} else t3 = $[14];
+	const { confirm: t4, secondary, cancel } = t3;
+	const confirm = t4 === void 0 ? true : t4;
+	let t5;
+	if ($[15] !== confirm || $[16] !== mergeActionProps) {
+		t5 = mergeActionProps(confirm, "confirm");
+		$[15] = confirm;
+		$[16] = mergeActionProps;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== mergeActionProps || $[19] !== secondary) {
+		t6 = mergeActionProps(secondary, "secondary");
+		$[18] = mergeActionProps;
+		$[19] = secondary;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== cancel || $[22] !== lock || $[23] !== reject) {
+		t7 = typeof cancel === "undefined" ? void 0 : typeof cancel === "boolean" ? cancel ? {
+			...lock(),
+			onPress: () => reject(void 0)
+		} : false : {
+			...cancel,
+			...lock(),
+			onPress: (e_0) => {
+				cancel.onPress?.(e_0);
+				reject(void 0);
+			}
+		};
+		$[21] = cancel;
+		$[22] = lock;
+		$[23] = reject;
+		$[24] = t7;
+	} else t7 = $[24];
+	let t8;
+	if ($[25] !== t5 || $[26] !== t6 || $[27] !== t7) {
+		t8 = {
+			confirm: t5,
+			secondary: t6,
+			cancel: t7
+		};
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = t7;
+		$[28] = t8;
+	} else t8 = $[28];
+	const _actions = t8;
+	const t9 = isDismissable && !pending;
+	const t10 = dialogType === "form";
+	const t11 = !isVisible;
+	let t12;
+	if ($[29] !== content || $[30] !== reject || $[31] !== resolve) {
+		t12 = typeof content === "function" ? content({
 			resolve,
 			reject
 		}) : content;
-		$[24] = content;
-		$[25] = reject;
-		$[26] = resolve;
-		$[27] = t4;
-	} else t4 = $[27];
-	let t5;
-	if ($[28] !== _actions || $[29] !== options || $[30] !== t2 || $[31] !== t3 || $[32] !== t4) {
-		t5 = /* @__PURE__ */ jsx(_AlertDialog, {
-			noActions: t2,
+		$[29] = content;
+		$[30] = reject;
+		$[31] = resolve;
+		$[32] = t12;
+	} else t12 = $[32];
+	let t13;
+	if ($[33] !== _actions || $[34] !== options || $[35] !== t10 || $[36] !== t11 || $[37] !== t12) {
+		t13 = /* @__PURE__ */ jsx(_AlertDialog, {
+			noActions: t10,
 			actions: _actions,
-			isHidden: t3,
-			content: t4,
+			isHidden: t11,
+			content: t12,
 			...options
 		});
-		$[28] = _actions;
-		$[29] = options;
-		$[30] = t2;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t5;
-	} else t5 = $[33];
-	let t6;
-	if ($[34] !== isDismissable || $[35] !== isVisible || $[36] !== onDismiss || $[37] !== t5 || $[38] !== type) {
-		t6 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogContainer, {
+		$[33] = _actions;
+		$[34] = options;
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t13;
+	} else t13 = $[38];
+	let t14;
+	if ($[39] !== isVisible || $[40] !== onDismiss || $[41] !== t13 || $[42] !== t9 || $[43] !== type) {
+		t14 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogContainer, {
 			isOpen: isVisible,
-			isDismissable,
+			isDismissable: t9,
 			type,
 			onDismiss,
-			children: t5
+			children: t13
 		}) }, PORTAL_KEY);
-		$[34] = isDismissable;
-		$[35] = isVisible;
-		$[36] = onDismiss;
-		$[37] = t5;
-		$[38] = type;
-		$[39] = t6;
-	} else t6 = $[39];
-	return t6;
+		$[39] = isVisible;
+		$[40] = onDismiss;
+		$[41] = t13;
+		$[42] = t9;
+		$[43] = type;
+		$[44] = t14;
+	} else t14 = $[44];
+	return t14;
 }
 
 //#endregion