Fix deprecated findDOMNode usage in React 19

Update the library to remove the use of deprecated `findDOMNode` and replace it with a ref-based approach.

* **NonStrictPanel.tsx**
  - Replace `findDOMNode` with `React.createRef` to access the DOM element.
  - Update the `nativeElement` getter to return the current ref.
  - Modify the `render` method to clone the element with the ref.

* **ReactElementProvider.ts**
  - Update the constructor to accept a ref instead of a `StrictPanel` or `NonStrictPanel`.
  - Update the `element` getter to return the current ref.
  - Modify the `show` and `hide` methods to use the ref.

* **Flicking.tsx**
  - Remove the `useFindDOMNode` prop and use a ref-based approach.
  - Update the `_createPanelRefs` method to use `React.createRef`.
  - Update the `_getPanels` method to use the new ref-based approach.

* **ReactRenderer.ts**
  - Update the `_collectPanels` method to use the new ref-based approach.
  - Update the `_createPanel` method to use the new ref-based approach.

* **package-lock.json**
  - Update the version to `4.12.0-snapshot`.

Author: jtwite

package-lock.json

@@ -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/Flicking.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/NonStrictPanel.tsx

@@ -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/ReactElementProvider.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);
   }
 }