@graphprotocol/gds-react 0.2.2 → 0.2.3

package/src/components/Tooltip.parts.tsx

@@ -123,8 +123,8 @@ export function TooltipRoot({
   const triggerPassedRef = useMergedRefs(
     /**
      * Conditionally setting the ref to force the tooltip to refresh its position when `enabled`
-     * changes, preventing it from moving to the viewport's top-left corner in some cases (e.g. when
-     * `CopyButton` returns to its default tooltip).
+     * changes, preventing it from moving to the top left corner of the viewport in some cases (e.g.
+     * when `CopyButton` returns to its default tooltip).
      */
     enabled ? triggerRef : undefined,
     (passedTriggerProps === 'forward' ? passedRef : passedTriggerProps?.ref) as
@@ -207,10 +207,22 @@ export function TooltipRoot({
               render={children}
               {...renderProps}
               disabled={triggerDisabled}
-              onClick={triggerProps?.onClick} // Prevent the tooltip re-opening after clicking e.g. a `Menu` trigger
+              onClick={triggerProps?.onClick} // Prevent re-opening the tooltip after clicking e.g. a `Menu` trigger
             />
           )}
         />
+        {/* Ensure changes to CSS props are detected even when the tooltip is not mounted */}
+        <Portal>
+          <span
+            ref={cssPropsPolyfillRef}
+            className={cn('gds-tooltip i:invisible i:block', className)}
+            {...cssPropsAttributes}
+            {...cssPropsPolyfillAttributes}
+            {...dirProps}
+            {...popupProps}
+            hidden={undefined}
+          />
+        </Portal>
         <Tooltip.Portal>
           <Tooltip.Positioner
             key={getReactNodeKey(content)} // Refresh the tooltip's position when the content changes (see `WithDynamicContent` story)
@@ -224,9 +236,10 @@ export function TooltipRoot({
             sideOffset={twToPx(cssProps.gap)}
             align={cssProps.align}
             alignOffset={twToPx(cssProps.alignOffset)}
-            collisionPadding={8}
-            disableAnchorTracking // Prevent the tooltip from moving to the viewport's top-left corner when the trigger is unmounted
+            collisionPadding={4}
+            disableAnchorTracking // Feels weird for a tooltip to follow e.g. a pane's X button when closing the pane
             {...dirProps}
+            className="i:data-anchor-hidden:hidden" // Prevent moving to the top left corner when the trigger is hidden or unmounted
           >
             <Tooltip.Popup
               ref={popupRef}
@@ -251,16 +264,6 @@ export function TooltipRoot({
             </Tooltip.Popup>
           </Tooltip.Positioner>
         </Tooltip.Portal>
-        {/* Ensure changes to CSS props are detected even when the tooltip is not mounted */}
-        <Portal>
-          <span
-            ref={cssPropsPolyfillRef}
-            className={cn('gds-tooltip i:invisible', className)}
-            {...cssPropsAttributes}
-            {...cssPropsPolyfillAttributes}
-            {...popupProps}
-          />
-        </Portal>
       </Tooltip.Root>
     </TooltipContext.Provider>
   )

package/src/components/base/ButtonOrLink.parts.tsx

@@ -135,15 +135,12 @@ type WithContextComponent<T extends ElementType> = (
   props: Merge<ComponentProps<T>, ButtonOrLinkRenderElementProps>,
 ) => ReactElement
 
-const memoizedWithContextComponents = new Map<ElementType, WithContextComponent<ElementType>>()
+const memoizedWithContextComponents = new Map<ElementType, unknown>()
 
 function withContext<T extends ElementType>(Element: T): WithContextComponent<T> {
   const cached = memoizedWithContextComponents.get(Element)
-  if (cached) return cached
-  const newWithContextComponent: WithContextComponent<ElementType> = ({
-    buttonOrLinkState,
-    ...props
-  }) => (
+  if (cached) return cached as WithContextComponent<T>
+  const newWithContextComponent: WithContextComponent<T> = ({ buttonOrLinkState, ...props }) => (
     <ButtonOrLinkContext.Provider value={buttonOrLinkState}>
       <Element {...(props as ComponentProps<T>)} />
     </ButtonOrLinkContext.Provider>

package/src/components/index.ts

@@ -34,7 +34,7 @@ export {
 export { DescriptionListItemMeta, DescriptionListMeta } from './DescriptionList.meta.ts'
 export { Divider, type DividerProps } from './Divider.tsx'
 export { DividerMeta } from './Divider.meta.ts'
-export { Icon, type IconProps, type IconPropsWithSrc } from './Icon.tsx'
+export { Icon, type IconProps, type IconSrc, type IconPropsWithSrc } from './Icon.tsx'
 export { IconMeta } from './Icon.meta.ts'
 export { Input, type InputProps, type InputState } from './Input.tsx'
 export { InputMeta } from './Input.meta.ts'