fix(Modals - TypeScript): allow typing the container element (#3856)

Author: Lukas742

packages/main/src/components/Modals/Modals.test.tsx

@@ -1,15 +1,17 @@
 import { act, fireEvent, render, screen } from '@shared/tests';
 import React from 'react';
+import { DialogPropTypes, MessageBoxPropTypes, PopoverPropTypes, ResponsivePopoverPropTypes } from '../..';
 import { Modals } from './index';
 
 describe('Modals - static helpers', function () {
   test('showDialog', () => {
     render(null);
+    const props: DialogPropTypes & { 'data-testid': string } = {
+      children: 'Dialog Content',
+      'data-testid': 'dialog'
+    };
     act(() => {
-      Modals.showDialog({
-        children: 'Dialog Content',
-        'data-testid': 'dialog'
-      });
+      Modals.showDialog(props);
     });
 
     expect(screen.getByTestId('dialog')).toHaveAttribute('open', 'true');
@@ -18,12 +20,13 @@ describe('Modals - static helpers', function () {
 
   test('showPopover', () => {
     render(<span id="opener" />);
+    const props: PopoverPropTypes & { 'data-testid': string } = {
+      opener: 'opener',
+      children: 'Popover Content',
+      'data-testid': 'popover'
+    };
     act(() => {
-      Modals.showPopover({
-        opener: 'opener',
-        children: 'Popover Content',
-        'data-testid': 'popover'
-      });
+      Modals.showPopover(props);
     });
 
     expect(screen.getByTestId('popover')).toHaveAttribute('open', 'true');
@@ -32,12 +35,13 @@ describe('Modals - static helpers', function () {
 
   test('showResponsivePopover', () => {
     render(<span id="opener" />);
+    const props: ResponsivePopoverPropTypes & { 'data-testid': string } = {
+      opener: 'opener',
+      children: 'ResponsivePopover Content',
+      'data-testid': 'responsivepopover'
+    };
     act(() => {
-      Modals.showResponsivePopover({
-        opener: 'opener',
-        children: 'ResponsivePopover Content',
-        'data-testid': 'responsivepopover'
-      });
+      Modals.showResponsivePopover(props);
     });
 
     expect(screen.getByTestId('responsivepopover')).toHaveAttribute('open', 'true');
@@ -46,11 +50,12 @@ describe('Modals - static helpers', function () {
 
   test('showMessageBox', async () => {
     render(null);
+    const props: MessageBoxPropTypes & { 'data-testid': string } = {
+      children: 'MessageBox Content',
+      'data-testid': 'messagebox'
+    };
     act(() => {
-      Modals.showMessageBox({
-        children: 'MessageBox Content',
-        'data-testid': 'messagebox'
-      });
+      Modals.showMessageBox(props);
     });
 
     await screen.findByText('Confirmation');

packages/main/src/components/Modals/ModalsProvider.tsx

@@ -6,10 +6,11 @@ export interface ModalsProviderPropTypes {
   children: ReactNode;
 }
 
+//@ts-expect-error: can't assume state generics at this point
 const modalStateReducer = (state: ModalState[], action: UpdateModalStateAction) => {
   switch (action.type) {
     case 'set':
-      return [...state, action.payload as ModalState];
+      return [...state, action.payload];
     case 'reset':
       return state.filter((modal) => modal.id !== action.payload.id);
     default:
@@ -34,7 +35,7 @@ export function ModalsProvider({ children }: ModalsProviderPropTypes) {
       {modals.map((modal) => {
         if (modal?.Component) {
           return createPortal(
-            <modal.Component {...modal.props} key={modal.id} data-id={modal.id} />,
+            <modal.Component {...modal.props} ref={modal.ref} key={modal.id} data-id={modal.id} />,
             modal.container ?? document.body
           );
         }