chore(modal-dialog-primitive): upgrade reach dialog

.changeset/giant-beers-draw.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/animation-library': patch
+'@twilio-paste/core': patch
+---
+
+Bumped the version of React-Spring to 9.1.2 in order to fix a TS issue.

.changeset/tender-icons-obey.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/modal-dialog-primitive': patch
+'@twilio-paste/core': patch
+---
+
+Bumped the version of Reach/Dialog to 0.15.0

packages/paste-core/components/modal/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useUID} from '@twilio-paste/uid-library';
 import {render} from 'react-dom';
-import {render as testRender, fireEvent, cleanup} from '@testing-library/react';
+import {render as testRender, fireEvent} from '@testing-library/react';
 import {Theme} from '@twilio-paste/theme';
 import {Button} from '@twilio-paste/button';
 import {Box} from '@twilio-paste/box';
@@ -102,41 +102,54 @@ describe('Modal', () => {
     const {getByTestId} = testRender(<MockModal />);
     expect(getByTestId('modal').getAttribute('role')).toEqual('dialog');
     expect(getByTestId('modal').getAttribute('aria-modal')).toEqual('true');
-    cleanup();
   });
 
   it('should be labelled by the correct heading', () => {
     const {getByTestId} = testRender(<MockModal />);
     expect(getByTestId('modal').getAttribute('aria-labelledby')).toEqual(
       getByTestId('modal-heading').getAttribute('id')
     );
-    cleanup();
   });
 
   it('should be be able to take arbitrary html attributes on the container', () => {
     const {getByTestId} = testRender(<MockModal />);
     expect(getByTestId('modal').getAttribute('aria-busy')).toEqual('true');
     expect(getByTestId('modal').getAttribute('id')).toEqual('a-new-id');
-    cleanup();
+  });
+
+  it('should render with focusable elements in the modal content', () => {
+    const {getByTestId} = testRender(
+      <MockModal>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <button type="button">Button</button>
+        <input type="text" defaultValue="test" aria-label="test" />
+      </MockModal>
+    );
+    expect(getByTestId('modal')).toBeDefined();
   });
 
   it('should focus on the first focusable element in the modal, the close button', () => {
     const {getByTestId} = testRender(<MockModal />);
     expect(document.activeElement).toEqual(getByTestId('modal-header').querySelector('button'));
-    cleanup();
   });
 
   it('should focus on the element provided as the initialFocus element in the modal', () => {
     const {getByTestId} = testRender(<MockInitalFocusModal />);
     expect(document.activeElement).toEqual(getByTestId('modal-body').querySelector('input'));
-    cleanup();
   });
 
   it('should call the onDismiss function when the close button is clicked', () => {
     const {getByTestId} = testRender(<MockModal />);
     fireEvent.click(getByTestId('modal-header').querySelector('button') as HTMLButtonElement);
     expect(handleCloseMock).toHaveBeenCalled();
-    cleanup();
   });
 
   it('Should have no accessibility violations', async () => {

packages/paste-core/components/modal/src/Modal.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import {styled, css} from '@twilio-paste/styling-library';
 import {useTransition, animated} from '@twilio-paste/animation-library';
+import {safelySpreadBoxProps} from '@twilio-paste/box';
 import {pasteBaseStyles} from '@twilio-paste/theme';
 import {ModalDialogPrimitiveOverlay, ModalDialogPrimitiveContent} from '@twilio-paste/modal-dialog-primitive';
 import {ModalContext} from './ModalContext';
@@ -130,8 +131,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
               >
                 <ModalDialogContent
                   aria-labelledby={ariaLabelledby}
-                  {...props}
-                  className={null}
+                  {...safelySpreadBoxProps(props)}
                   ref={ref}
                   style={styles}
                   size={size}

packages/paste-core/primitives/modal-dialog/package.json

@@ -25,7 +25,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@reach/dialog": "0.11.2"
+    "@reach/dialog": "0.15.0"
   },
   "peerDependencies": {
     "react": "^16.8.6",

packages/paste-libraries/animation/package.json

@@ -25,8 +25,8 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@react-spring/shared": "9.0.0-rc.3",
-    "@react-spring/web": "9.0.0-rc.3"
+    "@react-spring/shared": "9.1.2",
+    "@react-spring/web": "9.1.2"
   },
   "peerDependencies": {
     "react": "^16.8.6",