From 57d116f19f01ff26bedf0a38575a6e926762434f Mon Sep 17 00:00:00 2001
From: James Murty <james@murty.co>
Date: Sun, 26 May 2024 10:44:42 +1000
Subject: [PATCH] Define callback refs inline to work with latest versions of
 Next.js / React (#819)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Callback refs defined as class functions don't get invoked in
Next.js 14.2+ – and therefore don't work – perhaps because of changes
to the underlying React which is at or near version 19.
---
 src/index.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index cd2afd38..f58fb1ca 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -926,12 +926,6 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
     );
   }
 
-  ref = (c: HTMLElement | null) => {
-    if (c) {
-      this.resizable = c;
-    }
-  };
-
   render() {
     const extendsProps = Object.keys(this.props).reduce((acc, key) => {
       if (definedProps.indexOf(key) !== -1) {
@@ -961,7 +955,18 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
     const Wrapper = this.props.as || 'div';
 
     return (
-      <Wrapper ref={this.ref} style={style} className={this.props.className} {...extendsProps}>
+      <Wrapper
+        style={style}
+        className={this.props.className}
+        {...extendsProps}
+        // `ref` is after `extendsProps` to ensure this one wins over a version
+        // passed in
+        ref={(c: HTMLElement | null) => {
+          if (c) {
+            this.resizable = c;
+          }
+        }}
+      >
         {this.state.isResizing && <div style={this.state.backgroundStyle} />}
         {this.props.children}
         {this.renderResizer()}