Fix deprecated findDOMNode usage in React 19

.devcontainer/devcontainer.json

@@ -0,0 +1,5 @@
+{
+  "tasks": {
+    "build": "npm run build:bundle"
+  }
+}

.gitignore

@@ -221,6 +221,4 @@ demo/release
 packages/**/*/dist/
 demo/_data/version.yml
 
-outjs/
-declaration/
-dist/
+declaration/

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.12.0-snapshot",
+	"version": "4.12.1-react19",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",
@@ -47,7 +47,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/naver/egjs-flicking"
+		"url": "https://github.com/jtwite/egjs-flicking"
 	},
 	"author": {
 		"name": "NAVER Corp."

packages/react-flicking/src/react-flicking/Flicking.tsx

@@ -332,9 +332,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
         : getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren))
       : origChildren;
 
-    return this.props.useFindDOMNode
-      ? children.map((child, idx) => <NonStrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</NonStrictPanel>)
-      : children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>)
+    return children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>);
   }
 
   private _isFragment(child: React.ReactElement) {

packages/react-flicking/src/react-flicking/NonStrictPanel.tsx

@@ -3,18 +3,20 @@
  * egjs projects are licensed under the MIT license
  */
 import * as React from "react";
-import { findDOMNode } from "react-dom";
 
 class NonStrictPanel extends React.Component<{ children?: React.ReactElement }> {
   private _hide: boolean = false;
+  private _elRef: React.RefObject<HTMLElement> = React.createRef();
 
-  public get nativeElement() { return findDOMNode(this) as HTMLElement; }
+  public get nativeElement() { return this._elRef.current!; }
   public get rendered() { return !this._hide; }
 
   public render() {
     return this._hide
       ? <></>
-      : this.props.children;
+      : React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, {
+        ref: this._elRef
+      });
   }
 
   public show() {

packages/react-flicking/src/react-flicking/ReactElementProvider.ts

@@ -7,21 +7,25 @@ import StrictPanel from "./StrictPanel";
 import NonStrictPanel from "./NonStrictPanel";
 
 class ReactElementProvider implements ElementProvider {
-  private _el: StrictPanel | NonStrictPanel;
+  private _elRef: React.RefObject<HTMLElement>;
 
-  public get element() { return this._el.nativeElement; }
-  public get rendered() { return this._el.rendered; }
+  public get element() { return this._elRef.current!; }
+  public get rendered() { return this._elRef.current !== null; }
 
-  public constructor(el: StrictPanel | NonStrictPanel) {
-    this._el = el;
+  public constructor(elRef: React.RefObject<HTMLElement>) {
+    this._elRef = elRef;
   }
 
   public show() {
-    this._el.show();
+    if (this._elRef.current) {
+      this._elRef.current.style.display = "";
+    }
   }
 
   public hide() {
-    this._el.hide();
+    if (this._elRef.current) {
+      this._elRef.current.style.display = "none";
+    }
   }
 }
 

packages/react-flicking/src/react-flicking/ReactRenderer.ts

@@ -66,13 +66,13 @@ class ReactRenderer extends ExternalRenderer {
   protected _collectPanels() {
     const flicking = getFlickingAttached(this._flicking);
     const reactFlicking = this._reactFlicking;
-    const reactPanels = reactFlicking.reactPanels;
+    const reactPanels = reactFlicking.reactPanels.map(panel => panel.nativeElement);
 
     this._panels = this._strategy.collectPanels(flicking, reactPanels);
   }
 
   protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions) {
-    return this._strategy.createPanel(externalComponent, options);
+    return this._strategy.createPanel(externalComponent.nativeElement, options);
   }
 }