From b1c77a7cff9609e67a4121998522bdfa8464be12 Mon Sep 17 00:00:00 2001
From: Thomas Digby <tom@atomlearning.co.uk>
Date: Tue, 22 Aug 2023 13:03:35 +0100
Subject: [PATCH] fix: ensure 'as' cannot be used

---
 .../alert-context/AlertDialog.tsx             | 12 ++++------
 lib/src/components/button/Button.tsx          | 16 ++++++++++----
 lib/src/components/file-input/FileInput.tsx   | 22 ++++++++++---------
 .../__snapshots__/FileInput.test.tsx.snap     |  1 -
 lib/src/components/link/Link.tsx              |  9 +++++---
 5 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx b/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx
index a74334a3d..a5da12935 100644
--- a/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx
+++ b/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx
@@ -41,19 +41,15 @@ export const Alert: React.FC<AlertDialogContentProps> = ({
         {cancelActionText && (
           <Button
             appearance="outline"
-            as={AlertDialog.Cancel}
             onClick={() => onAction(false)}
             size="sm"
+            asChild
           >
-            {cancelActionText}
+            <AlertDialog.Cancel>{cancelActionText}</AlertDialog.Cancel>
           </Button>
         )}
-        <Button
-          as={AlertDialog.Action}
-          onClick={() => onAction(true)}
-          size="sm"
-        >
-          {confirmActionText}
+        <Button onClick={() => onAction(true)} size="sm" asChild>
+          <AlertDialog.Action>{confirmActionText}</AlertDialog.Action>
         </Button>
       </Stack>
     </AlertDialog.Content>
diff --git a/lib/src/components/button/Button.tsx b/lib/src/components/button/Button.tsx
index 9b68abfbd..4e968a026 100644
--- a/lib/src/components/button/Button.tsx
+++ b/lib/src/components/button/Button.tsx
@@ -1,3 +1,4 @@
+import { Slot } from '@radix-ui/react-slot'
 import type { VariantProps } from '@stitches/react'
 import { darken, opacify } from 'color2k'
 import * as React from 'react'
@@ -7,7 +8,6 @@ import { Icon, StyledIcon } from '~/components/icon'
 import { Loader } from '~/components/loader'
 import { styled, theme } from '~/stitches'
 import { Override } from '~/utilities'
-import { Slot } from '@radix-ui/react-slot'
 
 const getButtonOutlineVariant = (
   base: string,
@@ -196,10 +196,10 @@ export const StyledButton = styled('button', {
 type ButtonProps = Override<
   React.ComponentProps<typeof StyledButton>,
   VariantProps<typeof StyledButton> & {
-    as?: React.ComponentType | React.ElementType
+    as?: never
+    asChild?: boolean
     children: React.ReactNode
     isLoading?: boolean
-    asChild?: boolean
   }
 >
 
@@ -207,6 +207,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
+      as,
       asChild,
       isLoading,
       onClick,
@@ -227,7 +228,14 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     }
 
     if (asChild) {
-      return <StyledButton {...props} as={Slot} />
+      return (
+        <StyledButton
+          isLoading={isLoading || false}
+          onClick={!isLoading ? onClick : undefined}
+          {...props}
+          as={Slot}
+        />
+      )
     }
 
     return (
diff --git a/lib/src/components/file-input/FileInput.tsx b/lib/src/components/file-input/FileInput.tsx
index 348971b18..0238e885f 100644
--- a/lib/src/components/file-input/FileInput.tsx
+++ b/lib/src/components/file-input/FileInput.tsx
@@ -24,16 +24,18 @@ export const FileInput: React.FC<FileInputProps> = ({
   }
 
   return (
-    <Button as="label" {...rest}>
-      <Icon is={Upload} />
-      {children}
-      <input
-        type="file"
-        onChange={handleFileSelect}
-        accept={accept}
-        multiple={multiple}
-        hidden
-      />
+    <Button {...rest} asChild>
+      <label>
+        <Icon is={Upload} />
+        {children}
+        <input
+          type="file"
+          onChange={handleFileSelect}
+          accept={accept}
+          multiple={multiple}
+          hidden
+        />
+      </label>
     </Button>
   )
 }
diff --git a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap
index 9077ca964..a315a73b9 100644
--- a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap
+++ b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap
@@ -77,7 +77,6 @@ exports[`FileInput component renders 1`] = `
 <div>
   <label
     class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
-    type="button"
   >
     <svg
       aria-hidden="true"
diff --git a/lib/src/components/link/Link.tsx b/lib/src/components/link/Link.tsx
index 341e16cf2..46a8e9098 100644
--- a/lib/src/components/link/Link.tsx
+++ b/lib/src/components/link/Link.tsx
@@ -1,3 +1,4 @@
+import { Slot } from '@radix-ui/react-slot'
 import * as React from 'react'
 
 import { styled } from '~/stitches'
@@ -7,7 +8,6 @@ import { StyledHeading } from '../heading/Heading'
 import { StyledLi } from '../list/List'
 import { StyledMarkdownEmphasis } from '../markdown-content/components'
 import { StyledText, textVariants } from '../text/Text'
-import { Slot } from '@radix-ui/react-slot'
 
 export const StyledLink = styled('a', {
   bg: 'unset',
@@ -37,8 +37,11 @@ export const StyledLink = styled('a', {
 
 export const Link = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentProps<typeof StyledLink> & { asChild?: boolean }
->(({ asChild, size = 'md', href, ...rest }, ref) => {
+  React.ComponentProps<typeof StyledLink> & {
+    asChild?: boolean
+    as?: never
+  }
+>(({ as, asChild, size = 'md', href, ...rest }, ref) => {
   if (asChild) {
     return <StyledLink {...rest} as={Slot} noCapsize size={size} ref={ref} />
   }