Dialog content props in dialog.web.tsx primitive

[prs-wjy]

current implementation for dialog content for the web is using radix primitive

import * as Dialog from '@radix-ui/react-dialog';
...
const Content = React.forwardRef<ViewRef, SlottableViewProps & DialogContentProps>(
  (
    {
      asChild,
      forceMount,
      onOpenAutoFocus,
      onCloseAutoFocus,
      onEscapeKeyDown,
      onInteractOutside,
      onPointerDownOutside,
      ...props
    },
    ref
  ) => {
    const Component = asChild ? Slot.View : View;
    return (
      <Dialog.Content
        onOpenAutoFocus={onOpenAutoFocus}
        onCloseAutoFocus={onCloseAutoFocus}
        onEscapeKeyDown={onEscapeKeyDown}
        onInteractOutside={onInteractOutside}
        onPointerDownOutside={onPointerDownOutside}
        forceMount={forceMount}
      >
        <Component ref={ref} {...props} />
      </Dialog.Content>
    );
  }
);

The problem is we can't send any props to the Dialog.Content itself because all the props is sent directly to the child.

Example: when i pass className max-w-full max-h-full to the Dialog.Content from '@rn-primitives/dialog, it doesn't have any effect, the dialog content would not expand because we pass the className to the child instead of Dialog.Content itself.

The usage example in react-native-reusable is also broken:

<DialogContent className='sm:max-w-[425px]'>

The className='sm:max-w-[425px]' that added to the DialogContent doesn't have any effect at all because the className is added to the child insted to the DialogContent itself.