fix(layer-types): use SVGAttributes instead of SVGProps in forwardRef…

… components, fix Pie refs (#4413)
recharts · Apr 11, 2024 · ed95633 · ed95633
1 parent 3d2e8b9
commit ed95633
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/container/Layer.tsx b/src/container/Layer.tsx
@@ -1,7 +1,4 @@
-/**
- * @fileOverview Layer
- */
-import React, { ReactNode, SVGProps } from 'react';
+import React, { ReactNode, SVGAttributes } from 'react';
 import clsx from 'clsx';
 import { filterProps } from '../util/ReactUtils';
 
@@ -10,9 +7,9 @@ interface LayerProps {
   children?: ReactNode;
 }
 
-export type Props = SVGProps<SVGGElement> & LayerProps;
+export type Props = SVGAttributes<SVGGElement> & LayerProps;
 
-export const Layer = React.forwardRef((props: Props, ref: any) => {
+export const Layer = React.forwardRef<SVGGElement, Props>((props: Props, ref) => {
   const { children, className, ...others } = props;
   const layerClass = clsx('recharts-layer', className);
 

diff --git a/src/polar/Pie.tsx b/src/polar/Pie.tsx
@@ -135,9 +135,9 @@ interface State {
 export type Props = PresentationAttributesAdaptChildEvent<any, SVGElement> & PieProps;
 
 export class Pie extends PureComponent<Props, State> {
-  pieRef: HTMLElement = null;
+  pieRef: SVGGElement = null;
 
-  sectorRefs: HTMLElement[] = [];
+  sectorRefs: SVGGElement[] = [];
 
   static displayName = 'Pie';
 
@@ -497,7 +497,7 @@ export class Pie extends PureComponent<Props, State> {
       };
       return (
         <Layer
-          ref={(ref: HTMLElement) => {
+          ref={(ref: SVGGElement) => {
             if (ref && !this.sectorRefs.includes(ref)) {
               this.sectorRefs.push(ref);
             }
@@ -571,14 +571,14 @@ export class Pie extends PureComponent<Props, State> {
     );
   }
 
-  attachKeyboardHandlers(pieRef: HTMLElement) {
+  attachKeyboardHandlers(pieRef: SVGGElement) {
     // eslint-disable-next-line no-param-reassign
     pieRef.onkeydown = (e: KeyboardEvent) => {
       if (!e.altKey) {
         switch (e.key) {
           case 'ArrowLeft': {
             const next = ++this.state.sectorToFocus % this.sectorRefs.length;
-            (this.sectorRefs[next] as HTMLElement).focus();
+            this.sectorRefs[next].focus();
             this.setState({ sectorToFocus: next });
             break;
           }
@@ -587,12 +587,12 @@ export class Pie extends PureComponent<Props, State> {
               --this.state.sectorToFocus < 0
                 ? this.sectorRefs.length - 1
                 : this.state.sectorToFocus % this.sectorRefs.length;
-            (this.sectorRefs[next] as HTMLElement).focus();
+            this.sectorRefs[next].focus();
             this.setState({ sectorToFocus: next });
             break;
           }
           case 'Escape': {
-            (this.sectorRefs[this.state.sectorToFocus] as HTMLElement).blur();
+            this.sectorRefs[this.state.sectorToFocus].blur();
             this.setState({ sectorToFocus: 0 });
             break;
           }
@@ -642,7 +642,7 @@ export class Pie extends PureComponent<Props, State> {
       <Layer
         tabIndex={this.props.rootTabIndex}
         className={layerClass}
-        ref={(ref: HTMLElement) => {
+        ref={ref => {
           this.pieRef = ref;
         }}
       >