@graphprotocol/gds-react 0.2.0 → 0.2.2

package/src/components/Button.tsx

@@ -87,117 +87,123 @@ export function Button({
   const replaceChildrenWithLoading = loading && !addonBefore && !addonAfter
 
   return (
-    <Tooltip {...(isReactNode(tooltip) ? { content: tooltip } : tooltip)}>
-      <ButtonOrLink
-        ref={cssPropsPolyfillStatePassedRef}
-        disabled={disabled || (loading ? 'focusable' : false)}
-        aria-busy={loading || undefined}
-        data-variant={cssProps.variant}
-        data-hide-label={cssProps.hideLabel || undefined}
-        className={cn(
-          `gds-button root-flex flex-col u:size-max u:max-w-full u:outline-0
-          u:checked:state-checked
-          u:hover:state-hover
-          u:focus-visible:state-focus
-          u:active:state-active
-          u:disabled:state-disabled
-          u:disabled:state-idle
-          ${/* Determine whether the button is "addon-only" (`0` means no and `auto` means yes; we can improve this when `if()` is supported, e.g. `min-w-[if(style(--gds-state-addon-only):auto;else:0)]`) */ ''}
-          state-[addon-only=0]
-          data-hide-label:state-[addon-only=auto]
-          not-has-nested/button-children:state-[addon-only=auto]
-          has-nested-has-addon-compatible-only/button-children:state-[addon-only=auto]
-          ${/* Ensure an addon-only button does not get squished in a flex container (like a button group) */ ''}
-          u:min-w-(--gds-state-addon-only)
-          ${/* Ensure a button in a horizontal button group grows by default, except if it is addon-only */ ''}
-          u:@prop-orientation-horizontal/button-group:has-nested-not-has-addon-compatible-only/button-children:grow
-          ${/* But if the button group is `fullWidth`, then all the buttons it contains should be equal width, regardless of their content */ ''}
-          u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:grow
-          u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:basis-0
-          ${/* In a button group, the group itself should be the stacking context */ ''}
-          u:in-button-group:isolation-auto
-          ${/* Extend the tap area of a naked button */ ''}
-          data-[variant=naked]:before:absolute
-          data-[variant=naked]:before:-inset-2`,
-          className,
-        )}
-        {...state.polyfillAttributes}
-        {...getCSSPropsAttributes(ButtonMeta, { variant, size, hideLabel }, style)}
-        {...cssPropsPolyfillAttributes}
-        {...props}
-      >
-        {/* Prevent the extended tap area of a naked button from overlapping the tap area of another naked button in the same group */}
-        <span
-          className={`
-            absolute inset-[calc(-1*var(--gds-button-group-gap)/2)] z-10
-            not-in-button-group:hidden
-            @prop-not-variant-naked/button:hidden
-          `}
-        />
-        <span
-          className={`
-            nested/button-paint pointer-events-none flex h-(--height) max-w-full min-w-full grow items-center justify-center
-            rounded-(--gds-button-radius) border-(length:--border-width) border-(--gds-button-border)
-            bg-(--gds-button-bg) text-(--gds-button-fg) transition [--border-width:1px]
-            @state-[addon-only=auto]/button:w-(--height)
-            @prop-variant-naked/button:transition-[color]
-            @prop-variant-naked/button:[--border-width:0px]
-            @prop-size-xsmall/button:px-1.25
-            @prop-size-xsmall/button:text-12
-            @prop-size-xsmall/button:[--height:--spacing(7)]
-            @prop-size-small/button:px-1.75
-            @prop-size-small/button:text-12
-            @prop-size-small/button:[--height:--spacing(8)]
-            @prop-size-medium/button:px-1.75
-            @prop-size-medium/button:text-14
-            @prop-size-medium/button:[--height:--spacing(10)]
-            @prop-size-large/button:px-2.75
-            @prop-size-large/button:text-16
-            @prop-size-large/button:[--height:--spacing(12)]
-            u:*:transition-opacity
-            u:*:@state-disabled/button:opacity-disabled
-            u:*:@state-disabled/button:grayscale
-            u:@prop-size-xsmall/button:addon-small
-            u:@prop-size-small/button:addon-small
-            u:@prop-size-medium/button:addon-medium
-            u:@prop-size-large/button:addon-large
-            i:@state-active/button:transition-none
-            i:@prop-variant-naked/button:px-0
-            i:@prop-variant-naked/button:[--height:1lh]
-          `}
+    <ButtonOrLink
+      ref={cssPropsPolyfillStatePassedRef}
+      disabled={disabled || (loading ? 'focusable' : false)}
+      aria-busy={loading || undefined}
+      data-variant={cssProps.variant}
+      data-hide-label={cssProps.hideLabel || undefined}
+      className={cn(
+        `gds-button root-flex flex-col u:size-max u:max-w-full u:outline-0
+        u:checked:state-checked
+        u:hover:state-hover
+        u:focus-visible:state-focus
+        u:active:state-active
+        u:disabled:state-disabled
+        u:disabled:state-idle
+        ${/* Determine whether the button is "addon-only" (`0` means no and `auto` means yes; we can improve this when `if()` is supported, e.g. `min-w-[if(style(--gds-state-addon-only):auto;else:0)]`) */ ''}
+        state-[addon-only=0]
+        data-hide-label:state-[addon-only=auto]
+        not-has-nested/button-children:state-[addon-only=auto]
+        has-nested-has-addon-compatible-only/button-children:state-[addon-only=auto]
+        ${/* Ensure an addon-only button does not get squished in a flex container (like a button group) */ ''}
+        u:min-w-(--gds-state-addon-only)
+        ${/* Ensure a button in a horizontal button group grows by default, except if it is addon-only */ ''}
+        u:@prop-orientation-horizontal/button-group:has-nested-not-has-addon-compatible-only/button-children:grow
+        ${/* But if the button group is `fullWidth`, then all the buttons it contains should be equal width, regardless of their content */ ''}
+        u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:grow
+        u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:basis-0
+        ${/* In a button group, the group itself should be the stacking context */ ''}
+        u:in-button-group:isolation-auto
+        ${/* Extend the tap area of a naked button */ ''}
+        data-[variant=naked]:before:absolute
+        data-[variant=naked]:before:-inset-2`,
+        className,
+      )}
+      {...state.polyfillAttributes}
+      {...getCSSPropsAttributes(ButtonMeta, { variant, size, hideLabel }, style)}
+      {...cssPropsPolyfillAttributes}
+      {...props}
+      render={(renderProps, { Element, elementProps }) => (
+        <Tooltip
+          {...(isReactNode(tooltip) ? { content: tooltip } : tooltip)}
+          triggerProps={renderProps}
         >
-          {/* Focus ring (rendered separately for better spacing in naked buttons) */}
-          <span
-            className={`
-              absolute -inset-px rounded-inherit opacity-100 filter-none
-              @state-focus/button:outline
-              @prop-variant-naked/button:-inset-0.5
-            `}
-          />
-          {addonBefore ? <ButtonAddon side="before">{addonBefore}</ButtonAddon> : null}
-          {children ? (
+          <Element {...elementProps}>
+            {/* Prevent the extended tap area of a naked button from overlapping the tap area of another naked button in the same group */}
+            <span
+              className={`
+                absolute inset-[calc(-1*var(--gds-button-group-gap)/2)] z-10
+                not-in-button-group:hidden
+                @prop-not-variant-naked/button:hidden
+              `}
+            />
             <span
-              data-loading={replaceChildrenWithLoading || undefined}
-              className={cn(
-                `nested/button-children
-                truncate
-                data-loading:invisible
-                @prop-hide-label-true/button:not-has-addon-compatible:sr-only
-                u:@prop-size-xsmall/button:px-0.5
-                u:@prop-size-small/button:px-0.5
-                u:@prop-size-medium/button:px-1
-                u:@prop-size-large/button:px-1
-                u:i:@state-[addon-only=auto]/button:px-0`,
-              )}
+              className={`
+                nested/button-paint pointer-events-none flex h-(--height) max-w-full min-w-full grow items-center justify-center
+                rounded-(--gds-button-radius) border-(length:--border-width) border-(--gds-button-border)
+                bg-(--gds-button-bg) text-(--gds-button-fg) transition [--border-width:1px]
+                @state-[addon-only=auto]/button:w-(--height)
+                @prop-variant-naked/button:transition-[color]
+                @prop-variant-naked/button:[--border-width:0px]
+                @prop-size-xsmall/button:px-1.25
+                @prop-size-xsmall/button:text-12
+                @prop-size-xsmall/button:[--height:--spacing(7)]
+                @prop-size-small/button:px-1.75
+                @prop-size-small/button:text-12
+                @prop-size-small/button:[--height:--spacing(8)]
+                @prop-size-medium/button:px-1.75
+                @prop-size-medium/button:text-14
+                @prop-size-medium/button:[--height:--spacing(10)]
+                @prop-size-large/button:px-2.75
+                @prop-size-large/button:text-16
+                @prop-size-large/button:[--height:--spacing(12)]
+                u:*:transition-opacity
+                u:*:@state-disabled/button:opacity-disabled
+                u:*:@state-disabled/button:grayscale
+                u:@prop-size-xsmall/button:addon-small
+                u:@prop-size-small/button:addon-small
+                u:@prop-size-medium/button:addon-medium
+                u:@prop-size-large/button:addon-large
+                i:@state-active/button:transition-none
+                i:@prop-variant-naked/button:px-0
+                i:@prop-variant-naked/button:[--height:1lh]
+              `}
             >
-              <Tooltip.Collector>{children}</Tooltip.Collector>
+              {/* Focus ring (rendered separately for better spacing in naked buttons) */}
+              <span
+                className={`
+                  absolute -inset-px rounded-inherit opacity-100 filter-none
+                  @state-focus/button:outline
+                  @prop-variant-naked/button:-inset-0.5
+                `}
+              />
+              {addonBefore ? <ButtonAddon side="before">{addonBefore}</ButtonAddon> : null}
+              {children ? (
+                <span
+                  data-loading={replaceChildrenWithLoading || undefined}
+                  className={cn(
+                    `nested/button-children
+                    truncate
+                    data-loading:invisible
+                    @prop-hide-label-true/button:not-has-addon-compatible:sr-only
+                    u:@prop-size-xsmall/button:px-0.5
+                    u:@prop-size-small/button:px-0.5
+                    u:@prop-size-medium/button:px-1
+                    u:@prop-size-large/button:px-1
+                    u:i:@state-[addon-only=auto]/button:px-0`,
+                  )}
+                >
+                  <Tooltip.Collector>{children}</Tooltip.Collector>
+                </span>
+              ) : null}
+              {replaceChildrenWithLoading ? loadingIcon : null}
+              {addonAfter ? <ButtonAddon side="after">{addonAfter}</ButtonAddon> : null}
             </span>
-          ) : null}
-          {replaceChildrenWithLoading ? loadingIcon : null}
-          {addonAfter ? <ButtonAddon side="after">{addonAfter}</ButtonAddon> : null}
-        </span>
-      </ButtonOrLink>
-    </Tooltip>
+          </Element>
+        </Tooltip>
+      )}
+    />
   )
 }
 

package/src/components/Card.tsx

@@ -122,7 +122,7 @@ export function Card({
         {...state.polyfillAttributes}
         {...nestedProps}
         {...(as !== undefined && ({ as: 'span' } as Record<string, unknown>))}
-        render={(renderProps, { Element, category, target }) => {
+        render={(renderProps, { Element, elementProps, category, target }) => {
           const renderChildrenOutside = interactiveContent === true && category !== 'other'
           const contentId =
             renderChildrenOutside && !('aria-label' in props || 'aria-labelledby' in props)
@@ -130,7 +130,7 @@ export function Card({
               : undefined
           return (
             <>
-              <Element aria-labelledby={contentId} {...renderProps}>
+              <Element aria-labelledby={contentId} {...renderProps} {...elementProps}>
                 {/**
                  * This `span` ensures that the rounded corners are always hoverable/clickable, instead of only when
                  * `children` includes an absolutely-positioned element that fills the card, and not even

package/src/components/CopyButton.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useRef, useState } from 'react'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { CopyInteractiveIcon } from '@graphprotocol/gds-react/icons'
@@ -9,7 +10,6 @@ import { useGDS } from '../hooks/index.ts'
 import { cn, isReactNode } from '../utils/index.ts'
 import { Button, type ButtonProps } from './Button.tsx'
 import type { CopyButtonMeta } from './CopyButton.meta.ts'
-import { TooltipMeta } from './Tooltip.meta.ts'
 import { Tooltip } from './Tooltip.tsx'
 
 export interface CopyButtonProps
@@ -22,57 +22,81 @@ export interface CopyButtonProps
 }
 
 export function CopyButton({
+  ref: passedRef,
   value,
   addonAfter,
   tooltip,
   onCopy,
-  onClick: passedOnClick,
   className,
   children,
   ...props
 }: CopyButtonProps) {
   useGDS()
 
-  const [status, privateSetStatus] = useState<'idle' | 'copied' | 'copied-exit'>('idle')
-  const timeoutRef = useRef<number>(undefined)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const buttonPassedRef = useMergedRefs(buttonRef, passedRef)
 
-  const setStatus = (newStatus: typeof status) => {
-    window.clearTimeout(timeoutRef.current)
-    privateSetStatus(newStatus)
-    if (newStatus === 'copied') {
-      timeoutRef.current = window.setTimeout(() => setStatus('copied-exit'), 1000)
-    } else if (newStatus === 'copied-exit') {
-      timeoutRef.current = window.setTimeout(() => setStatus('idle'), 150)
+  const [copied, privateSetCopied] = useState(false)
+  const copiedTimeoutRef = useRef<number>(undefined)
+
+  const setCopied = (newCopied: boolean) => {
+    window.clearTimeout(copiedTimeoutRef.current)
+    privateSetCopied(newCopied)
+    if (newCopied) {
+      setTooltipOpen(true)
+      copiedTimeoutRef.current = window.setTimeout(() => setCopied(false), 1000)
+    } else {
+      // Ensure the original tooltip is shown again when leaving the button and coming back while copied
+      copiedTimeoutRef.current = window.setTimeout(() => {
+        if (!tooltipOpenRef.current && buttonRef.current?.matches(':hover, :focus-visible')) {
+          setTooltipOpen(true)
+        }
+      }, 150)
     }
   }
 
   const hasChildren = children != null
-  const copyIcon = <CopyInteractiveIcon copied={status === 'copied'} />
-  const tooltipCSSProps =
-    tooltip && !isReactNode(tooltip)
-      ? Object.fromEntries(
-          Object.entries(tooltip).filter(([propName]) => propName in TooltipMeta.cssProps),
-        )
-      : {}
+  const copyIcon = <CopyInteractiveIcon copied={copied} />
+  const tooltipProps = isReactNode(tooltip) ? { content: tooltip } : tooltip
+  const [tooltipOpen, setTooltipOpen] = useState(false)
+  const tooltipOpenRef = useRef(tooltipOpen)
+  tooltipOpenRef.current = tooltipOpen
 
   return (
     <Tooltip
+      {...tooltipProps}
       content="Copied!"
-      {...(status !== 'idle' ? { open: status === 'copied' } : { disabled: true })}
-      {...tooltipCSSProps}
+      {...(copied
+        ? {
+            open: true,
+            onOpenChange: (newOpen, reason) => {
+              if (reason === 'disabled') return
+              setTooltipOpen(newOpen)
+            },
+            className: cn('i:prop-disabled-false', tooltipProps?.className),
+          }
+        : { disabled: true })}
     >
       <Button
+        ref={buttonPassedRef}
         addonAfter={addonAfter !== undefined ? addonAfter : hasChildren ? copyIcon : undefined}
-        tooltip={tooltip}
+        tooltip={{
+          open: tooltipOpen,
+          onOpenChange: (newOpen) => {
+            if (copied) return
+            setTooltipOpen(newOpen)
+          },
+          ...tooltipProps,
+        }}
+        className={cn('gds-copy-button', className)}
+        {...props}
         onClick={async (event) => {
-          passedOnClick?.(event)
+          props.onClick?.(event)
           if (event.defaultPrevented) return
           await navigator.clipboard.writeText(value)
           onCopy?.(value)
-          setStatus('copied')
+          setCopied(true)
         }}
-        className={cn('gds-copy-button', className)}
-        {...props}
       >
         {hasChildren ? children : copyIcon}
       </Button>

package/src/components/Input.tsx

@@ -184,12 +184,12 @@ export function Input({
 
         return (
           <Render
-            {...renderProps}
             render={renderInput ?? <Field.Box>{inputWithUnitAndAction}</Field.Box>}
             state={{
               inputProps,
               inputWithUnitAndAction,
             }}
+            {...renderProps}
           />
         )
       }}

package/src/components/Link.tsx

@@ -84,7 +84,7 @@ export function Link({
       {...getCSSPropsAttributes(LinkMeta, { variant }, style)}
       {...cssPropsPolyfillAttributes}
       {...props}
-      render={(renderProps, { Element, target }) => {
+      render={(renderProps, { Element, elementProps, target }) => {
         const addonAfter: AddonValue =
           passedAddonAfter !== undefined ? (
             passedAddonAfter
@@ -92,7 +92,7 @@ export function Link({
             <ArrowUpRightInteractiveIcon />
           ) : undefined
         return (
-          <Element {...renderProps}>
+          <Element {...renderProps} {...elementProps}>
             <span
               className={`
                 nested/link-paint -mx-1 rounded-[max(--spacing(1),0.25em)] p-1 whitespace-nowrap transition