feat: z-indexed tooltips

Author: shiftpsh

src/components/Select.tsx

@@ -27,7 +27,7 @@ import React, {
   useImperativeHandle,
   useLayoutEffect,
   useRef,
-  useState,
+  useState
 } from 'react'
 import { PP, PR } from '../types/PolymorphicElementProps'
 import { Timeout } from '../types/Timeout'
@@ -327,23 +327,25 @@ export const Select = forwardRefWithGenerics(
                               ? theme.color.background.card.main
                               : undefined
                           }
-                          style={{
-                            ...(disableEllipsis
-                              ? {}
-                              : {
-                                  textOverflow: 'ellipsis',
-                                  overflow: 'hidden',
-                                  whiteSpace: 'nowrap',
-                                }),
-                            ...(ListItemProps?.style || {}),
-                            fontWeight: i === selectedIndex ? 'bold' : 'normal',
-                          }}
                           ref={(node) => {
                             listRef.current[i] = node
                             listContentRef.current[i] =
                               typeof item === 'string' ? item : item.value
                           }}
                           {...getItemProps({
+                            ...ListItemProps,
+                            style: {
+                              ...(disableEllipsis
+                                ? {}
+                                : {
+                                    textOverflow: 'ellipsis',
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                  }),
+                              ...(ListItemProps?.style || {}),
+                              fontWeight:
+                                i === selectedIndex ? 'bold' : 'normal',
+                            },
                             onTouchStart() {
                               allowSelectRef.current = true
                               allowMouseUpRef.current = false
@@ -374,7 +376,6 @@ export const Select = forwardRefWithGenerics(
                               })
                             },
                           })}
-                          {...ListItemProps}
                         >
                           {render(item)}
                         </ListItem>

src/components/Tooltip.tsx

@@ -73,6 +73,7 @@ export type TooltipProps = {
   activateOnHover?: boolean
   activateOnClick?: boolean
   noThemeChange?: boolean
+  zIndex?: number
 } & (
   | {
       noDefaultStyles: false
@@ -131,6 +132,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     activateOnHover = true,
     activateOnClick = false,
     noThemeChange = false,
+    zIndex,
     ...cardProps
   } = props
   const [isOpen, setIsOpen] = useState(false)
@@ -200,14 +202,16 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
                 <RenderComponent
                   ref={refs.setFloating}
                   {...getFloatingProps({
+                    ...(cardProps || {}),
                     style: {
+                      ...('style' in cardProps ? cardProps.style || {} : {}),
                       position: strategy,
                       top: y || 0,
                       left: x || 0,
                       pointerEvents: interactive ? 'auto' : 'none',
+                      zIndex,
                     },
                   })}
-                  {...cardProps}
                   transition={{ duration: 0.2, ease: 'easeInOut' }}
                   initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}