restore portals and drop zIndex

clerk · Sep 18, 2024 · 4d5a871 · 4d5a871
1 parent 3d7a9c5
commit 4d5a871
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 12 deletions.
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -36,7 +36,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           transitionProperty: t.transitionProperty.$common,
           transitionDuration: '200ms',
           textAlign: 'center',
-          zIndex: t.zIndices.$card,
+          // zIndex: t.zIndices.$card,
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
           borderColor: t.colors.$neutralAlpha50,
@@ -67,7 +67,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           }
           sx={t => ({
             color: t.colors.$colorTextSecondary,
-            zIndex: t.zIndices.$modal,
+            // zIndex: t.zIndices.$modal,
             position: 'absolute',
             top: t.space.$2,
             right: t.space.$2,

diff --git a/packages/clerk-js/src/ui/elements/Menu.tsx b/packages/clerk-js/src/ui/elements/Menu.tsx
@@ -86,7 +86,7 @@ type MenuListProps = PropsOfComponent<typeof Col> & {
 };
 
 export const MenuList = (props: MenuListProps) => {
-  const { sx, asPortal = false, ...rest } = props;
+  const { sx, asPortal = true, ...rest } = props;
   const { popoverCtx, elementId } = useMenuState();
   const { floating, styles, isOpen, context, nodeId } = popoverCtx;
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -139,7 +139,6 @@ export const MenuList = (props: MenuListProps) => {
             animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
             transformOrigin: 'top center',
             boxShadow: t.shadows.$menuShadow,
-            zIndex: t.zIndices.$dropdown,
             gap: t.space.$0x5,
           }),
           sx,

diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx
@@ -55,7 +55,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
           sx={[
             t => ({
               animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`,
-              zIndex: t.zIndices.$modal,
+              // zIndex: t.zIndices.$modal,
               backgroundColor: t.colors.$modalBackdrop,
               alignItems: 'flex-start',
               justifyContent: 'center',

diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -215,7 +215,9 @@ const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<R
           top: 0,
           bottom: 0,
           width: '100%',
-          zIndex: t.zIndices.$navbar,
+          // z-index is mandatory in order to display the mobile menu over any other sibling with position="relative"
+          zIndex: t.zIndices.$forceAgainstRelativeSiblings,
+          // zIndex: t.zIndices.$navbar,
           overflow: 'hidden',
           color: t.colors.$colorText,
         })}

diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -83,6 +83,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
       })}
     >
       <Select
+        portal
         elementId='countryCode'
         value={selectedCountryOption.value}
         options={countryOptions}

diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -19,7 +19,7 @@ const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof
         sx={t => ({
           width: t.sizes.$94,
           maxWidth: `calc(100vw - ${t.sizes.$8})`,
-          zIndex: t.zIndices.$modal,
+          // zIndex: t.zIndices.$modal,
           borderRadius: t.radii.$xl,
           animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$fast}`,
           outline: 'none',
@@ -41,7 +41,7 @@ const PopoverCardContent = (props: PropsOfComponent<typeof Flex>) => {
           backgroundColor: t.colors.$colorBackground,
           overflow: 'hidden',
           borderRadius: t.radii.$lg,
-          zIndex: t.zIndices.$card,
+          // zIndex: t.zIndices.$card,
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
           borderColor: t.colors.$neutralAlpha50,

diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx
@@ -40,7 +40,9 @@ export const ProfileCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent
               top: t.space.$none,
               right: t.space.$none,
             },
-            zIndex: t.zIndices.$modal,
+            // z-index is mandatory in order to display the mobile menu over any other sibling with position="relative"
+            zIndex: t.zIndices.$forceAgainstRelativeSiblings,
+            // zIndex: 1, // t.zIndices.$modal
             position: 'absolute',
             top: t.space.$2,
             right: t.space.$2,

diff --git a/packages/clerk-js/src/ui/elements/Section.tsx b/packages/clerk-js/src/ui/elements/Section.tsx
@@ -295,6 +295,7 @@ export const ProfileSectionActionMenu = (props: ProfileSectionActionMenuProps) =
           />
         </MenuTrigger>
         <MenuList
+          asPortal={false}
           sx={t => ({
             width: '100%',
             padding: t.space.$1,

diff --git a/packages/clerk-js/src/ui/elements/Select.tsx b/packages/clerk-js/src/ui/elements/Select.tsx
@@ -323,7 +323,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
             animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,
             transformOrigin: 'top center',
             boxShadow: theme.shadows.$menuShadow,
-            zIndex: theme.zIndices.$dropdown,
+            // zIndex: theme.zIndices.$dropdown,
           }),
           sx,
         ]}

diff --git a/packages/clerk-js/src/ui/foundations/zIndices.ts b/packages/clerk-js/src/ui/foundations/zIndices.ts
@@ -1,7 +1,8 @@
 export const zIndices = Object.freeze({
+  forceAgainstRelativeSiblings: 1,
   card: '10',
   navbar: '100',
   fab: '9000',
-  dropdown: '9900',
-  modal: '10000',
+  // dropdown: '9900',
+  // modal: '10000',
 } as const);