chore(clerk-js,types): Add drawer root descriptor (#5924)

Author: alexcarpenter

.changeset/mighty-forks-joke.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add `drawerRoot` descriptor and adjust z-index approach.

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

@@ -106,6 +106,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'dividerLine',
 
   'drawerBackdrop',
+  'drawerRoot',
   'drawerContent',
   'drawerHeader',
   'drawerTitle',

packages/clerk-js/src/ui/elements/Drawer.tsx

@@ -222,15 +222,20 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
       outsideElementsInert
       initialFocus={refs.floating}
     >
-      <div
+      <Box
         ref={mergedRefs}
         {...getFloatingProps()}
-        style={{
+        sx={t => ({
           position: strategy,
           insetBlock: 0,
           insetInline: 0,
           pointerEvents: 'none',
-        }}
+          isolation: 'isolate',
+          // When drawer is within the profile components, we need to ensure it is above the drawer
+          // renders above the profile close button
+          zIndex: strategy === 'absolute' ? t.zIndices.$modal : undefined,
+        })}
+        elementDescriptor={descriptors.drawerRoot}
       >
         <Flex
           elementDescriptor={descriptors.drawerContent}
@@ -260,13 +265,12 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
             borderColor: t.colors.$neutralAlpha100,
             boxShadow: t.shadows.$cardBoxShadow,
             overflow: 'hidden',
-            zIndex: t.zIndices.$modal,
             pointerEvents: 'auto',
           })}
         >
           {children}
         </Flex>
-      </div>
+      </Box>
     </FloatingFocusManager>
   );
 });

packages/clerk-js/src/ui/elements/Switch.tsx

@@ -34,6 +34,7 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
         align='center'
         as='label'
         sx={t => ({
+          isolation: 'isolate',
           width: 'fit-content',
           '&:has(input:focus-visible) > input + span': {
             ...common.focusRingStyles(t),

packages/types/src/appearance.ts

@@ -225,6 +225,7 @@ export type ElementsConfig = {
   dividerLine: WithOptions;
 
   drawerBackdrop: WithOptions;
+  drawerRoot: WithOptions;
   drawerContent: WithOptions;
   drawerHeader: WithOptions;
   drawerTitle: WithOptions;