From b54b7b3edd6983d0b8edc64061e4ae5772bdab3f Mon Sep 17 00:00:00 2001
From: mkrause <maikel.krause@fortanix.com>
Date: Sat, 12 Oct 2024 23:59:35 +0200
Subject: [PATCH] Fix a few type errors.

---
 src/components/forms/context/Form/Form.tsx    |  2 +-
 .../forms/context/Form/FormOptics.tsx         |  2 +-
 .../forms/controls/Select/Select.tsx          |  2 +-
 .../DropdownMenu/DropdownMenuProvider.tsx     |  8 +++----
 .../overlays/Tooltip/Tooltip.stories.tsx      |  6 ++---
 .../Tooltip/TooltipProvider.stories.tsx       |  6 ++---
 .../overlays/Tooltip/TooltipProvider.tsx      | 13 +++++------
 src/util/drag.ts                              | 23 +++++++++++--------
 8 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/components/forms/context/Form/Form.tsx b/src/components/forms/context/Form/Form.tsx
index d833c790..05637263 100644
--- a/src/components/forms/context/Form/Form.tsx
+++ b/src/components/forms/context/Form/Form.tsx
@@ -37,7 +37,7 @@ export const Form = (props: FormProps) => {
   const { unstyled = false, nestable, children, className, ...propsRest } = props;
   
   const formId = React.useId();
-  const [wrapperRef, setWrapperRef] = React.useState<null | React.ElementRef<'div'>>(null);
+  const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
   
   // Memoize to keep a stable reference
   const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
diff --git a/src/components/forms/context/Form/FormOptics.tsx b/src/components/forms/context/Form/FormOptics.tsx
index 911ecfef..7649346d 100644
--- a/src/components/forms/context/Form/FormOptics.tsx
+++ b/src/components/forms/context/Form/FormOptics.tsx
@@ -40,7 +40,7 @@ export const Form = (props: FormProps) => {
   const { unstyled = false, nestable, children, className, ...propsRest } = props;
   
   const formId = React.useId();
-  const [wrapperRef, setWrapperRef] = React.useState<null | React.ElementRef<'div'>>(null);
+  const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
   
   // Memoize to keep a stable reference
   const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
diff --git a/src/components/forms/controls/Select/Select.tsx b/src/components/forms/controls/Select/Select.tsx
index aefa2403..ea58c51e 100644
--- a/src/components/forms/controls/Select/Select.tsx
+++ b/src/components/forms/controls/Select/Select.tsx
@@ -89,7 +89,7 @@ export const Select = Object.assign(
   (props: SelectProps) => {
     const { children, unstyled = false, searchable, ...propsRest } = props;
     
-    const selectedRef = React.useRef<React.ElementRef<'button'>>(null);
+    const selectedRef = React.useRef<React.ComponentRef<'button'>>(null);
     const [selected, setSelected] = React.useState<null | OptionDef>(null);
     
     const listRef = React.useRef([]);
diff --git a/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx b/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx
index d1dddbff..4f01a3a0 100644
--- a/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx
+++ b/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx
@@ -85,11 +85,11 @@ export const DropdownMenuProvider = Object.assign(
         selectedRef.current?.focus(); // Return focus
       },
       close: () => { setIsOpen(false); },
-    }), [selected, selectedRef]);
+    }), [selected, setIsOpen, getItemProps]);
     
     const renderAnchor = () => {
       const anchorProps: AnchorRenderArgs['props'] = (userProps?: undefined | React.HTMLProps<Element>) => {
-        const userPropsRef: undefined | string | React.Ref<any> = userProps?.ref ?? undefined;
+        const userPropsRef: undefined | string | React.Ref<Element> = userProps?.ref ?? undefined;
         if (typeof userPropsRef === 'string') {
           // We can't merge refs if one of the refs is a string
           console.error(`Failed to render DropdownMenuProvider, due to use of legacy string ref`);
@@ -112,7 +112,7 @@ export const DropdownMenuProvider = Object.assign(
         return <span {...anchorProps()}>{children}</span>;
       }
       if (React.Children.count(children) === 1) {
-        return React.cloneElement(children, anchorProps(children.props));
+        return React.cloneElement(children, anchorProps(children.props as React.HTMLProps<Element>));
       }
       
       console.error(`Invalid children passed to DropdownMenuProvider, expected a render prop or single child element.`);
@@ -132,7 +132,7 @@ export const DropdownMenuProvider = Object.assign(
             className: cx(propsRest.className),
           })}
           tabIndex={undefined}
-          ref={mergeRefs(refs.setFloating as any, propsRest.ref)}
+          ref={mergeRefs<HTMLUListElement>(refs.setFloating, propsRest.ref)}
           data-placement={placementEffective}
         >
           {items}
diff --git a/src/components/overlays/Tooltip/Tooltip.stories.tsx b/src/components/overlays/Tooltip/Tooltip.stories.tsx
index 8c679bc1..b9ca6be0 100644
--- a/src/components/overlays/Tooltip/Tooltip.stories.tsx
+++ b/src/components/overlays/Tooltip/Tooltip.stories.tsx
@@ -47,7 +47,7 @@ export const TooltipScroll: StoryObj<typeof Tooltip> = {
   render: () => (
     <Tooltip>
       <p>
-        Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor.
+        Lorem ipsum dolor sit amet, <a href="/" onClick={event => { event.preventDefault(); }}>consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor.
       </p>
       <p>
         Cras ac suscipit nibh. Fusce tincidunt iaculis dapibus. Vivamus sit amet neque eu velit tincidunt semper. Donec at magna aliquam mi consectetur imperdiet. Donec pretium placerat quam, in sodales purus porta vitae. Phasellus nisl justo, luctus vel mi vel, sollicitudin.
@@ -67,7 +67,7 @@ const TooltipNativeAnchoringControlled = () => {
   // https://www.w3.org/TR/css-anchor-position-1/#implicit
   const id = React.useId();
   const anchorName = `--bk-tooltip-anchor-${CSS.escape(id)}`;
-  const refTooltip = React.useRef<React.ElementRef<typeof Tooltip>>(null);
+  const refTooltip = React.useRef<React.ComponentRef<typeof Tooltip>>(null);
   
   return (
     <>
@@ -76,7 +76,7 @@ const TooltipNativeAnchoringControlled = () => {
       {/* @ts-ignore Anchor Positioning not yet supported. */}
       <Tooltip ref={refTooltip} id={id} popover="manual" style={{ positionAnchor: anchorName }}>
         This is a tooltip with a lot of text that gives more information about the element.
-        It has a <a href="#">link</a> you can focus.
+        It has a <a href="/" onClick={event => { event.preventDefault(); }}>link</a> you can focus.
       </Tooltip>
       <Button type="button" popoverTarget={id} variant="primary" label="Hover over me"
         // @ts-ignore Anchor Positioning not yet supported.
diff --git a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
index a8257f89..491bb12b 100644
--- a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
+++ b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
@@ -62,17 +62,17 @@ export const TooltipWithFocus: Story = {
 };
 
 const TooltipWithDrag = () => {
-  const boundaryRef = React.useRef<React.ElementRef<'div'>>(null);
+  const boundaryRef = React.useRef<React.ComponentRef<'div'>>(null);
   const [boundaryRendered, setBoundaryRendered] = React.useState(false);
   
   React.useEffect(() => {
     if (boundaryRef.current && !boundaryRendered) { setBoundaryRendered(true); }
-  }, [boundaryRef.current]);
+  }, [boundaryRendered]);
   
   return (
     <div ref={boundaryRef} style={{ minHeight: 400, display: 'grid', placeContent: 'center' }}>
       {boundaryRef.current &&
-        <Draggable>
+        <Draggable<HTMLButtonElement>>
           {({ targetRef }) =>
             <TooltipProvider
               tooltip="The position of this tooltip will update to stay in view as it gets dragged towards
diff --git a/src/components/overlays/Tooltip/TooltipProvider.tsx b/src/components/overlays/Tooltip/TooltipProvider.tsx
index ca01afcb..f579e004 100644
--- a/src/components/overlays/Tooltip/TooltipProvider.tsx
+++ b/src/components/overlays/Tooltip/TooltipProvider.tsx
@@ -54,11 +54,10 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     ...tooltipProps
   } = props;
   
-  const arrowRef = React.useRef(null);
+  const arrowRef = React.useRef<HTMLElement>(null);
   
   const {
     context,
-    isOpen,
     isMounted,
     refs,
     floatingStyles,
@@ -70,7 +69,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     offset: 6,
     enablePreciseTracking,
     boundary,
-    arrowRef,
+    ...(arrowRef.current ? { arrowRef:  arrowRef as React.RefObject<HTMLElement> } : {}),
   });
   const arrow = usePopoverArrow({ context });
   
@@ -81,7 +80,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     } else {
       onTooltipDeactivated?.();
     }
-  }, [isMounted]);
+  }, [isMounted, onTooltipActivated, onTooltipDeactivated]);
   
   const renderTooltip = () => {
     if (!isMounted) { return null; }
@@ -93,7 +92,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     return (
       <Tooltip
         {...floatingProps}
-        ref={mergeRefs(refs.setFloating as any, tooltipProps.ref)}
+        ref={mergeRefs<HTMLDivElement>(refs.setFloating, tooltipProps.ref)}
         className={cx(
           floatingProps.className as ClassNameArgument,
           { [TooltipClassNames['bk-tooltip--arrow-top']]: arrow?.side === 'top' },
@@ -120,7 +119,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
   
   const renderAnchor = () => {
     const renderPropArg: GetReferenceProps = (userProps?: undefined | React.HTMLProps<Element>) => {
-      const userPropsRef: undefined | string | React.Ref<any> = userProps?.ref ?? undefined;
+      const userPropsRef: undefined | string | React.Ref<Element> = userProps?.ref ?? undefined;
       if (typeof userPropsRef === 'string') {
         // We can't merge refs if one of the refs is a string
         console.error(`Failed to render Tooltip, due to use of legacy string ref`);
@@ -143,7 +142,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
       return <span {...renderPropArg()}>{children}</span>;
     }
     if (React.Children.count(children) === 1) {
-      return React.cloneElement(children, renderPropArg(children.props));
+      return React.cloneElement(children, renderPropArg(children.props as React.HTMLProps<Element>));
     }
     
     console.error(`Invalid children passed to TooltipContainer, expected a render prop or single child element.`);
diff --git a/src/util/drag.ts b/src/util/drag.ts
index 7dd50962..e976e42f 100644
--- a/src/util/drag.ts
+++ b/src/util/drag.ts
@@ -34,23 +34,25 @@ export type UseDraggableProps = {
   viewport?: boolean,
   rectLimits?: { left: number, right: number, top: number, bottom: number },
 };
-export type UseDraggableResult = {
-  targetRef: React.Ref<null | HTMLElement>,
-  handleRef: React.Ref<null | HTMLElement>,
+export type UseDraggableResult<T extends HTMLElement, H extends HTMLElement> = {
+  targetRef: React.Ref<T>,
+  handleRef: React.Ref<H>,
   getTargetProps: () => Record<string, unknown>,
   dragging: boolean,
   delta: Delta,
   resetState: () => void,
 };
-export const useDraggable = (props: UseDraggableProps): UseDraggableResult => {
+export const useDraggable = <T extends HTMLElement = HTMLElement, H extends HTMLElement = HTMLElement>(
+  props: UseDraggableProps,
+): UseDraggableResult<T, H> => {
   const {
     controlStyle = true,
     viewport = false,
     rectLimits,
   } = props;
   
-  const targetRef = React.useRef<HTMLElement>(null);
-  const handleRef = React.useRef<HTMLElement>(null);
+  const targetRef = React.useRef<T>(null);
+  const handleRef = React.useRef<H>(null);
   const [dragging, setDragging] = React.useState<boolean>(false);
   const [prev, setPrev] = React.useState({ x: 0, y: 0 });
   const [delta, setDelta] = React.useState({ x: 0, y: 0 });
@@ -184,9 +186,12 @@ export const useDraggable = (props: UseDraggableProps): UseDraggableResult => {
   return { targetRef, handleRef, getTargetProps, dragging, delta, resetState };
 };
 
-export type DraggableProps = {
-  children: (result: UseDraggableResult) => React.ReactNode,
+export type DraggableProps<T extends HTMLElement, H extends HTMLElement> = {
+  children: (result: UseDraggableResult<T, H>) => React.ReactNode,
 };
-export const Draggable = ({ children, ...rest }: DraggableProps) => {
+export const Draggable = <T extends HTMLElement = HTMLElement, H extends HTMLElement = HTMLElement>({
+  children,
+  ...rest
+}: DraggableProps<T, H>) => {
   return children(useDraggable(rest));
 };