Missing export for ModalHeader

[sdumjahn]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

The export of ModalHeader is missing in src/index.tsx.

Expected behavior

The component ModalHeader is exported like the other components from the Modal (e.g. ModalTitle, ModalFooter, ...)

To Reproduce

You get an error when importing the component:

import { Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from 'react-bootstrap';

...

Reproducible Example

import React from 'react';
import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from 'react-bootstrap';

export const TestComponent = () => {
   return (
       <Modal show>
          <ModalHeader closeButton>
             <ModalTitle>Title</ModalTitle>
          </ModalHeader>

          <ModalBody>The Body</ModalBody>

          <ModalFooter className="bg-light">
             <Button variant="outline-link">
                Close
             </Button>
          </ModalFooter>
       </Modal>
   );
};

Screenshots

No response

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

No response

What version of React-Bootstrap are you using?

2.1.2

What version of Bootstrap are you using?

5.1

Additional context

No response

[VibhorJaiswal]

It is exported like this in src/Modal.tsx

So, according to documentation you can use

<Modal.Header closeButton> <Modal.Title>Modal title</Modal.Title> </Modal.Header>
https://react-bootstrap.github.io/components/modal/

[sdumjahn]

@VibhorJaiswal: That is technically correct, but:

I need to mock the components from react-bootstrap to be able to use snapshot testing.

e.g.

// src/__mocks__/react-bootstrap.tsx
export const Modal = 'Modal';
export const ModalHeader = 'ModalHeader';
export const ModalTitle = 'ModalTitle';
export const ModalBody = 'ModalBody';
export const ModalFooter = 'ModalFooter';

// src/__tests__/TestComponent.tsx
import React from 'react';
import renderer from 'react-test-renderer';
import { TestComponent } from '../TestComponent';


it('should match snapshot', () => {
   expect(renderer.create(<TestComponent />).toJSON()).toMatchSnapshot();
});

When I use Modal.Header/Modal.Title/..., I am not able to mock them to get them work with snapshot testing.
If there are any other mocking solution to get them work with the namespace using, I am happy to hear them.

And furthermore it is inconsistent when the other components like 'ModalTitle/ModalFooter´/... are exported but ModalHeader not.

[kyletsang]

We should add this since others are exposed from the index. PRs are welcome

[VibhorJaiswal]

I would like to work on it.