fix(clerk-js,types): Exclude matrix variant from the public api (#5724)

Author: panteliselef

.changeset/clean-doodles-thank.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Exclude matrix variant of `<PricingTable />`.

packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx

@@ -43,13 +43,13 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
 
   return (
     <>
-      {mode !== 'modal' && props.layout === 'matrix' ? (
+      {mode !== 'modal' && (props as any).layout === 'matrix' ? (
         <PricingTableMatrix
           plans={plans || []}
           planPeriod={planPeriod}
           setPlanPeriod={setPlanPeriod}
           onSelect={selectPlan}
-          highlightedPlan={props.highlightPlan}
+          highlightedPlan={(props as any).highlightPlan}
         />
       ) : (
         <PricingTableDefault

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

@@ -100,9 +100,8 @@ interface CardProps {
 
 function Card(props: CardProps) {
   const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;
-  const isDefaultLayout = pricingTableProps.layout === 'default';
-  const ctaPosition = (isDefaultLayout && pricingTableProps.ctaPosition) || 'top';
-  const collapseFeatures = (isDefaultLayout && pricingTableProps.collapseFeatures) || false;
+  const ctaPosition = pricingTableProps.ctaPosition || 'top';
+  const collapseFeatures = pricingTableProps.collapseFeatures || false;
   const { id, slug, isDefault, features } = plan;
   const totalFeatures = features.length;
   const hasFeatures = totalFeatures > 0;

packages/types/src/clerk.ts

@@ -1561,23 +1561,17 @@ export type WaitlistProps = {
 export type WaitlistModalProps = WaitlistProps;
 
 type __experimental_PricingTableDefaultProps = {
-  layout?: 'default';
   ctaPosition?: 'top' | 'bottom';
   collapseFeatures?: boolean;
 };
 
-type __experimental_PricingTableMatrixProps = {
-  layout?: 'matrix';
-  highlightPlan?: string;
-};
-
 type __experimental_PricingTableBaseProps = {
   appearance?: PricingTableTheme;
   checkoutProps?: Pick<__experimental_CheckoutProps, 'appearance'>;
 };
 
 export type __experimental_PricingTableProps = __experimental_PricingTableBaseProps &
-  (__experimental_PricingTableDefaultProps | __experimental_PricingTableMatrixProps);
+  __experimental_PricingTableDefaultProps;
 
 export type __experimental_CheckoutProps = {
   appearance?: CheckoutTheme;