@graphprotocol/gds-react 0.1.2 → 0.2.1

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,58 +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'), 100)
+  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
-      {...(status !== 'idle'
-        ? { content: 'Copied!', open: status === 'copied' }
-        : { content: null })}
-      {...tooltipCSSProps}
+      {...tooltipProps}
+      content="Copied!"
+      {...(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/CurrencyInput.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { FieldMeta } from './base/Field.meta.ts'
 
 export const CurrencyInputMeta = createComponent('CurrencyInput', {
-  containerName: 'gds-field',
-  cssProps: {
-    /** @default 'medium' */
-    size: FieldMeta.cssProps.size,
-  },
+  extends: FieldMeta,
 })

package/src/components/DescriptionList.parts.tsx

@@ -56,6 +56,7 @@ export function DescriptionListRoot({
     </div>
   )
 }
+DescriptionListRoot.displayName = 'DescriptionList'
 
 export interface DescriptionListItemProps
   extends ComponentProps<'div'>, GDSComponentProps<typeof DescriptionListItemMeta> {

package/src/components/Icon.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const IconMeta = createComponent('Icon', {
+  isolate: 'allow-inheritance',
   addonCompatible: true,
   cssProps: {
     /** @default '1em' */

package/src/components/Icon.tsx

@@ -13,7 +13,7 @@ import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { IconMeta } from './Icon.meta.ts'
-import { useCollectTooltip } from './Tooltip.tsx'
+import { useTooltipCollector } from './Tooltip.tsx'
 
 export interface IconProps
   extends Omit<ComponentProps<'span'>, 'children' | 'color'>, GDSComponentProps<typeof IconMeta> {
@@ -35,10 +35,10 @@ export function Icon({ src, alt, size, color, className, style, ...props }: Icon
   useGDS()
 
   const iconContent = isValidElement(src) ? src : createElement(src)
-  const collectTooltip = useCollectTooltip()
+  const collectTooltipContent = useTooltipCollector()
 
-  if (collectTooltip && alt) {
-    collectTooltip(alt)
+  if (collectTooltipContent && alt) {
+    collectTooltipContent(alt)
   }
 
   if ('variant' in props) {

package/src/components/Input.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { FieldMeta } from './base/Field.meta.ts'
 
 export const InputMeta = createComponent('Input', {
-  containerName: 'gds-field',
-  cssProps: {
-    /** @default 'medium' */
-    size: FieldMeta.cssProps.size,
-  },
+  extends: FieldMeta,
 })

package/src/components/Input.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ComponentProps, ReactElement, ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { parseNumber } from '@graphprotocol/gds-utils'
@@ -8,10 +8,10 @@ import { parseNumber } from '@graphprotocol/gds-utils'
 import { useControlled, useGDS } from '../hooks/index.ts'
 import { cn, splitProps } from '../utils/index.ts'
 import { Field, type FieldProps } from './base/Field.tsx'
-import { Render } from './base/Render.tsx'
+import { Render, type RenderProp } from './base/Render.tsx'
 import type { InputMeta } from './Input.meta.ts'
 
-export interface InputState {
+export type InputState = {
   inputProps: ComponentProps<'input'>
   inputWithUnitAndAction: ReactNode
 }
@@ -39,9 +39,7 @@ export interface InputProps
   message?: FieldProps['message'] | undefined
   unit?: ReactNode | undefined
   action?: ReactNode | undefined
-  renderInput?:
-    | ((renderProps: ComponentProps<'div'>, state: InputState) => ReactElement)
-    | undefined
+  renderInput?: RenderProp<InputState> | undefined
 }
 
 export function Input({
@@ -168,6 +166,7 @@ export function Input({
                       **:button:default-variant-tertiary
                       @prop-size-small/field:pe-0.5
                       @prop-size-small/field:**:button:var-[radius=var(--radius-4)]
+                      @prop-size-small/field:**:button-group:var-[gap=--spacing(0.5)]
                       @prop-size-medium/field:pe-1.5
                       @prop-size-large/field:pe-2
                       @prop-size-small/field:**:button-or-group:prop-size-xsmall
@@ -185,12 +184,12 @@ export function Input({
 
         return (
           <Render
-            {...renderProps}
             render={renderInput ?? <Field.Box>{inputWithUnitAndAction}</Field.Box>}
             state={{
               inputProps,
               inputWithUnitAndAction,
             }}
+            {...renderProps}
           />
         )
       }}

package/src/components/Keyboard.tsx

@@ -48,7 +48,7 @@ export function Keyboard({
     <kbd
       ref={cssPropsPolyfillPassedRef}
       className={cn(
-        `gds-keyboard root-inline u:shrink-0 u:font-mono u:font-regular u:whitespace-nowrap u:text-default
+        `gds-keyboard root-inline u:shrink-0 u:font-mono u:whitespace-nowrap
         i:leading-0`,
         className,
       )}

package/src/components/Link.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const LinkMeta = createComponent('Link', {
+  isolate: 'allow-inheritance',
   cssProps: {
     /** @default 'primary' */
     variant: {

package/src/components/Link.tsx

@@ -15,7 +15,7 @@ export declare namespace LinkProps {
     /** @default 'primary' */
     variant?: 'primary' | 'secondary' | undefined
     addonBefore?: AddonValue | undefined
-    /** Defaults to `ArrowUpRightInteractiveIcon` if `href` is set and `target` is `_blank` */
+    /** Defaults to `ArrowUpRightInteractiveIcon` if `href` is defined and `target` is `_blank` */
     addonAfter?: AddonValue | undefined
   }
   interface ButtonProps
@@ -70,8 +70,7 @@ export function Link({
       disabled={disabled}
       data-variant={cssProps.variant}
       className={cn(
-        `gds-link isolate ${/* Allow nested elements (e.g. `CodeInline`) to have a negative `z-index` to appear behind the underline */ ''}
-        root-inline u:w-max u:max-w-full u:wrap-anywhere u:outline-0
+        `gds-link root-inline u:w-max u:max-w-full u:wrap-anywhere u:outline-0
         u:hover:state-hover
         u:focus-visible:state-focus
         u:active:state-active
@@ -85,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
@@ -93,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

package/src/components/Menu.meta.ts

@@ -1,5 +1,43 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
-export const MenuMeta = createComponent('Menu')
+export const MenuMeta = createComponent('Menu', {
+  isolate: false,
+  cssProps: {
+    /** @default 'bottom' // or for nested menus, 'end' */
+    side: {
+      type: 'values',
+      values: ['top', 'bottom', 'start', 'end'],
+      defaultValue: 'bottom',
+    },
+    /** @default 1 // or for nested menus, 3 */
+    gap: {
+      type: 'number',
+      defaultValue: 1,
+    },
+    /** @default 'start' */
+    align: {
+      type: 'values',
+      values: ['start', 'center', 'end'],
+      defaultValue: 'start',
+    },
+    /** @default 0 // or for nested menus, -2 */
+    alignOffset: {
+      type: 'number',
+      defaultValue: 0,
+    },
+    /** @default false */
+    matchTriggerWidth: {
+      type: 'values',
+      values: [false, true, 'at-least', 'at-most'],
+      defaultValue: false,
+    },
+    /** @default false */
+    matchTriggerHeight: {
+      type: 'values',
+      values: [false, true, 'at-least', 'at-most'],
+      defaultValue: false,
+    },
+  },
+})
 
 export const MenuItemMeta = createComponent('MenuItem')