popModal doesn't animate dialog & drawer (with my setup) about pushmodal HOT 4 CLOSED

Some issues I see in your code

• The library handles the open state what this mean is that you should not define and open state or onOpenChange. This is taken care of in ModalProvider.
• To open a modal you should use the internal functions createPushModal returns, so you dont need to define Trigger anywhere
• Your ModalExample should only use either DrawerContent or DialogContent (or better, use createResponsiveWrapper https://github.com/lindesvard/pushmodal?tab=readme-ov-file#responsive-rendering-mobiledesktop)

So I think you might have misunderstood how this library works. All your models you create should only have <(Dialog|Drawer)Content>, the rest is handled by the ModalProvider.

The ModalProvider will wrap your modal with the provided Wrapper component. By default this is the Dialog.

from pushmodal.

Thanks for the feedbacks and sorry for the delayed answer.
So is there no way to customize the css of the DialogHeader/Title/Description etc.? I want to be able to define how the responsive wrapper look like.
I also need to pass an autofocus prop to the DialogContent, how would I do that with your createResponsiveWrapper?

from pushmodal.

Also, I'm using shadow-panda (shadcn with pandacss) and pushmodal doesn't work with the createResponsiveWrapper (getting type errors):

Unable to assign type 'ForwardRefExoticComponent<Omit<{ ref?: Ref<never> | undefined; children?: ReactNode; open?: boolean | undefined; defaultOpen?: boolean | undefined; onOpenChange?: ((open: boolean) => void) | undefined; ... 4 more ...; htmlContent?: string | undefined; } & { ...; } & DialogVariantProps, "ref"> & RefAttributes<...>>' to type 'ComponentType<DialogProps>'.
Unable to assign type 'ForwardRefExoticComponent<Omit<{ ref?: Ref<never> | undefined; children?: ReactNode; open?: boolean | undefined; defaultOpen?: boolean | undefined; onOpenChange?: ((open: boolean) => void) | undefined; ... 4 more ...; htmlContent?: string | undefined; } & { ...; } & DialogVariantProps, "ref"> & RefAttributes<...>>' to type 'FunctionComponent<DialogProps>'.
The types of the 'props' and 'props' parameters are incompatible.
Unable to assign type 'DialogProps' to type 'Omit<{ ref?: Ref<never> | undefined; children?: ReactNode; open?: boolean | undefined; defaultOpen?: boolean | undefined; onOpenChange?: ((open: boolean) => void) | undefined; ... 4 more ...; htmlContent?: string | undefined; } & { ...; } & DialogVariantProps, "ref"> & RefAttributes<...>'.
Unable to assign type 'DialogProps' to type 'Omit<{ ref?: Ref<never> | undefined; children?: ReactNode; open?: boolean | undefined; defaultOpen?: boolean | undefined; onOpenChange?: ((open: boolean) => void) | undefined; ... 4 more ...; htmlContent?: string | undefined; } & { ...; } & DialogVariantProps, "ref">'.
Index signature for type “`&[data-part=${string}]`” is missing in type “DialogProps”.ts(2322)
index.d.ts(128, 9): The expected type comes from the 'Wrapper' property, which is declared here on the type '{ Wrapper: ComponentType<DialogProps>; Content: ComponentType<ContentProps>; }'

However I can use Dialog and DialogContent directly from shadow-panda instead:

MyModal: {
    Wrapper: Dialog,
    // Wrapper: Dynamic.Wrapper, -> type error : not working
    Component: MyModal,
},

my-modal.tsx

    // <Dynamic.Content> -> type error : not working
    <DialogContent>

With this setup, the animations now work correctly, but as I mentioned, I now:

• lost the possibility to style the DialogHeader/Title/Description etc.
• can't set autofocus or other props
• responsive modal isn't working with non tailwing shadcn components

from pushmodal.

What I ended up doing is to not use the Dynamic.Content. I removed:

<Dialog open={open} onOpenChange={setOpen}>
      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}

from my ModalResponsive and use it instead of the Dynamic.Content.
I also created an alternative createResponsiveWrapper which returns React.FunctionComponent as type.

from pushmodal.