refactor(clerk-js,types): Use RootBox for pricing table components (#5747)

Author: alexcarpenter

.changeset/rich-geckos-strive.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Refactor PricingTable components to use RootBox component for top level element.

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

@@ -7,6 +7,7 @@ import type {
 import { useState } from 'react';
 
 import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
+import { Flow } from '../../customizables';
 import { useFetch } from '../../hooks/useFetch';
 import { FreePlanRow } from './FreePlanRow';
 import { PricingTableDefault } from './PricingTableDefault';
@@ -44,7 +45,12 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
   );
 
   return (
-    <>
+    <Flow.Root
+      flow='pricingTable'
+      sx={{
+        width: '100%',
+      }}
+    >
       <FreePlanRow />
       {mode !== 'modal' && (props as any).layout === 'matrix' ? (
         <PricingTableMatrix
@@ -64,7 +70,7 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
           props={props}
         />
       )}
-    </>
+    </Flow.Root>
   );
 };
 

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

@@ -73,7 +73,7 @@ export function PricingTableMatrix({
   return (
     <InternalThemeProvider>
       <Box
-        elementDescriptor={descriptors.pricingTableMatrixRoot}
+        elementDescriptor={descriptors.pricingTableMatrix}
         sx={t => ({
           position: 'relative',
           minWidth: '100%',

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -264,7 +264,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'pricingTableCardFeePeriodNoticeInner',
   'pricingTableCardFeePeriodNoticeLabel',
 
-  'pricingTableMatrixRoot',
+  'pricingTableMatrix',
   'pricingTableMatrixTable',
   'pricingTableMatrixRowGroup',
   'pricingTableMatrixRowGroupHeader',

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -16,7 +16,8 @@ type FlowMetadata = {
     | 'blankCaptcha'
     | 'waitlist'
     | 'checkout'
-    | 'planDetails';
+    | 'planDetails'
+    | 'pricingTable';
   part?:
     | 'start'
     | 'emailCode'

packages/types/src/appearance.ts

@@ -391,7 +391,7 @@ export type ElementsConfig = {
   pricingTableCardFeePeriodNoticeInner: WithOptions;
   pricingTableCardFeePeriodNoticeLabel: WithOptions;
 
-  pricingTableMatrixRoot: WithOptions;
+  pricingTableMatrix: WithOptions;
   pricingTableMatrixTable: WithOptions;
   pricingTableMatrixRowGroup: WithOptions;
   pricingTableMatrixRowGroupHeader: WithOptions;