Add Document state modifier class names

packages/react-pdf/src/Document.spec.tsx

@@ -224,9 +224,11 @@ describe('Document', () => {
       const { container } = await render(<Document />);
 
       const noData = container.querySelector('.react-pdf__message');
+      const wrapper = container.querySelector('.react-pdf__Document');
 
       expect(noData).toBeInTheDocument();
       expect(noData).toHaveTextContent('No PDF file specified.');
+      expect(wrapper).toHaveClass('react-pdf__Document--no-data');
     });
 
     it('renders custom no data message when given nothing and noData prop is given', async () => {
@@ -251,11 +253,30 @@ describe('Document', () => {
       const { container } = await render(<Document file={pdfFile.file} />);
 
       const loading = container.querySelector('.react-pdf__message');
+      const wrapper = container.querySelector('.react-pdf__Document');
 
       expect(loading).toBeInTheDocument();
+      expect(wrapper).toHaveClass('react-pdf__Document--loading');
       await expect.element(page.getByText('Loading PDF…')).toBeInTheDocument();
     });
 
+    it('removes its state modifier class after loading a file', async () => {
+      const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+
+      const { container } = await render(
+        <Document file={pdfFile.file} onLoadSuccess={onLoadSuccess} />,
+      );
+
+      const wrapper = container.querySelector('.react-pdf__Document');
+
+      await onLoadSuccessPromise;
+      await waitForAsync();
+
+      expect(wrapper).not.toHaveClass('react-pdf__Document--no-data');
+      expect(wrapper).not.toHaveClass('react-pdf__Document--loading');
+      expect(wrapper).not.toHaveClass('react-pdf__Document--error');
+    });
+
     it('renders custom loading message when loading a file and loading prop is given', async () => {
       const { container } = await render(<Document file={pdfFile.file} loading="Loading" />);
 
@@ -284,15 +305,17 @@ describe('Document', () => {
 
       const { container } = await render(<Document file={failingPdf} onLoadError={onLoadError} />);
 
-      expect.assertions(2);
+      expect.assertions(3);
 
       await onLoadErrorPromise;
 
       await waitForAsync();
 
       const error = container.querySelector('.react-pdf__message');
+      const wrapper = container.querySelector('.react-pdf__Document');
 
       expect(error).toBeInTheDocument();
+      expect(wrapper).toHaveClass('react-pdf__Document--error');
       await expect.element(page.getByText('Failed to load PDF file.')).toBeInTheDocument();
 
       restoreConsole();

packages/react-pdf/src/Document.tsx

@@ -605,6 +605,14 @@ const Document: React.ForwardRefExoticComponent<
     [otherProps, pdf],
   );
 
+  const documentState = !file
+    ? 'no-data'
+    : pdf === undefined || pdf === null
+      ? 'loading'
+      : pdf === false
+        ? 'error'
+        : undefined;
+
   function renderChildren() {
     function isFulfilledContext(context: DocumentContextType): context is DocumentRenderProps {
       return Boolean(context?.pdf);
@@ -623,17 +631,17 @@ const Document: React.ForwardRefExoticComponent<
   }
 
   function renderContent() {
-    if (!file) {
+    if (documentState === 'no-data') {
       return <Message type="no-data">{typeof noData === 'function' ? noData() : noData}</Message>;
     }
 
-    if (pdf === undefined || pdf === null) {
+    if (documentState === 'loading') {
       return (
         <Message type="loading">{typeof loading === 'function' ? loading() : loading}</Message>
       );
     }
 
-    if (pdf === false) {
+    if (documentState === 'error') {
       return <Message type="error">{typeof error === 'function' ? error() : error}</Message>;
     }
 
@@ -642,7 +650,11 @@ const Document: React.ForwardRefExoticComponent<
 
   return (
     <div
-      className={clsx('react-pdf__Document', className)}
+      className={clsx(
+        'react-pdf__Document',
+        documentState && `react-pdf__Document--${documentState}`,
+        className,
+      )}
       // Assertion is needed for React 18 compatibility
       ref={inputRef as React.Ref<HTMLDivElement>}
       {...eventProps}