feat(system): add ref to popover and tooltip triggers

packages/status-react/src/system/popover/popover.tsx

@@ -1,40 +1,45 @@
-import React, { forwardRef } from 'react'
+import React, { cloneElement, forwardRef } from 'react'
 
 import * as Primitive from '@radix-ui/react-popover'
 
 import { Content } from './styles'
 
+import type { PopoverContentProps } from '@radix-ui/react-popover'
+import type { Ref } from 'react'
+
 interface TriggerProps {
   children: [React.ReactElement, React.ReactElement]
 }
 
-const PopoverTrigger = (props: TriggerProps) => {
+const PopoverTrigger = (props: TriggerProps, ref: Ref<HTMLButtonElement>) => {
-  const { children } = props
+  const { children, ...triggerProps } = props
 
   const [trigger, content] = children
 
   return (
     <Primitive.Root>
-      <Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
+      <Primitive.Trigger asChild>
+        {cloneElement(trigger, { ref, ...triggerProps })}
+      </Primitive.Trigger>
       {content}
     </Primitive.Root>
   )
 }
 
-interface PopoverProps {
+const _PopoverTrigger = forwardRef(PopoverTrigger)
+
+interface PopoverProps extends PopoverContentProps {
   children: React.ReactNode
 }
 
-const Popover = (props: PopoverProps, ref) => {
+const Popover = (props: PopoverProps) => {
-  const { children } = props
+  const { children, ...contentProps } = props
 
   return (
-    <Content as={Primitive.Content} portalled={true} ref={ref}>
+    <Content as={Primitive.Content} {...contentProps}>
       {children}
     </Content>
   )
 }
 
-const _Popover = forwardRef(Popover)
+export { Popover, _PopoverTrigger as PopoverTrigger }
-
-export { _Popover as Popover, PopoverTrigger }

packages/status-react/src/system/tooltip/tooltip.tsx

@@ -1,24 +1,33 @@
-import React from 'react'
+import React, { cloneElement, forwardRef } from 'react'
 
 import * as Primitive from '@radix-ui/react-tooltip'
 
 import { Arrow, Content } from './styles'
 
 import type { TooltipContentProps } from '@radix-ui/react-tooltip'
+import type { Ref } from 'react'
 
 interface Props {
   label: string
-  children: React.ReactNode
+  children: React.ReactElement
   side?: TooltipContentProps['side']
   sideOffset?: TooltipContentProps['sideOffset']
 }
 
-const Tooltip = (props: Props) => {
+const Tooltip = (props: Props, ref: Ref<HTMLButtonElement>) => {
-  const { children, label, side = 'top', sideOffset = 5 } = props
+  const {
+    children,
+    label,
+    side = 'top',
+    sideOffset = 5,
+    ...triggerProps
+  } = props
 
   return (
     <Primitive.Root delayDuration={500}>
-      <Primitive.Trigger asChild>{children}</Primitive.Trigger>
+      <Primitive.Trigger asChild>
+        {cloneElement(children, { ref, ...triggerProps })}
+      </Primitive.Trigger>
       <Content side={side} sideOffset={sideOffset}>
         {label}
         <Arrow />
@@ -27,5 +36,7 @@ const Tooltip = (props: Props) => {
   )
 }
 
-export { Tooltip }
+const _Tooltip = forwardRef(Tooltip)
+
+export { _Tooltip as Tooltip }
 export type { Props as TooltipProps }