fix(design): fix the mask, maskClosable, and keyboard properties in IDialogProps (#6311)

packages/design/src/components/dialog/Dialog.tsx

@@ -60,6 +60,7 @@ export interface IDialogProps {
 
     /**
      * Whether the dialog should be destroyed on close.
+     * @deprecated
      * @default false
      */
     destroyOnClose?: boolean;
@@ -250,7 +251,6 @@ export function Dialog(props: IDialogProps) {
         width,
         draggable = false,
         defaultPosition,
-        destroyOnClose = false,
         footer: propFooter,
         mask = true,
         keyboard = true,
@@ -292,7 +292,7 @@ export function Dialog(props: IDialogProps) {
     }, [draggable, setElementRef]);
 
     const handleOpenChange = useCallback((isOpen: boolean) => {
-        if (!maskClosable && !isOpen) {
+        if (!mask && !isOpen) {
             return;
         }
 
@@ -337,6 +337,18 @@ export function Dialog(props: IDialogProps) {
                 }}
                 closable={closable}
                 onClickClose={handleClickClose}
+                onEscapeKeyDown={(e) => {
+                    if (keyboard) {
+                        handleClickClose();
+                    }
+                    e.preventDefault();
+                }}
+                onPointerDownOutside={(e) => {
+                    if (maskClosable) {
+                        handleClickClose();
+                    }
+                    e.preventDefault();
+                }}
             >
                 <DialogHeader
                     className={clsx({

packages/design/src/components/dialog/DialogPrimitive.tsx

@@ -37,9 +37,9 @@ const DialogOverlay = forwardRef<
         ref={ref}
         className={clsx(
             `
-              univer-bg-black/80 univer-fixed univer-inset-0 univer-z-[1080]
               data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0
               data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0
+              univer-fixed univer-inset-0 univer-z-[1080] univer-bg-[rgba(0,0,0,0.8)]
             `,
             className
         )}