fix(react): align Tooltip and Popover apis, fix forwardRef (#271)

* fix(react): align Tooltip and Popover implementations, fix forwardRef warning * chore(change): add change * chore: update Datefield
jonambas · May 28, 2024 · 9c127e4 · 9c127e4
1 parent e087840
commit 9c127e4
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 102 deletions.
diff --git a/.changeset/rich-ads-tease.md b/.changeset/rich-ads-tease.md
@@ -0,0 +1,5 @@
+---
+'@sweatpants/react': patch
+---
+
+Fix forwardRef warning, align Popover and Tooltip APIs
diff --git a/libra/components/Popover.libra.tsx b/libra/components/Popover.libra.tsx
@@ -4,21 +4,21 @@ import { Button, Popover, Text } from '../../packages/react/src';
 directory('Popover', () => {
   add('Default', () => {
     return (
-      <Popover defaultOpen>
+      <Popover.Root defaultOpen>
         <Popover.Trigger>
           <Button>Open</Button>
         </Popover.Trigger>
         <Popover.Content>
           <Text>Content</Text>
         </Popover.Content>
-      </Popover>
+      </Popover.Root>
     );
   });
 
   add('Controlled', () => {
     const [open, setOpen] = useState(false);
     return (
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.Trigger>
           <Button>Open</Button>
         </Popover.Trigger>
@@ -28,7 +28,7 @@ directory('Popover', () => {
             <Button onClick={() => setOpen(false)}>Close</Button>
           </Text>
         </Popover.Content>
-      </Popover>
+      </Popover.Root>
     );
   });
 });
diff --git a/packages/react/src/date-field/DateField.tsx b/packages/react/src/date-field/DateField.tsx
@@ -115,7 +115,7 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
     };
 
     return (
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.Trigger>
           <TextField
             align={align}
@@ -145,7 +145,7 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
             {...datePickerProps}
           />
         </Popover.Content>
-      </Popover>
+      </Popover.Root>
     );
   },
 );

diff --git a/packages/react/src/popover/popover.tsx b/packages/react/src/popover/popover.tsx
@@ -1,37 +1,20 @@
 'use client';
 
-import {
-  createContext,
-  forwardRef,
-  ForwardRefExoticComponent,
-  useContext,
-  useState,
-  type FC,
-} from 'react';
+import { createContext, useContext, useState, type FC } from 'react';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { motion, AnimatePresence } from 'framer-motion';
 import { css, cx } from '@styles/css';
 import { Card } from '../card/Card';
 
 const PopoverContext = createContext<{ open?: boolean }>({});
 
-const Trigger: FC<RadixPopover.PopoverTriggerProps> = ({
-  children,
-  ...rest
-}) => {
-  return (
-    <RadixPopover.Trigger asChild {...rest}>
-      {children}
-    </RadixPopover.Trigger>
-  );
-};
-
 const Content: FC<RadixPopover.PopoverContentProps> = ({
   children,
   className,
   ...rest
 }) => {
   const context = useContext(PopoverContext);
+
   return (
     <AnimatePresence>
       {context.open ?
@@ -76,43 +59,44 @@ const Content: FC<RadixPopover.PopoverContentProps> = ({
   );
 };
 
-const Popover = forwardRef<HTMLDivElement, RadixPopover.PopoverProps>(
-  (props) => {
-    const {
-      children,
-      open: controlledOpen,
-      defaultOpen,
-      onOpenChange,
-      ...rest
-    } = props;
+const Root: FC<RadixPopover.PopoverProps> = (props) => {
+  const {
+    children,
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    ...rest
+  } = props;
 
-    const [open, setOpen] = useState(defaultOpen ?? controlledOpen ?? false);
+  const [open, setOpen] = useState(defaultOpen ?? controlledOpen ?? false);
 
-    const handleOpenChange = (value: boolean) => {
-      setOpen(value);
-      onOpenChange?.(value);
-    };
+  const handleOpenChange = (value: boolean) => {
+    setOpen(value);
+    onOpenChange?.(value);
+  };
 
-    const finalOpen = controlledOpen ?? open;
+  const finalOpen = controlledOpen ?? open;
 
-    return (
-      <PopoverContext.Provider value={{ open: finalOpen }}>
-        <RadixPopover.Root
-          open={finalOpen}
-          onOpenChange={handleOpenChange}
-          {...rest}
-        >
-          {children}
-        </RadixPopover.Root>
-      </PopoverContext.Provider>
-    );
-  },
-) as ForwardRefExoticComponent<RadixPopover.PopoverProps> & {
-  Trigger: typeof Trigger;
-  Content: typeof Content;
+  return (
+    <PopoverContext.Provider value={{ open: finalOpen }}>
+      <RadixPopover.Root
+        open={finalOpen}
+        onOpenChange={handleOpenChange}
+        {...rest}
+      >
+        {children}
+      </RadixPopover.Root>
+    </PopoverContext.Provider>
+  );
 };
 
-Popover.Trigger = Trigger;
-Popover.Content = Content;
+Root.displayName = 'Popover.Root';
+Content.displayName = 'Popover.Content';
 
-export { Popover };
+export const Popover = {
+  Root,
+  Content,
+  Trigger: RadixPopover.Trigger,
+  Close: RadixPopover.Close,
+  Portal: RadixPopover.Portal,
+};
diff --git a/packages/react/src/tooltip/tooltip.tsx b/packages/react/src/tooltip/tooltip.tsx
@@ -4,7 +4,6 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
 import {
   createContext,
   type FC,
-  forwardRef,
   type PropsWithChildren,
   useContext,
   useState,
@@ -61,51 +60,41 @@ export interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
   hideArrow?: boolean;
 }
 
-const Content = forwardRef<HTMLDivElement, TooltipContentProps>(
-  (props, userRef) => {
-    const { children, hideArrow = false, size = 'md', ...rest } = props;
-    const context = useContext(TooltipContext);
+const Content: FC<TooltipContentProps> = (props) => {
+  const { children, hideArrow = false, size = 'md', ...rest } = props;
+  const context = useContext(TooltipContext);
 
-    return (
-      <AnimatePresence>
-        {context.open ?
-          <RadixTooltip.Content
-            arrowPadding={3}
-            {...rest}
-            asChild
-            ref={userRef}
-            aria-hidden
+  return (
+    <AnimatePresence>
+      {context.open ?
+        <RadixTooltip.Content arrowPadding={3} {...rest} asChild aria-hidden>
+          <motion.div
+            transition={{ duration: 0.1, ease: 'easeInOut' }}
+            initial={{
+              opacity: 0,
+              transform: 'scale(0.9)',
+            }}
+            animate={{
+              opacity: 1,
+              transform: 'scale(1)',
+            }}
           >
-            <motion.div
-              transition={{ duration: 0.1, ease: 'easeInOut' }}
-              initial={{
-                opacity: 0,
-                transform: 'scale(0.9)',
-              }}
-              animate={{
-                opacity: 1,
-                transform: 'scale(1)',
-              }}
-            >
-              {!hideArrow ?
-                <RadixTooltip.Arrow
-                  width={10}
-                  height={3}
-                  className={css({
-                    fill: { base: 'gray12', _dark: 'white' },
-                  })}
-                />
-              : null}
-              <div className={contentStyles({ size, hideArrow })}>
-                {children}
-              </div>
-            </motion.div>
-          </RadixTooltip.Content>
-        : null}
-      </AnimatePresence>
-    );
-  },
-);
+            {!hideArrow ?
+              <RadixTooltip.Arrow
+                width={10}
+                height={3}
+                className={css({
+                  fill: { base: 'gray12', _dark: 'white' },
+                })}
+              />
+            : null}
+            <div className={contentStyles({ size, hideArrow })}>{children}</div>
+          </motion.div>
+        </RadixTooltip.Content>
+      : null}
+    </AnimatePresence>
+  );
+};
 
 const Root: FC<RadixTooltip.TooltipProps> = (props) => {
   const {