From 953841738afd80482ff4ee5cca01dc018861dcda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Salvatore=20Ravid=C3=A0?= <salvoravida@yahoo.it>
Date: Tue, 14 Dec 2021 23:03:33 +0100
Subject: [PATCH] fix: replace createRef with useRef in Functional Components.
 (#1524)

---
 .../src/components/accessibility/partitions_data_table.tsx    | 4 ++--
 .../stories/interactions/16_cursor_update_action.story.tsx    | 4 ++--
 storybook/stories/interactions/17_png_export.story.tsx        | 2 +-
 storybook/stories/interactions/18_null_values.story.tsx       | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/charts/src/components/accessibility/partitions_data_table.tsx b/packages/charts/src/components/accessibility/partitions_data_table.tsx
index 5f4c5d550d..73ebf9ae47 100644
--- a/packages/charts/src/components/accessibility/partitions_data_table.tsx
+++ b/packages/charts/src/components/accessibility/partitions_data_table.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { createRef, memo, useState } from 'react';
+import React, { useRef, memo, useState } from 'react';
 import { connect } from 'react-redux';
 
 import {
@@ -39,7 +39,7 @@ const ScreenReaderPartitionTableComponent = ({
   debug,
 }: ScreenReaderPartitionTableProps) => {
   const [count, setCount] = useState(1);
-  const tableRowRef = createRef<HTMLTableRowElement>();
+  const tableRowRef = useRef<HTMLTableRowElement>(null);
   const { tableCaption } = a11ySettings;
 
   const rowLimit = TABLE_PAGINATION * count;
diff --git a/storybook/stories/interactions/16_cursor_update_action.story.tsx b/storybook/stories/interactions/16_cursor_update_action.story.tsx
index f43d066d1d..66f3cbff51 100644
--- a/storybook/stories/interactions/16_cursor_update_action.story.tsx
+++ b/storybook/stories/interactions/16_cursor_update_action.story.tsx
@@ -52,8 +52,8 @@ const getSeriesKnob = (group?: string) => {
 };
 
 export const Example = () => {
-  const ref1 = React.createRef<Chart>();
-  const ref2 = React.createRef<Chart>();
+  const ref1 = React.useRef<Chart>(null);
+  const ref2 = React.useRef<Chart>(null);
   const pointerUpdate = (event: PointerEvent) => {
     action('onPointerUpdate')(event);
     if (ref1.current) {
diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx
index a6a5d7c835..d862640f67 100644
--- a/storybook/stories/interactions/17_png_export.story.tsx
+++ b/storybook/stories/interactions/17_png_export.story.tsx
@@ -36,7 +36,7 @@ export const Example = () => {
   /**
    * The handler section of this story demonstrates the PNG export functionality
    */
-  const chartRef: React.RefObject<Chart> = React.createRef();
+  const chartRef = React.useRef<Chart>(null);
   const handler = () => {
     if (!chartRef.current) {
       return;
diff --git a/storybook/stories/interactions/18_null_values.story.tsx b/storybook/stories/interactions/18_null_values.story.tsx
index 27161a11b9..9269442e7d 100644
--- a/storybook/stories/interactions/18_null_values.story.tsx
+++ b/storybook/stories/interactions/18_null_values.story.tsx
@@ -50,8 +50,8 @@ const getSeriesKnob = (group?: string) => {
 };
 
 export const Example = () => {
-  const ref1 = React.createRef<Chart>();
-  const ref2 = React.createRef<Chart>();
+  const ref1 = React.useRef<Chart>(null);
+  const ref2 = React.useRef<Chart>(null);
   const pointerUpdate = (event: PointerEvent) => {
     action('onPointerUpdate')(event);
     if (ref1.current) {