Update API

Author: a16n-dev

packages/react-dialog-async/src/useDialog/types.ts

@@ -10,10 +10,9 @@ export type useDialogOptions<D, DE extends D | undefined> = {
   unmountDelayInMs?: number;
   /**
    * By default, the dialog will be hidden if the hook is unmounted. Set this to
-   * false if you want the dialog to remain open even when the hook is unmounted.
-   * @default true
+   * true if you want the dialog to persist even when the hook is unmounted.
    */
-  hideOnHookUnmount?: boolean;
+  persistOnUnmount?: boolean;
 };
 
 export type useDialogReturn<D, R, DE extends D | undefined> = {

packages/react-dialog-async/src/useDialog/useDialog.tsx

@@ -1,11 +1,4 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-} from 'react';
+import { useCallback, useContext, useEffect, useId, useRef } from 'react';
 import type { AsyncDialogComponent } from '../types.js';
 import type { useDialogOptions, useDialogReturn } from './types.js';
 import { DialogActionsContext } from '../context/DialogActionsContext.js';
@@ -18,15 +11,7 @@ export function useDialog<D, R, DE extends D | undefined>(
   options?: useDialogOptions<D, DE>,
 ): useDialogReturn<D, R, DE> {
   const idCount = useRef(0);
-  const internalId = useId();
-
-  const id = useMemo(() => {
-    if (options?.customKey !== undefined) {
-      return options.customKey;
-    }
-
-    return internalId;
-  }, [internalId, component, options?.customKey]);
+  const id = useId();
 
   const ctx = useContext(DialogActionsContext);
 
@@ -38,11 +23,11 @@ export function useDialog<D, R, DE extends D | undefined>(
 
   useEffect(() => {
     return () => {
-      if (options?.hideOnHookUnmount !== false) {
+      if (options?.persistOnUnmount !== true) {
         ctx.hide(id);
       }
     };
-  }, [id, options?.hideOnHookUnmount]);
+  }, [id, options?.persistOnUnmount]);
 
   const open = useCallback(
     async (data?: D): Promise<R | undefined> => {

packages/react-dialog-async/src/useDialogLazy/useDialogLazy.tsx

@@ -1,11 +1,4 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-} from 'react';
+import { useCallback, useContext, useEffect, useId, useRef } from 'react';
 import type { useDialogLazyReturn } from './types.js';
 import type { AsyncDialogComponent } from '../types.js';
 import type { useDialogOptions } from '../useDialog/types.js';
@@ -15,18 +8,10 @@ export function useDialogLazy<D, R, DE extends D | undefined>(
   componentLoader: () => Promise<AsyncDialogComponent<D, R>>,
   options?: useDialogOptions<D, DE>,
 ): useDialogLazyReturn<D, R, DE> {
-  const internalId = useId();
+  const id = useId();
   let idCount = useRef(0);
   const componentRef = useRef<AsyncDialogComponent<D, R> | null>(null);
 
-  const id = useMemo(() => {
-    if (options?.customKey !== undefined) {
-      return options.customKey;
-    }
-
-    return internalId;
-  }, [internalId, options?.customKey]);
-
   const ctx = useContext(DialogActionsContext);
 
   if (!ctx) {
@@ -48,11 +33,11 @@ export function useDialogLazy<D, R, DE extends D | undefined>(
 
   useEffect(() => {
     return () => {
-      if (options?.hideOnHookUnmount !== false) {
+      if (options?.persistOnUnmount !== true) {
         ctx.hide(id);
       }
     };
-  }, [id, options?.hideOnHookUnmount]);
+  }, [id, options?.persistOnUnmount]);
 
   const open = useCallback(
     async (data?: D): Promise<R | undefined> => {