From 04a33f0e920eada11dc0e39844ba533fa87616a4 Mon Sep 17 00:00:00 2001
From: Chris Santamaria <chris@santamaria.me>
Date: Sat, 7 Oct 2023 21:37:12 -0400
Subject: [PATCH] Bump react-aspect-ratio to support passing refs (#120)

---
 package.json                            | 2 +-
 src/stories/common/Iframe.tsx           | 2 +-
 src/stories/common/IframeFunctional.tsx | 4 +---
 src/stories/common/Image.tsx            | 2 +-
 src/stories/common/ImageFunctional.tsx  | 4 +---
 yarn.lock                               | 8 ++++----
 6 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 91d751e..ee5acb4 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "jest-junit": "^15.0.0",
     "react": "^18.0.0",
-    "react-aspect-ratio": "^1.0.3",
+    "react-aspect-ratio": "^1.1.6",
     "react-dom": "^18.0.0",
     "react-test-renderer": "^18.0.0",
     "storybook": "^7.0.0",
diff --git a/src/stories/common/Iframe.tsx b/src/stories/common/Iframe.tsx
index b0598b1..35faac5 100644
--- a/src/stories/common/Iframe.tsx
+++ b/src/stories/common/Iframe.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { handleViewport } from '../../index';
 import type { InjectedViewportProps } from '../../lib/types';
diff --git a/src/stories/common/IframeFunctional.tsx b/src/stories/common/IframeFunctional.tsx
index 635d4d5..5143dc0 100644
--- a/src/stories/common/IframeFunctional.tsx
+++ b/src/stories/common/IframeFunctional.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { handleViewport } from '../../index';
 import type { InjectedViewportProps } from '../../lib/types';
@@ -33,8 +33,6 @@ function IframeFunctional(props: IframeFunctionalProps) {
     <AspectRatio
       ratio={ratio}
       style={{ marginBottom: '200px', backgroundColor: 'rgba(0,0,0,.12)' }}
-      // @ts-expect-error
-      // TODO: fix upstream types in react-aspect-ratio to support ref
       ref={forwardedRef}
     >
       <Component {...componentProps} />
diff --git a/src/stories/common/Image.tsx b/src/stories/common/Image.tsx
index 4e98f2d..e3437a4 100644
--- a/src/stories/common/Image.tsx
+++ b/src/stories/common/Image.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { INIT, LOADING, LOADED } from './constants';
 import { handleViewport } from '../../index';
diff --git a/src/stories/common/ImageFunctional.tsx b/src/stories/common/ImageFunctional.tsx
index c159657..69a8e14 100644
--- a/src/stories/common/ImageFunctional.tsx
+++ b/src/stories/common/ImageFunctional.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { handleViewport } from '../../index';
 import { INIT, LOADING, LOADED } from './constants';
@@ -57,8 +57,6 @@ function ImageObject(props: ImageObjectProps) {
         marginBottom: '200px',
         backgroundColor: getBackgroundColor(),
       }}
-      // @ts-expect-error
-      // TODO: fix upstream types in react-aspect-ratio to support ref
       ref={forwardedRef}
     >
       <img src={src} alt="demo" />
diff --git a/yarn.lock b/yarn.lock
index c5d0e74..219074a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7976,10 +7976,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-aspect-ratio@^1.0.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/react-aspect-ratio/-/react-aspect-ratio-1.1.5.tgz#ee8e66cc45652156ced405469ddbdb4bdc54f18e"
-  integrity sha512-zTeQlhG584qDwr1wJi6dd9+zdvEbAWnKz0gSbxcmwIYitZ4Z2Dr9buJa9GONsh1BOO2ILZmMdVq6A/YvcKPN8A==
+react-aspect-ratio@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/react-aspect-ratio/-/react-aspect-ratio-1.1.6.tgz#d949800ca1428194f98034b945f804ce3f4b3ec6"
+  integrity sha512-A7/x2MqpYelh2fxx6RnRSEcA+rwdfiDK74Ju78xW8EnzSGSopPnCugyKlB+2d6dNP1UzU/SscIslVtqzNZrwyQ==
 
 react-colorful@^5.1.2:
   version "5.6.1"