remove flatten union

Author: panteliselef

packages/clerk-js/src/ui/Components.tsx

@@ -9,7 +9,6 @@ import type {
   ClerkOptions,
   CreateOrganizationProps,
   EnvironmentResource,
-  FlattenUnionType,
   GoogleOneTapProps,
   OrganizationProfileProps,
   SignInProps,
@@ -113,7 +112,7 @@ export type ComponentControls = {
     props: T extends 'checkout'
       ? __internal_CheckoutProps
       : T extends 'planDetails'
-        ? FlattenUnionType<__internal_PlanDetailsProps>
+        ? __internal_PlanDetailsProps
         : T extends 'subscriptionDetails'
           ? __internal_SubscriptionDetailsProps
           : never,
@@ -162,7 +161,7 @@ interface ComponentsState {
   };
   planDetailsDrawer: {
     open: false;
-    props: null | FlattenUnionType<__internal_PlanDetailsProps>;
+    props: null | __internal_PlanDetailsProps;
   };
   subscriptionDetailsDrawer: {
     open: false;

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -4,7 +4,6 @@ import type {
   ClerkAPIResponseError,
   CommercePlanResource,
   CommerceSubscriptionPlanPeriod,
-  FlattenUnionType,
 } from '@clerk/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
@@ -29,7 +28,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 
-export const PlanDetails = (props: FlattenUnionType<__internal_PlanDetailsProps>) => {
+export const PlanDetails = (props: __internal_PlanDetailsProps) => {
   return (
     <Drawer.Content>
       <PlanDetailsInternal {...props} />
@@ -74,7 +73,7 @@ const PlanDetailsInternal = ({
   planId,
   plan: initialPlan,
   initialPlanPeriod = 'month',
-}: FlattenUnionType<__internal_PlanDetailsProps>) => {
+}: __internal_PlanDetailsProps) => {
   const clerk = useClerk();
   const [planPeriod, setPlanPeriod] = useState<CommerceSubscriptionPlanPeriod>(initialPlanPeriod);
 

packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx

@@ -1,5 +1,5 @@
 import { useUser } from '@clerk/shared/react';
-import type { __internal_PlanDetailsProps, Appearance, FlattenUnionType } from '@clerk/types';
+import type { __internal_PlanDetailsProps, Appearance } from '@clerk/types';
 
 import { PlanDetails } from './components';
 import { LazyDrawerRenderer } from './providers';
@@ -13,7 +13,7 @@ export function MountedPlanDetailDrawer({
   onOpenChange: (open: boolean) => void;
   planDetailsDrawer: {
     open: false;
-    props: null | FlattenUnionType<__internal_PlanDetailsProps>;
+    props: null | __internal_PlanDetailsProps;
   };
 }) {
   const { user } = useUser();

packages/clerk-js/src/ui/lazyModules/providers.tsx

@@ -76,7 +76,7 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
     >
       <Portal
         node={props.node}
-        component={ClerkComponents[props.componentName as ClerkComponentName]}
+        component={ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<any>}
         props={props.componentProps}
         componentName={props.componentName}
       />

packages/react/src/components/PlanDetailsButton.tsx

@@ -35,14 +35,7 @@ import { withClerk } from './withClerk';
  */
 export const PlanDetailsButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
-    const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props as any;
-
-    const planDetails = {
-      plan,
-      planId,
-      initialPlanPeriod,
-      ...planDetailsProps,
-    } as __experimental_PlanDetailsButtonProps;
+    const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
 
     children = normalizeWithDefaultValue(children, 'Plan details');
     const child = assertSingleChild(children)('PlanDetailsButton');
@@ -52,7 +45,12 @@ export const PlanDetailsButton = withClerk(
         return;
       }
 
-      return clerk.__internal_openPlanDetails(planDetails);
+      return clerk.__internal_openPlanDetails({
+        plan,
+        planId,
+        initialPlanPeriod,
+        ...planDetailsProps,
+      } as __experimental_PlanDetailsButtonProps);
     };
 
     const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1889,12 +1889,14 @@ export type __experimental_CheckoutButtonProps = {
 export type __internal_PlanDetailsProps = (
   | {
       planId: string;
+      plan?: never;
     }
   | {
       /**
        * The plan object will be used as initial data until the plan is fetched from the server.
        */
       plan: CommercePlanResource;
+      planId?: never;
     }
 ) & {
   appearance?: PlanDetailTheme;
@@ -1916,12 +1918,14 @@ export type __internal_PlanDetailsProps = (
 export type __experimental_PlanDetailsButtonProps = (
   | {
       planId: string;
+      plan?: never;
     }
   | {
       /**
        * The plan object will be used as initial data until the plan is fetched from the server.
        */
       plan: CommercePlanResource;
+      planId?: never;
     }
 ) & {
   initialPlanPeriod?: CommerceSubscriptionPlanPeriod;

packages/types/src/utils.ts

@@ -113,35 +113,3 @@ export type Without<T, W> = {
  * Value contains: { a:string, b: string }
  */
 export type Override<T, U> = Omit<T, keyof U> & U;
-
-// Converts a union of two types into an intersection
-// i.e. A | B -> A & B
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-
-type FlattenUnionTypeInternal<T> = {
-  [K in keyof UnionToIntersection<T>]: K extends keyof T
-    ? T[K] extends any[]
-      ? T[K]
-      : T[K] extends object
-        ? FlattenUnionType<T[K]>
-        : T[K]
-    : UnionToIntersection<T>[K] | undefined;
-};
-
-// Convert properties with `| undefined` to optional properties
-type UndefinedToOptional<T> = {
-  [K in keyof T as undefined extends T[K] ? K : never]?: Exclude<T[K], undefined>;
-} & {
-  [K in keyof T as undefined extends T[K] ? never : K]: T[K];
-};
-
-/**
- * Flattens a union type into a single type with all properties, making union properties optional.
- *
- * @example
- * type A = { a: number; c: number };
- * type B = { b: string; c: number };
- * type Result = FlattenUnionType<A | B>;
- * // Result: { a?: number; b?: string; c: number }
- */
-export type FlattenUnionType<T> = UndefinedToOptional<FlattenUnionTypeInternal<T>>;