From 1aafe101a644bb439b6606ad27d8a9644624d001 Mon Sep 17 00:00:00 2001
From: Timmy Huang <tihuan@users.noreply.github.com>
Date: Tue, 1 Mar 2022 12:23:59 -0800
Subject: [PATCH] fix: some components are exported anonymously, which confuses
 TS somehow (#130)

When we do `export default forwardRef(function Component(...))` the generated type definitions
confuse TS, since all the components exported that way share the same _default namespace, thus the
need to do: `const ComponentName = forwardRef(function ComponentName(...)); export default
ComponentName`
---
 src/core/Dialog/index.tsx                     |  4 +++-
 src/core/DialogActions/index.tsx              |  4 +++-
 src/core/DialogPaper/index.tsx                |  4 +++-
 .../components/CloseButton/index.tsx          |  4 +++-
 src/core/DialogTitle/index.tsx                |  4 +++-
 src/core/Icon/index.tsx                       |  4 +++-
 src/core/Link/index.tsx                       | 20 ++++++++++---------
 src/core/Tooltip/index.tsx                    |  4 +++-
 src/core/Tooltip/style.ts                     |  2 +-
 9 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/core/Dialog/index.tsx b/src/core/Dialog/index.tsx
index 70f5c7cd1..4db7cccb1 100644
--- a/src/core/Dialog/index.tsx
+++ b/src/core/Dialog/index.tsx
@@ -16,7 +16,7 @@ interface ExtraProps {
 
 export type DialogProps = RawDialogProps & ExtraProps;
 
-export default forwardRef<HTMLDivElement, DialogProps>(function Dialog(
+const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
   props,
   ref
 ): JSX.Element {
@@ -35,3 +35,5 @@ export default forwardRef<HTMLDivElement, DialogProps>(function Dialog(
     </DialogContext.Provider>
   );
 });
+
+export default Dialog;
diff --git a/src/core/DialogActions/index.tsx b/src/core/DialogActions/index.tsx
index 3b87405aa..5fadb0deb 100644
--- a/src/core/DialogActions/index.tsx
+++ b/src/core/DialogActions/index.tsx
@@ -4,8 +4,10 @@ import { ExtraProps, StyledDialogActions } from "./style";
 
 export type DialogActionsProps = ExtraProps & RawDialogActionsProps;
 
-export default forwardRef<HTMLDivElement, DialogActionsProps>(
+const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(
   function DialogActions(props, ref) {
     return <StyledDialogActions ref={ref} {...props} />;
   }
 );
+
+export default DialogActions;
diff --git a/src/core/DialogPaper/index.tsx b/src/core/DialogPaper/index.tsx
index 94bf2fa33..90d35017b 100644
--- a/src/core/DialogPaper/index.tsx
+++ b/src/core/DialogPaper/index.tsx
@@ -5,7 +5,7 @@ import { StyledPaper } from "./style";
 
 export { PaperProps as DialogPaperProps };
 
-export default forwardRef<unknown, PaperProps>(function DialogPaper(
+const DialogPaper = forwardRef<unknown, PaperProps>(function DialogPaper(
   props,
   ref
 ): JSX.Element {
@@ -15,3 +15,5 @@ export default forwardRef<unknown, PaperProps>(function DialogPaper(
     </DialogContext.Consumer>
   );
 });
+
+export default DialogPaper;
diff --git a/src/core/DialogTitle/components/CloseButton/index.tsx b/src/core/DialogTitle/components/CloseButton/index.tsx
index db75ffdee..0a4a6d9a2 100644
--- a/src/core/DialogTitle/components/CloseButton/index.tsx
+++ b/src/core/DialogTitle/components/CloseButton/index.tsx
@@ -18,7 +18,7 @@ const SDS_SIZE_TO_ICON_SIZE = {
   xs: "s",
 };
 
-export default forwardRef<HTMLButtonElement, IconButtonProps>(
+const CloseButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   function CloseButton(props, ref) {
     return (
       <DialogContext.Consumer>
@@ -46,3 +46,5 @@ export default forwardRef<HTMLButtonElement, IconButtonProps>(
     );
   }
 );
+
+export default CloseButton;
diff --git a/src/core/DialogTitle/index.tsx b/src/core/DialogTitle/index.tsx
index 5d581506f..6d18148c2 100644
--- a/src/core/DialogTitle/index.tsx
+++ b/src/core/DialogTitle/index.tsx
@@ -11,7 +11,7 @@ export interface DialogTitleProps extends ExtraProps, RawDialogTitleProps {
   onClose?: () => void;
 }
 
-export default forwardRef(function DialogTitle(
+const DialogTitle = forwardRef(function DialogTitle(
   props: DialogTitleProps,
   ref
 ): JSX.Element {
@@ -29,3 +29,5 @@ export default forwardRef(function DialogTitle(
     </StyledDialogTitle>
   );
 });
+
+export default DialogTitle;
diff --git a/src/core/Icon/index.tsx b/src/core/Icon/index.tsx
index e797f1798..466b8470d 100644
--- a/src/core/Icon/index.tsx
+++ b/src/core/Icon/index.tsx
@@ -7,7 +7,7 @@ export type { IconNameToSizes };
 export type IconProps<IconName extends keyof IconNameToSizes> =
   ExtraProps<IconName>;
 
-export default forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
+const Icon = forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
   { sdsIcon, sdsSize, sdsType }: IconProps<IconName>,
   ref: ForwardedRef<HTMLDivElement | null>
 ): JSX.Element | null {
@@ -50,3 +50,5 @@ export default forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
 
   return null;
 });
+
+export default Icon;
diff --git a/src/core/Link/index.tsx b/src/core/Link/index.tsx
index 6a7e098be..b6859d18e 100644
--- a/src/core/Link/index.tsx
+++ b/src/core/Link/index.tsx
@@ -1,17 +1,19 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { LinkProps, StyledLink } from "./style";
 
-const Link = (props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
-  const { sdsStyle } = props;
-  let underline: LinkProps["underline"];
+const Link = forwardRef(
+  (props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
+    const { sdsStyle } = props;
+    let underline: LinkProps["underline"];
 
-  if (sdsStyle === "default") {
-    underline = "none";
-  }
+    if (sdsStyle === "default") {
+      underline = "none";
+    }
 
-  return <StyledLink {...props} underline={underline} ref={ref} />;
-};
+    return <StyledLink {...props} underline={underline} ref={ref} />;
+  }
+);
 
 export { LinkProps };
 
-export default forwardRef(Link);
+export default Link;
diff --git a/src/core/Tooltip/index.tsx b/src/core/Tooltip/index.tsx
index f7b8db885..3c2215717 100644
--- a/src/core/Tooltip/index.tsx
+++ b/src/core/Tooltip/index.tsx
@@ -16,7 +16,7 @@ export { TooltipProps };
  * wrap the children in a `<span>` tag.
  * https://mui.com/components/tooltips/#disabled-elements
  */
-export default forwardRef(function Tooltip(
+const Tooltip = forwardRef(function Tooltip(
   props: TooltipProps,
   ref
 ): JSX.Element {
@@ -138,3 +138,5 @@ function mergeClass({
 
   return propClassName ? `${propClassName} ${className}` : className;
 }
+
+export default Tooltip;
diff --git a/src/core/Tooltip/style.ts b/src/core/Tooltip/style.ts
index 0a31b7ec4..17c52d683 100644
--- a/src/core/Tooltip/style.ts
+++ b/src/core/Tooltip/style.ts
@@ -82,7 +82,7 @@ export const tooltipCss = (props: ExtraProps): string => {
     ${sdsStyle === "dark" || inverted ? dark(props) : light(props)}
     ${width === "wide" && sdsStyle === "light" && wide()}
     
-    ${followCursor === true && tableStyles(props)};
+    ${followCursor === true && tableStyles(props)}
 
     border: ${borders?.gray["300"]};
     box-shadow: ${shadows?.m};