Merge branch 'main' into stefanos/core-2312-add-console-warning-insid…

…e-the-clerktesting-package
clerk · May 17, 2024 · 3a21c15 · 3a21c15
2 parents b55804d + 2f4ce12
commit 3a21c15
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/elements/CHANGELOG.md b/packages/elements/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @clerk/elements
 
+## 0.4.5
+
+### Patch Changes
+
+- Update `<FieldError />` to enable `asChild` prop for custom markup in render function usage. ([#3396](https://github.com/clerk/javascript/pull/3396)) by [@alexcarpenter](https://github.com/alexcarpenter)
+
 ## 0.4.4
 
 ### Patch Changes

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/elements",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Clerk Elements",
   "keywords": [
     "clerk",

diff --git a/packages/elements/src/react/common/form/index.tsx b/packages/elements/src/react/common/form/index.tsx
@@ -24,7 +24,7 @@ import type { SetRequired } from 'type-fest';
 import type { BaseActorRef } from 'xstate';
 
 import type { ClerkElementsError } from '~/internals/errors';
-import { ClerkElementsFieldError } from '~/internals/errors';
+import { ClerkElementsFieldError, ClerkElementsRuntimeError } from '~/internals/errors';
 import type { FieldDetails } from '~/internals/machines/form';
 import {
   fieldFeedbackSelector,
@@ -36,6 +36,7 @@ import {
 } from '~/internals/machines/form/form.context';
 import { usePassword } from '~/react/hooks/use-password.hook';
 import type { ErrorMessagesKey } from '~/react/utils/generate-password-error-text';
+import { isReactFragment } from '~/react/utils/is-react-fragment';
 
 import type { OTPInputProps } from './otp';
 import { OTP_LENGTH_DEFAULT, OTPInput } from './otp';
@@ -669,6 +670,10 @@ const GlobalError = React.forwardRef<FormGlobalErrorElement, FormGlobalErrorProp
     const Comp = asChild ? Slot : 'div';
     const child = typeof children === 'function' ? children(error) : children;
 
+    if (isReactFragment(child)) {
+      throw new ClerkElementsRuntimeError('<GlobalError /> cannot render a Fragment as a child.');
+    }
+
     return (
       <Comp
         role='alert'
@@ -702,7 +707,7 @@ const GlobalError = React.forwardRef<FormGlobalErrorElement, FormGlobalErrorProp
  * </Clerk.Field>
  */
 const FieldError = React.forwardRef<FormFieldErrorElement, FormFieldErrorProps>(
-  ({ children, code, name, ...rest }, forwardedRef) => {
+  ({ asChild = false, children, code, name, ...rest }, forwardedRef) => {
     const fieldContext = useFieldContext();
     const fieldName = fieldContext?.name || name;
     const { feedback } = useFieldFeedback({ name: fieldName });
@@ -717,17 +722,24 @@ const FieldError = React.forwardRef<FormFieldErrorElement, FormFieldErrorProps>(
       return null;
     }
 
+    const Comp = asChild ? Slot : 'span';
     const child = typeof children === 'function' ? children(error) : children;
+
     // const forceMatch = code ? error.code === code : undefined; // TODO: Re-add when Radix Form is updated
 
+    if (isReactFragment(child)) {
+      throw new ClerkElementsRuntimeError('<FieldError /> cannot render a Fragment as a child.');
+    }
+
     return (
       <RadixFormMessage
         data-error-code={error.code}
         // forceMatch={forceMatch}
         {...rest}
         ref={forwardedRef}
+        asChild
       >
-        {child || error.message}
+        <Comp>{child || error.message}</Comp>
       </RadixFormMessage>
     );
   },

diff --git a/packages/elements/src/react/utils/is-react-fragment.ts b/packages/elements/src/react/utils/is-react-fragment.ts
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export function isReactFragment(node: React.ReactNode) {
+  return React.isValidElement(node) && node.type === React.Fragment;
+}