Removing the any and updating the api:report

Signed-off-by: elstranack <elstranack@homeaway.com>

packages/core-components/api-report.md

@@ -37,6 +37,7 @@ import { default as React_2 } from 'react';
 import * as React_3 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { RefObject } from 'react';
 import { SessionApi } from '@backstage/core-plugin-api';
 import { SignInPageProps } from '@backstage/core-plugin-api';
 import { SparklinesLineProps } from 'react-sparklines';
@@ -392,6 +393,7 @@ export type GaugeProps = {
   inverse?: boolean;
   unit?: string;
   max?: number;
+  hoverMessage?: ReactNode;
   getColor?: GaugePropsGetColor;
 };
 
@@ -922,6 +924,7 @@ export const SidebarDivider: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1029,7 +1032,6 @@ export const SidebarDivider: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1284,6 +1286,7 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1391,7 +1394,6 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1559,6 +1561,7 @@ export const SidebarSpace: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1666,7 +1669,6 @@ export const SidebarSpace: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1833,6 +1835,7 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1940,7 +1943,6 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -2409,6 +2411,11 @@ export function useContent(): {
   contentRef: React_2.MutableRefObject<HTMLElement | null> | undefined;
 };
 
+// Warning: (ae-missing-release-tag) "useHover" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const useHover: (ref: RefObject<HTMLInputElement>) => boolean;
+
 // Warning: (ae-forgotten-export) The symbol "SetQueryParams" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "useQueryParamState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

packages/core-components/src/components/ProgressBars/Gauge.tsx

@@ -18,7 +18,7 @@ import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import { useHover } from '../../hooks';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject, useRef } from 'react';
 
 /** @public */
 export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
@@ -38,11 +38,11 @@ const useStyles = makeStyles<BackstageTheme>(
       fontWeight: 'bold',
       color: theme.palette.textContrast,
     },
-    hoveringMessageCompliant: {
+    hoveringMessage: {
       fontSize: 13,
       top: '50%',
       left: '50%',
-      transform: 'translate(-50%, -50%)',
+      transform: 'translate(-55%, -50%)',
       position: 'absolute',
       wordBreak: 'break-all',
       display: 'inline-block',
@@ -115,7 +115,8 @@ export const getProgressColor: GaugePropsGetColor = ({
  */
 
 export function Gauge(props: GaugeProps) {
-  const [hoverRef, isHovering] = useHover() as any;
+  const hoverRef = useRef() as RefObject<HTMLInputElement>;
+  const isHovering = useHover(hoverRef);
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
   const { palette } = useTheme<BackstageTheme>();
@@ -138,7 +139,7 @@ export function Gauge(props: GaugeProps) {
         className={classes.circle}
       />
       {hoverMessage && isHovering ? (
-        <div className={classes.hoveringMessageCompliant}>{hoverMessage}</div>
+        <div className={classes.hoveringMessage}>{hoverMessage}</div>
       ) : (
         <div className={classes.overlay}>
           {isNaN(value) ? 'N/A' : `${asActual}${unit}`}

packages/core-components/src/hooks/useHover.ts

@@ -13,12 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, RefObject, useState } from 'react';
 
-export const useHover = () => {
+export const useHover = (ref: RefObject<HTMLInputElement> ) => {
   const [value, setValue] = useState(false);
 
-  const ref = useRef(null);
   const handleMouseOver = () => setValue(true);
   const handleMouseOut = () => setValue(false);
 
@@ -38,5 +37,5 @@ export const useHover = () => {
     };
   }, [ref]);
 
-  return [ref, value];
+  return value;
 };