fixup! feat(react-dialog): extend backdrop slot to support appearance prop

Author: mainframev

packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts

@@ -66,9 +66,6 @@ export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &
   Pick<PortalProps, 'mountNode'> & {
     open?: boolean;
     unmountOnClose?: boolean;
-    /**
-     * Whether the backdrop should be rendered as transparent.
-     */
     backdropTransparent: boolean;
 
     /**

packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts

@@ -41,11 +41,7 @@ export const useDialogSurface_unstable = (
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
   const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);
 
-  // Extract appearance from backdrop slot props
-  const backdropAppearance = isResolvedShorthand(props.backdrop)
-    ? (props.backdrop as DialogBackdropSlotProps).appearance
-    : undefined;
-
+  const backdropAppearance = isResolvedShorthand(props.backdrop) ? props.backdrop.appearance : undefined;
   const backdropTransparent = resolveBackdropTransparent(isNestedDialog, backdropAppearance);
 
   const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);
@@ -93,8 +89,7 @@ export const useDialogSurface_unstable = (
 
   if (backdrop) {
     backdrop.onClick = handledBackdropClick;
-    // Remove custom 'appearance' prop to prevent DOM attribute error
-    delete (backdrop as DialogBackdropSlotProps).appearance;
+    delete backdrop.appearance;
   }
 
   const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();