Merge branch 'main' into jacekradko/remove-swr

Author: jacekradko

.changeset/friendly-expo-peer-deps.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Broaden React peer dependency to `^18.0.0 || ^19.0.0` to resolve peer dependency conflicts for Expo 54 users

.changeset/little-planes-tease.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Export SignUpFutureAdditionalParams type.

.changeset/open-loops-vanish.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Use named types for function parameters in the Billing namespace.

.changeset/two-aliens-glow.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react': patch
+---
+
+Prevent props from leaking to child elements in SignUpButton & SignInButton

packages/expo/package.json

@@ -118,8 +118,8 @@
     "expo-modules-core": ">=3.0.0",
     "expo-secure-store": ">=12.4.0",
     "expo-web-browser": ">=12.5.0",
-    "react": "catalog:peer-react",
-    "react-dom": "catalog:peer-react",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "react-native": ">=0.73"
   },
   "peerDependenciesMeta": {

packages/react/src/components/SignInButton.tsx

@@ -8,6 +8,8 @@ import { withClerk } from './withClerk';
 export const SignInButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignInButtonProps>>) => {
     const {
+      // @ts-expect-error - appearance is a valid prop for SignInProps & SignInButtonPropsModal
+      appearance,
       signUpFallbackRedirectUrl,
       forceRedirectUrl,
       fallbackRedirectUrl,
@@ -33,7 +35,7 @@ export const SignInButton = withClerk(
       };
 
       if (mode === 'modal') {
-        return clerk.openSignIn({ ...opts, appearance: props.appearance });
+        return clerk.openSignIn({ ...opts, appearance });
       }
       return clerk.redirectToSignIn({
         ...opts,

packages/react/src/components/SignUpButton.tsx

@@ -8,6 +8,10 @@ import { withClerk } from './withClerk';
 export const SignUpButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {
     const {
+      // @ts-expect-error - appearance is a valid prop for SignUpProps & SignUpButtonPropsModal
+      appearance,
+      // @ts-expect-error - unsafeMetadata is a valid prop for SignUpProps & SignUpButtonPropsModal
+      unsafeMetadata,
       fallbackRedirectUrl,
       forceRedirectUrl,
       signInFallbackRedirectUrl,
@@ -34,8 +38,8 @@ export const SignUpButton = withClerk(
       if (mode === 'modal') {
         return clerk.openSignUp({
           ...opts,
-          appearance: props.appearance,
-          unsafeMetadata: props.unsafeMetadata,
+          appearance,
+          unsafeMetadata,
         });
       }
 

packages/react/src/components/__tests__/SignInButton.test.tsx

@@ -105,4 +105,18 @@ describe('<SignInButton/>', () => {
       );
     }).toThrow();
   });
+
+  it('does not pass appearance prop to child element', () => {
+    const { container } = render(
+      <SignInButton
+        mode='modal'
+        appearance={{ elements: { rootBox: 'test' } }}
+      >
+        <button type='button'>Sign in</button>
+      </SignInButton>,
+    );
+
+    const button = container.querySelector('button');
+    expect(button?.hasAttribute('appearance')).toBe(false);
+  });
 });

packages/react/src/components/__tests__/SignUpButton.test.tsx

@@ -109,4 +109,29 @@ describe('<SignUpButton/>', () => {
       );
     }).toThrow();
   });
+
+  it('does not pass unsafeMetadata prop to child element', () => {
+    const { container } = render(
+      <SignUpButton unsafeMetadata={{ customField: 'test' }}>
+        <button type='button'>Sign up</button>
+      </SignUpButton>,
+    );
+
+    const button = container.querySelector('button');
+    expect(button?.hasAttribute('unsafeMetadata')).toBe(false);
+  });
+
+  it('does not pass appearance prop to child element', () => {
+    const { container } = render(
+      <SignUpButton
+        mode='modal'
+        appearance={{ elements: { rootBox: 'test' } }}
+      >
+        <button type='button'>Sign up</button>
+      </SignUpButton>,
+    );
+
+    const button = container.querySelector('button');
+    expect(button?.hasAttribute('appearance')).toBe(false);
+  });
 });

packages/shared/src/types/billing.ts

@@ -25,35 +25,35 @@ export interface BillingNamespace {
   getPaymentAttempts: (params: GetPaymentAttemptsParams) => Promise<ClerkPaginatedResponse<BillingPaymentResource>>;
 
   /**
-   * Returns details of a specific payment attempt for the current user or supplied organization.
+   * Returns details of a specific payment attempt for the current user or supplied Organization.
    *
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
    */
-  getPaymentAttempt: (params: { id: string; orgId?: string }) => Promise<BillingPaymentResource>;
+  getPaymentAttempt: (params: GetPaymentAttemptParams) => Promise<BillingPaymentResource>;
 
   /**
-   * Returns a list of all publically visible billing plans.
+   * Returns a list of all publically visible Billing Plans.
    *
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
    */
   getPlans: (params?: GetPlansParams) => Promise<ClerkPaginatedResponse<BillingPlanResource>>;
 
   /**
-   * Returns a billing plan by ID.
+   * Returns a Billing Plan by ID.
    *
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
    */
-  getPlan: (params: { id: string }) => Promise<BillingPlanResource>;
+  getPlan: (params: GetPlanParams) => Promise<BillingPlanResource>;
 
   /**
-   * Returns the main billing subscription for the current user or supplied organization.
+   * Returns the main Billing Subscription for the current user or supplied Organization.
    *
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
    */
   getSubscription: (params: GetSubscriptionParams) => Promise<BillingSubscriptionResource>;
 
   /**
-   * Returns a list of billing statements for the current user or supplied organization.
+   * Returns a list of billing statements for the current user or supplied Organization.
    *
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
    */
@@ -64,10 +64,10 @@ export interface BillingNamespace {
    *
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
    */
-  getStatement: (params: { id: string; orgId?: string }) => Promise<BillingStatementResource>;
+  getStatement: (params: GetStatementParams) => Promise<BillingStatementResource>;
 
   /**
-   * Creates a new billing checkout for the current user or supplied organization.
+   * Creates a new billing checkout for the current user or supplied Organization.
    *
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
    */
@@ -122,6 +122,16 @@ export interface BillingPayerMethods {
   ) => Promise<ClerkPaginatedResponse<BillingPaymentMethodResource>>;
 }
 
+/**
+ * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+ */
+export type GetPlanParams = {
+  /**
+   * The ID of the Billing Plan to fetch.
+   */
+  id: string;
+};
+
 /**
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
@@ -444,6 +454,21 @@ export interface BillingPaymentResource extends ClerkResource {
  */
 export type GetPaymentAttemptsParams = WithOptionalOrgType<ClerkPaginationParams>;
 
+/**
+ * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+ */
+export type GetPaymentAttemptParams = { id: string } & WithOptionalOrgType<ClerkPaginationParams>;
+
+/**
+ * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+ */
+export type GetStatementParams = {
+  /**
+   * The ID of the statement to fetch.
+   */
+  id: string;
+} & WithOptionalOrgType<ClerkPaginationParams>;
+
 /**
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
@@ -838,7 +863,7 @@ export interface BillingCheckoutResource extends ClerkResource {
 }
 
 /**
- * The `BillingPayerResource` type represents a payer associated with a billing subscription.
+ * The `BillingPayerResource` type represents a payer associated with a Billing Subscription.
  *
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */