@graphprotocol/gds-react 0.1.2 → 0.2.1

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

@@ -17,9 +17,10 @@ import {
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import { mergeProps } from '@react-aria/utils'
 import { useButton } from 'react-aria'
+import type { Merge } from 'type-fest'
 
 import { cn } from '../../utils/index.ts'
-import { Render, type RenderProps } from './Render.tsx'
+import { Render, type RenderFn, type RenderFnProps } from './Render.tsx'
 
 interface LinkComponentObject {
   component: ElementType
@@ -35,9 +36,8 @@ type LinkComponent =
   | LinkComponentObject
   | null
 
-export interface ButtonOrLinkState {
-  Element: ElementType
-  category: 'button' | 'link' | 'other'
+export type ButtonOrLinkState = {
+  category: 'button' | 'link'
   role: NonNullable<InternalButtonOrLinkProps['role']>
   disabled: NonNullable<InternalButtonOrLinkProps['disabled']>
   type?: InternalButtonOrLinkProps['type']
@@ -46,6 +46,16 @@ export interface ButtonOrLinkState {
   target?: InternalButtonOrLinkProps['target']
 }
 
+export type ButtonOrLinkRenderState = ButtonOrLinkState & {
+  Element: ElementType<ButtonOrLinkRenderElementProps>
+  elementProps: ButtonOrLinkRenderElementProps
+}
+
+interface ButtonOrLinkRenderElementProps {
+  buttonOrLinkState: ButtonOrLinkState
+  [key: string]: unknown
+}
+
 export declare namespace InternalButtonOrLinkProps {
   interface DisableableProps {
     disabled?: boolean | 'focusable' | undefined
@@ -61,10 +71,8 @@ export declare namespace InternalButtonOrLinkProps {
      */
     inline?: boolean | undefined
     /** Custom render function to control the rendered element. */
-    render?:
-      | ((renderProps: Record<string, unknown>, state: ButtonOrLinkState) => ReactNode)
-      | undefined
-    /** Custom component to use for rendering links (e.g., Next.js Link) */
+    render?: RenderFn<ButtonOrLinkRenderState> | undefined
+    /** Custom component to use for rendering links (e.g. Next.js Link) */
     linkComponent?: LinkComponent | undefined
   }
   interface ButtonProps
@@ -117,20 +125,25 @@ export function useAncestorButtonOrLink() {
   return useContext(ButtonOrLinkContext)
 }
 
-interface WithButtonOrLinkContextProps {
-  buttonOrLinkState: ButtonOrLinkState
-}
+/**
+ * Creating "with context" components as opposed to wrapping `ButtonOrLink`'s returned element in a
+ * context provider to avoid a "Trying to render a nested `ButtonOrLink`" error when rendering
+ * `ButtonOrLink` siblings in the `render` function (like `Card` does with `interactiveContent`).
+ */
 
-const memoizedWithContextComponents = new Map<ElementType, ElementType>()
+type WithContextComponent<T extends ElementType> = (
+  props: Merge<ComponentProps<T>, ButtonOrLinkRenderElementProps>,
+) => ReactElement
 
-function withContext<T extends ElementType>(Element: T) {
-  if (memoizedWithContextComponents.has(Element)) {
-    return memoizedWithContextComponents.get(Element)!
-  }
-  const newWithContextComponent = ({
+const memoizedWithContextComponents = new Map<ElementType, WithContextComponent<ElementType>>()
+
+function withContext<T extends ElementType>(Element: T): WithContextComponent<T> {
+  const cached = memoizedWithContextComponents.get(Element)
+  if (cached) return cached
+  const newWithContextComponent: WithContextComponent<ElementType> = ({
     buttonOrLinkState,
     ...props
-  }: WithButtonOrLinkContextProps & ComponentProps<T>) => (
+  }) => (
     <ButtonOrLinkContext.Provider value={buttonOrLinkState}>
       <Element {...(props as ComponentProps<T>)} />
     </ButtonOrLinkContext.Provider>
@@ -142,7 +155,7 @@ function withContext<T extends ElementType>(Element: T) {
 const ButtonWithContext = withContext('button')
 const SpanButtonWithContext = withContext(SpanButton)
 const AnchorWithContext = withContext('a')
-const RenderWithContext = withContext(Render as ElementType<RenderProps>)
+const RenderWithContext = withContext(Render)
 
 interface ButtonOrLinkConfigContextValue {
   onClick:
@@ -186,12 +199,42 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     disabled = false,
     inline = false,
     linkComponent: passedLinkComponent,
-    render,
-    onClick,
+    render: passedRender,
     className: passedClassName,
     children,
     ...nonBaseProps
   } = props
+  const manuallyDisabledEventProps = {
+    onClick: undefined,
+    onMouseDown: undefined,
+    onMouseUp: undefined,
+    onPointerDown: undefined,
+    onPointerUp: undefined,
+    onTouchStart: undefined,
+    onTouchEnd: undefined,
+    onKeyDown: undefined,
+    onKeyUp: undefined,
+  }
+
+  const render = (
+    Element: ElementType<ButtonOrLinkRenderElementProps>,
+    renderProps: RenderFnProps,
+    buttonOrLinkState: ButtonOrLinkState,
+    extraElementProps?: Record<string, unknown>,
+  ) => {
+    const elementProps: ButtonOrLinkRenderElementProps = { buttonOrLinkState, ...extraElementProps }
+    const renderState: ButtonOrLinkRenderState = {
+      ...buttonOrLinkState,
+      Element,
+      elementProps,
+    }
+    return passedRender ? (
+      passedRender(renderProps, renderState)
+    ) : (
+      <Element {...renderProps} {...elementProps} />
+    )
+  }
+
   const className = cn('gds-button-or-link', passedClassName)
 
   if (props.href === undefined) {
@@ -212,17 +255,6 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       )
     }
 
-    const Element = inline ? SpanButtonWithContext : ButtonWithContext
-
-    const state: ButtonOrLinkState = {
-      Element,
-      category: 'button',
-      role,
-      disabled,
-      type,
-      checked,
-    }
-
     const checkedAttribute =
       checked === undefined
         ? {}
@@ -241,7 +273,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
             return { 'aria-checked': checkedOrMixed }
           })(checked)
 
-    let buttonProps: ComponentProps<typeof Element> = {
+    const buttonProps: ComponentProps<'button'> = {
       role,
       type: disabled === 'focusable' ? 'button' : type,
       disabled: disabled === true,
@@ -249,15 +281,23 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       ...checkedAttribute,
       className,
       children,
-      buttonOrLinkState: state,
+      ...(remainingProps as ComponentProps<'button'>),
+      ...((disabled === 'focusable' || (disabled && inline)) && manuallyDisabledEventProps),
     }
-    buttonProps = {
-      ...buttonProps,
-      onClick: !disabled ? (onClick as typeof buttonProps.onClick) : undefined,
-      ...(remainingProps as typeof buttonProps),
+
+    const buttonOrLinkState: ButtonOrLinkState = {
+      category: 'button',
+      role,
+      disabled,
+      type,
+      checked,
     }
 
-    return render ? render(buttonProps, state) : <Element {...buttonProps} />
+    return render(
+      inline ? SpanButtonWithContext : ButtonWithContext,
+      buttonProps,
+      buttonOrLinkState,
+    )
   }
 
   const {
@@ -271,35 +311,16 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     ...remainingProps
   } = nonBaseProps
 
-  const state: ButtonOrLinkState = {
-    Element: 'a',
-    category: 'link',
-    role,
-    disabled,
-    href,
-    target,
-  }
-
-  let linkProps: ComponentProps<'a'> = disabled
-    ? {
-        role,
-        tabIndex: disabled === 'focusable' ? 0 : undefined,
-        'aria-disabled': true,
-        className,
-        children,
-      }
-    : {
-        role: role !== 'link' ? role : undefined,
-        href,
-        target,
-        rel,
-        className,
-        children,
-      }
-  linkProps = {
-    ...linkProps,
-    onClick: !disabled ? (onClick as typeof linkProps.onClick) : undefined,
-    ...(remainingProps as typeof linkProps),
+  let linkProps: ComponentProps<'a'> = {
+    role: disabled || role !== 'link' ? role : undefined,
+    href: !disabled ? href : undefined,
+    target: !disabled ? target : undefined,
+    rel: !disabled ? rel : undefined,
+    'aria-disabled': Boolean(disabled) || undefined,
+    className,
+    children,
+    ...(remainingProps as ComponentProps<'a'>),
+    ...(disabled && manuallyDisabledEventProps),
   }
 
   let linkComponent: ElementType | ReactElement | null = null
@@ -317,29 +338,28 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     }
   }
 
-  if (isValidElement(linkComponent)) {
-    const Element = RenderWithContext
-    state.Element = Element
-
-    const elementProps = {
-      ...linkProps,
-      render: linkComponent,
-      buttonOrLinkState: state,
-    }
-
-    return render ? render(elementProps, state) : <Element {...elementProps} />
+  const buttonOrLinkState: ButtonOrLinkState = {
+    category: 'link',
+    role,
+    disabled,
+    href,
+    target,
   }
 
-  const Element =
-    linkComponent && linkComponent !== 'a' ? withContext(linkComponent) : AnchorWithContext
-  state.Element = Element
-
-  const elementProps = {
-    ...linkProps,
-    buttonOrLinkState: state,
+  if (isValidElement(linkComponent)) {
+    return render(
+      RenderWithContext as ButtonOrLinkRenderState['Element'],
+      linkProps,
+      buttonOrLinkState,
+      { render: linkComponent },
+    )
   }
 
-  return render ? render(elementProps, state) : <Element {...elementProps} />
+  return render(
+    linkComponent && linkComponent !== 'a' ? withContext(linkComponent) : AnchorWithContext,
+    linkProps,
+    buttonOrLinkState,
+  )
 }
 ButtonOrLinkRoot.displayName = 'ButtonOrLink'
 
@@ -425,16 +445,17 @@ function SpanButton({
       isDisabled: disabled,
       elementType: 'span',
       onPress: (event) => {
-        const mouseEvent = new MouseEvent('click', {
-          altKey: event.altKey,
-          ctrlKey: event.ctrlKey,
-          metaKey: event.metaKey,
-          shiftKey: event.shiftKey,
-          relatedTarget: event.target,
-          bubbles: true,
-          cancelable: true,
-        })
-        event.target.dispatchEvent(mouseEvent)
+        event.target.dispatchEvent(
+          new MouseEvent('click', {
+            altKey: event.altKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+            relatedTarget: event.target,
+            bubbles: true,
+            cancelable: true,
+          }),
+        )
       },
       onPressStart: (event) => {
         if (event.pointerType === 'keyboard') setActive(true)

package/src/components/base/ButtonOrLink.tsx

@@ -14,6 +14,7 @@ export { useAncestorButtonOrLink } from './ButtonOrLink.parts.tsx'
 export type {
   ButtonOrLinkProps,
   ButtonOrLinkState,
+  ButtonOrLinkRenderState,
   ButtonOrLinkConfigProps,
   InternalButtonOrLinkProps,
   OmitInternalButtonOrLinkProps,

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

@@ -1,22 +1,15 @@
 'use client'
 
-import {
-  createContext,
-  useContext,
-  useId,
-  type ComponentProps,
-  type ReactElement,
-  type ReactNode,
-} from 'react'
+import { createContext, useContext, useId, type ComponentProps, type ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 
 import { useCSSPropsPolyfill, useCSSState } from '../../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../../utils/index.ts'
 import { CheckableMeta } from './Checkable.meta.ts'
-import { Render, type RenderProps } from './Render.tsx'
+import { Render, type RenderProp } from './Render.tsx'
 
-export interface CheckableState {
+export type CheckableState = {
   inputProps: {
     name: string | undefined
     value: string | undefined
@@ -36,7 +29,7 @@ export interface CheckableProps
   value: string | undefined
   checked: boolean | 'indeterminate' | undefined
   disabled: boolean | undefined
-  renderInput: (renderProps: ComponentProps<'span'>, state: CheckableState) => ReactElement
+  renderInput: RenderProp<CheckableState>
 }
 
 export function CheckableRoot({
@@ -185,7 +178,7 @@ export interface CheckableLabelProps extends ComponentProps<'span'> {
    * `<Card as="label" />`). Defaults to `<label />`, unless there is an ancestor `CheckableLabel`,
    * in which case it defaults to `<span />`.
    */
-  render?: RenderProps['render'] | undefined
+  render?: RenderProp | undefined
 }
 
 export function CheckableLabel({
@@ -209,8 +202,8 @@ export function CheckableLabel({
     <CheckableLabelContext.Provider value={true}>
       <Render
         ref={statePassedRef}
-        data-focus-ring={focusRing || undefined}
         render={render ?? (renderLabel ? <label /> : <span />)}
+        data-focus-ring={focusRing || undefined}
         className={cn(
           renderLabel ? 'group/label gds-checkable-label' : null,
           `uu:data-focus-ring:focus-visible:outline

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useId, type ComponentProps, type ReactElement, type ReactNode } from 'react'
+import { useId, type ComponentProps, type ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 
@@ -9,9 +9,9 @@ import { CheckCircleIcon, WarningDiamondIcon, WarningIcon } from '../../icons/in
 import { cn, getCSSPropsAttributes, type OptionValue } from '../../utils/index.ts'
 import { Label, type LabelProps } from '../Label.tsx'
 import { FieldMeta } from './Field.meta.ts'
-import { Render } from './Render.tsx'
+import { Render, type RenderProp } from './Render.tsx'
 
-export interface FieldState {
+export type FieldState = {
   inputProps: {
     placeholder: string // Ensure there's always a `placeholder` attribute for `@state-blank` to work
     name: string | undefined
@@ -47,7 +47,7 @@ export interface FieldProps
   /** @default 'info' */
   status?: 'info' | 'warning' | 'error' | 'success' | undefined
   message?: ReactNode | undefined
-  renderInput: (renderProps: ComponentProps<'div'>, state: FieldState) => ReactElement
+  renderInput: RenderProp<FieldState>
 }
 
 export const FieldRoot = ({
@@ -234,7 +234,7 @@ export const FieldRoot = ({
         `)}
       />
       <div
-        data-visible={message ? true : undefined}
+        data-visible={Boolean(message) || undefined}
         className={`
           mt-2 flex gap-1 text-12 text-form-helper
           not-data-visible:sr-only

package/src/components/base/MaybeButtonOrLink.tsx

@@ -4,30 +4,49 @@ import type { ComponentProps, ElementType } from 'react'
 
 import {
   ButtonOrLink,
-  type ButtonOrLinkState,
+  type ButtonOrLinkRenderState,
   type InternalButtonOrLinkProps,
   type OmitInternalButtonOrLinkProps,
 } from './ButtonOrLink.tsx'
+import type { RenderFn } from './Render.tsx'
+
+type OtherElementRenderState = {
+  category: 'other'
+  role: ButtonOrLinkRenderState['role']
+  disabled: false
+  type?: undefined
+  checked?: undefined
+  href?: undefined
+  target?: undefined
+  Element: ButtonOrLinkRenderState['Element']
+  elementProps: ButtonOrLinkRenderState['elementProps']
+}
+
+type MaybeButtonOrLinkRenderState = ButtonOrLinkRenderState | OtherElementRenderState
 
 export declare namespace MaybeButtonOrLinkProps {
   export type DisableableProps = InternalButtonOrLinkProps.DisableableProps
   export type ButtonProps = OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.ButtonProps> & {
     onClick: NonNullable<InternalButtonOrLinkProps.ButtonProps['onClick']>
     as?: undefined
+    render?: RenderFn<MaybeButtonOrLinkRenderState> | undefined
   }
   export type ToggleButtonProps =
     OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.ToggleButtonProps> & {
       onClick: NonNullable<InternalButtonOrLinkProps.ToggleButtonProps['onClick']>
       as?: undefined
+      render?: RenderFn<MaybeButtonOrLinkRenderState> | undefined
     }
   export type LinkProps = OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.LinkProps> & {
     as?: undefined
+    render?: RenderFn<MaybeButtonOrLinkRenderState> | undefined
   }
   export type OtherElementProps =
     OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.BaseProps> &
       ComponentProps<'span'> & {
         onClick?: InternalButtonOrLinkProps.ButtonProps['onClick'] // Not technically correct, but prevents the event from being `any` when `as` is not specified
         as?: ElementType | undefined
+        render?: RenderFn<MaybeButtonOrLinkRenderState> | undefined
         disabled?: undefined
         type?: undefined
         checked?: undefined
@@ -44,7 +63,7 @@ export type MaybeButtonOrLinkProps =
 
 type InternalMaybeButtonOrLinkProps = MaybeButtonOrLinkProps &
   InternalButtonOrLinkProps.DisableableProps &
-  InternalButtonOrLinkProps.BaseProps
+  Omit<InternalButtonOrLinkProps.BaseProps, 'render'>
 
 /**
  * Renders a `ButtonOrLink` if one of `href` or `onClick` is passed along with no `as`. Otherwise,
@@ -67,13 +86,15 @@ export function MaybeButtonOrLink(props: InternalMaybeButtonOrLinkProps) {
       ...otherElementProps
     } = props
 
-    const state: ButtonOrLinkState = {
-      Element,
+    const renderState: OtherElementRenderState = {
       category: 'other',
       role: props.role ?? 'none',
       disabled: false,
+      // The types lie to ensure there's a type error if consumers forget to spread `elementProps` on `Element`
+      Element: Element as OtherElementRenderState['Element'],
+      elementProps: {} as OtherElementRenderState['elementProps'],
     }
 
-    return render ? render(otherElementProps, state) : <Element {...otherElementProps} />
+    return render ? render(otherElementProps, renderState) : <Element {...otherElementProps} />
   }
 }

package/src/components/base/Portal.tsx

@@ -1,17 +1,15 @@
 'use client'
 
-import { useEffect, useState, type ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 
-export function Portal({ children }: { children: ReactNode }) {
-  const [mounted, setMounted] = useState(false)
+import { useFirstRender } from '../../hooks/index.ts'
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+export function Portal({ children }: { children: ReactNode }) {
+  const firstRender = useFirstRender({ immediatelyRerender: true })
 
   // Don't render until after hydration
-  if (!mounted) {
+  if (firstRender) {
     return null
   }