@graphprotocol/gds-react 0.2.0 → 0.2.2

package/src/components/Pane.tsx

@@ -0,0 +1,17 @@
+import { PaneContainer, PaneProvider, PaneRoot, PaneToggleButton } from './Pane.parts.tsx'
+
+export const Pane = Object.assign(PaneRoot, {
+  Provider: PaneProvider,
+  Container: PaneContainer,
+  ToggleButton: PaneToggleButton,
+})
+
+export { usePane } from './Pane.parts.tsx'
+
+export type {
+  PaneContainerProps,
+  PaneProps,
+  PaneProviderProps,
+  PaneToggleButtonProps,
+  UsePaneOptions,
+} from './Pane.parts.tsx'

package/src/components/Search.tsx

@@ -102,7 +102,7 @@ export function Search({
       data-size={cssProps.size}
       data-layout={cssProps.layout}
       className={cn(
-        `gds-search root-flex flex-col u:max-w-full
+        `gds-search root-flex flex-col u:h-max u:max-w-full
         u:hover:state-hover
         u:active:state-active
         u:data-[layout=compact]:data-[size=medium]:min-w-10

package/src/components/Tooltip.parts.tsx

@@ -2,6 +2,7 @@
 
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useRef,
@@ -9,8 +10,10 @@ import {
   type ComponentProps,
   type ReactElement,
   type ReactNode,
+  type Ref,
 } from 'react'
-import { Tooltip } from '@base-ui/react/tooltip'
+import { Tooltip, type TooltipRoot as BaseUITooltipRoot } from '@base-ui/react/tooltip'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import type { SetReturnType } from 'type-fest'
 
 import { twToPx, type GDSComponentProps } from '@graphprotocol/gds-css'
@@ -23,12 +26,11 @@ import { TooltipMeta } from './Tooltip.meta.ts'
 
 type Content = Exclude<ReactNode, undefined>
 type SetDeferredContentFunction = (content: Content, priority?: number) => void
+type OpenChangeReason = BaseUITooltipRoot.ChangeEventDetails['reason']
 
 const TooltipContext = createContext<{
   collectContent: SetDeferredContentFunction
-  inheritContent: SetDeferredContentFunction
   disableDescendants: boolean
-  registerDescendantSetOpen: (descendantSetOpen: (newOpen: boolean) => void) => void
 } | null>(null)
 
 const OPEN_DELAY = 300
@@ -43,9 +45,15 @@ export interface TooltipProps
   /** Force the tooltip to be open or closed. */
   open?: boolean | undefined
   /** Called when the tooltip is opened or closed. */
-  onOpenChange?: ((open: boolean) => void) | undefined
+  onOpenChange?: ((open: boolean, reason: OpenChangeReason) => void) | undefined
   /** The element that triggers the tooltip. */
   children: ReactElement
+  /**
+   * Props to merge with the trigger element. Set to `'forward'` to have the trigger automatically
+   * receive applicable props passed to the `Tooltip` itself (excluding tooltip-specific props like
+   * `content`, `side` and other positioning props, `open`, `disabled`, etc.).
+   */
+  triggerProps?: ComponentProps<'button'> | 'forward' | undefined
 }
 
 export function TooltipRoot({
@@ -62,12 +70,19 @@ export function TooltipRoot({
   className,
   style,
   children,
-  ...props
+  triggerProps: passedTriggerProps,
+  ...passedProps
 }: TooltipProps) {
   const { dirProps } = useGDS()
 
   const ancestorTooltip = useContext(TooltipContext)
-  const triggerRef = useRef<HTMLButtonElement>(null)
+
+  const popupProps = passedTriggerProps !== 'forward' ? passedProps : {}
+  const popupRef = passedTriggerProps !== 'forward' ? passedRef : undefined
+
+  const triggerProps = passedTriggerProps === 'forward' ? passedProps : passedTriggerProps
+  const triggerDisabled =
+    triggerProps && 'disabled' in triggerProps ? triggerProps.disabled === true : false
 
   const [cssPropsPolyfillRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
     TooltipMeta,
@@ -81,88 +96,76 @@ export function TooltipRoot({
   )
 
   const [setCollectedContent, collectedContent] = useDeferredContent()
-  const [setInheritedContent, inheritedContent] = useDeferredContent()
-
-  const content =
-    passedContent !== undefined
-      ? passedContent
-      : collectedContent !== undefined
-        ? collectedContent
-        : inheritedContent
-
-  const triggerDisabled =
-    'props' in children &&
-    children.props &&
-    typeof children.props === 'object' &&
-    'disabled' in children.props
-      ? children.props.disabled === true
-      : false
-
-  // Propagate the passed/collected content up for the first tooltip ancestor that needs them
-  if (passedContent !== undefined && !cssProps.disabled && !triggerDisabled) {
-    ancestorTooltip?.inheritContent(passedContent, 3)
-  }
+  const content = passedContent !== undefined ? passedContent : collectedContent
 
+  /**
+   * Propagate collected content up till it reaches `Tooltip.Collector`'s closest non-disabled
+   * tooltip ancestor with no passed content.
+   */
   const collectContent: SetDeferredContentFunction = (newCollectedContent, priority) => {
-    const prioritizedCollectedContent = setCollectedContent(newCollectedContent, priority)
-    if (!triggerDisabled) ancestorTooltip?.inheritContent(prioritizedCollectedContent, 2)
-  }
-
-  const inheritContent: SetDeferredContentFunction = (newInheritedContent, priority) => {
-    void setInheritedContent(newInheritedContent, priority)
-    if (!triggerDisabled) ancestorTooltip?.inheritContent(newInheritedContent, 1)
+    if (passedContent === undefined || cssProps.disabled) {
+      void setCollectedContent(newCollectedContent, priority)
+      ancestorTooltip?.collectContent(newCollectedContent, priority)
+    }
   }
 
   const disabledByAncestor = ancestorTooltip?.disableDescendants ?? false
   const disableDescendants =
     disabledByAncestor ||
-    triggerDisabled ||
     (content !== undefined && !cssProps.disabled && cssProps.overrideDescendants)
-  const enabled = Boolean(content) && !cssProps.disabled && !triggerDisabled && !disabledByAncestor
+  const enabled =
+    Boolean(content) &&
+    !cssProps.disabled &&
+    (!triggerDisabled || controlledOpen) &&
+    !disabledByAncestor
 
-  const [open, ownSetOpen] = useControlled(controlledOpen, false, onOpenChange)
-  const descendantSetOpen = useRef<(newOpen: boolean) => void>(null)
-  const registerDescendantSetOpen = (newDescendantSetOpen: (newOpen: boolean) => void) => {
-    descendantSetOpen.current = newDescendantSetOpen
-  }
-  const justOpenedRef = useRef(false)
-  const setOpen = (newOpen: boolean) => {
-    ownSetOpen(newOpen)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const triggerPassedRef = useMergedRefs(
     /**
-     * Notify overridden descendant tooltips of the open state change. This ensures, for example,
-     * that moving the cursor away from a `CopyButton` while its "Copied!" tooltip is shown closes
-     * the inner tooltip as well (which doesn't happen automatically because tooltips nested under
-     * an enabled tooltip are disabled to prevent a lot of weirdness).
+     * 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).
      */
-    if (cssProps.overrideDescendants) {
-      descendantSetOpen.current?.(newOpen)
-    }
-    if (newOpen) {
-      justOpenedRef.current = true
-      window.setTimeout(() => {
-        justOpenedRef.current = false
-      }, 0)
-    }
-  }
-  ancestorTooltip?.registerDescendantSetOpen(setOpen)
+    enabled ? triggerRef : undefined,
+    (passedTriggerProps === 'forward' ? passedRef : passedTriggerProps?.ref) as
+      | Ref<HTMLButtonElement>
+      | undefined,
+  )
+
+  const [open, privateSetOpen] = useControlled(controlledOpen, false, onOpenChange)
+  const justOpenedRef = useRef(false)
+  const setOpen = useCallback(
+    (newOpen: boolean, reason: OpenChangeReason) => {
+      privateSetOpen(newOpen, reason)
+      if (newOpen) {
+        justOpenedRef.current = true
+        window.setTimeout(() => {
+          justOpenedRef.current = false
+        }, 0)
+      }
+    },
+    [privateSetOpen],
+  )
 
   const openTimeoutRef = useRef<number>(undefined)
-  const clearOpenTimeout = () => {
+  const clearOpenTimeout = useCallback(() => {
     if (!openTimeoutRef.current) return
     window.clearTimeout(openTimeoutRef.current)
     openTimeoutRef.current = undefined
-  }
-  if (!enabled) {
-    clearOpenTimeout()
-  }
+  }, [])
+
+  useEffect(() => {
+    if (!enabled) {
+      clearOpenTimeout()
+      if (open) setOpen(false, 'disabled')
+    }
+  }, [enabled, open, setOpen, clearOpenTimeout])
 
   return (
     <TooltipContext.Provider
       value={{
         collectContent,
-        inheritContent,
         disableDescendants,
-        registerDescendantSetOpen,
       }}
     >
       <Tooltip.Root
@@ -175,7 +178,10 @@ export function TooltipRoot({
           // Disable Base UI's default behavior of closing the tooltip when pressing the trigger
           if (!newOpen && eventDetails.reason === 'trigger-press') {
             // Ensure clicking on the trigger before the tooltip has a chance to open doesn't prevent it from opening
-            openTimeoutRef.current = window.setTimeout(() => setOpen(true), OPEN_DELAY)
+            openTimeoutRef.current = window.setTimeout(
+              () => setOpen(true, eventDetails.reason),
+              OPEN_DELAY,
+            )
             return
           }
           // Make `overrideDescendants={false}` work as expected (see the `NestedSimultaneous` story)
@@ -187,19 +193,27 @@ export function TooltipRoot({
           ) {
             return
           }
-          setOpen(newOpen)
+          setOpen(newOpen, eventDetails.reason)
         }}
       >
         <Tooltip.Trigger
-          ref={triggerRef}
           delay={OPEN_DELAY}
           closeDelay={100}
-          render={({ onClick: _onClick, ...renderProps }) => (
-            <Render {...(enabled ? renderProps : {})} render={children} />
+          {...(triggerProps as ComponentProps<typeof Tooltip.Trigger>)}
+          ref={triggerPassedRef}
+          disabled={undefined} // Not passed through for some reason, so we set it in `render` and override it to `undefined` here just in case
+          render={(renderProps) => (
+            <Render
+              render={children}
+              {...renderProps}
+              disabled={triggerDisabled}
+              onClick={triggerProps?.onClick} // Prevent the tooltip re-opening after clicking e.g. a `Menu` trigger
+            />
           )}
         />
         <Tooltip.Portal>
           <Tooltip.Positioner
+            key={getReactNodeKey(content)} // Refresh the tooltip's position when the content changes (see `WithDynamicContent` story)
             side={
               cssProps.side === 'start'
                 ? 'inline-start'
@@ -211,19 +225,19 @@ export function TooltipRoot({
             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
             {...dirProps}
           >
             <Tooltip.Popup
-              ref={passedRef}
-              data-side={cssProps.side}
+              ref={popupRef}
               className={cn(
                 `gds-tooltip root-block u:max-w-(--available-width) u:rounded-4 u:bg-default u:px-2 u:py-1 u:text-12 u:transition
                 i:origin-(--transform-origin)
                 i:data-ending-style:opacity-0
                 i:data-starting-style:opacity-0
                 i:data-starting-style:data-[side=bottom]:-translate-y-1
-                i:data-starting-style:data-[side=end]:-translate-x-1
-                i:data-starting-style:data-[side=start]:translate-x-1
+                i:data-starting-style:data-[side=inline-end]:-translate-x-1
+                i:data-starting-style:data-[side=inline-start]:translate-x-1
                 i:data-starting-style:data-[side=top]:translate-y-1
                 i:rtl:data-starting-style:data-[side=end]:translate-x-1
                 i:rtl:data-starting-style:data-[side=start]:-translate-x-1`,
@@ -231,7 +245,7 @@ export function TooltipRoot({
               )}
               {...cssPropsAttributes}
               {...cssPropsPolyfillAttributes}
-              {...props}
+              {...popupProps}
             >
               {content}
             </Tooltip.Popup>
@@ -244,7 +258,7 @@ export function TooltipRoot({
             className={cn('gds-tooltip i:invisible', className)}
             {...cssPropsAttributes}
             {...cssPropsPolyfillAttributes}
-            {...props}
+            {...popupProps}
           />
         </Portal>
       </Tooltip.Root>
@@ -288,8 +302,9 @@ function useDeferredContent() {
 }
 
 export interface TooltipContentProps {
-  render?: RenderProp | undefined
   children: ReactNode
+  priority?: number | undefined
+  render?: RenderProp | undefined
 }
 
 /**
@@ -301,10 +316,10 @@ export interface TooltipContentProps {
  * where the information it provides is not otherwise available to screen readers (i.e. different
  * from the trigger's accessible name).
  */
-export function TooltipContent({ render, children }: TooltipContentProps) {
+export function TooltipContent({ children, priority, render }: TooltipContentProps) {
   const ancestorTooltip = useContext(TooltipContext)
 
-  ancestorTooltip?.collectContent(children || null)
+  ancestorTooltip?.collectContent(children || null, priority)
 
   return render ? <Render render={render}>{children}</Render> : children
 }

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

@@ -20,7 +20,7 @@ import { useButton } from 'react-aria'
 import type { Merge } from 'type-fest'
 
 import { cn } from '../../utils/index.ts'
-import { Render, type RenderFn } from './Render.tsx'
+import { Render, type RenderFn, type RenderFnProps } from './Render.tsx'
 
 interface LinkComponentObject {
   component: ElementType
@@ -37,8 +37,7 @@ type LinkComponent =
   | null
 
 export type ButtonOrLinkState = {
-  Element: ElementType
-  category: 'button' | 'link' | 'other'
+  category: 'button' | 'link'
   role: NonNullable<InternalButtonOrLinkProps['role']>
   disabled: NonNullable<InternalButtonOrLinkProps['disabled']>
   type?: InternalButtonOrLinkProps['type']
@@ -47,6 +46,16 @@ export type 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
@@ -62,7 +71,7 @@ export declare namespace InternalButtonOrLinkProps {
      */
     inline?: boolean | undefined
     /** Custom render function to control the rendered element. */
-    render?: RenderFn<ButtonOrLinkState> | undefined
+    render?: RenderFn<ButtonOrLinkRenderState> | undefined
     /** Custom component to use for rendering links (e.g. Next.js Link) */
     linkComponent?: LinkComponent | undefined
   }
@@ -116,12 +125,14 @@ 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`).
+ */
 
 type WithContextComponent<T extends ElementType> = (
-  props: Merge<ComponentProps<T>, WithButtonOrLinkContextProps>,
+  props: Merge<ComponentProps<T>, ButtonOrLinkRenderElementProps>,
 ) => ReactElement
 
 const memoizedWithContextComponents = new Map<ElementType, WithContextComponent<ElementType>>()
@@ -188,7 +199,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     disabled = false,
     inline = false,
     linkComponent: passedLinkComponent,
-    render,
+    render: passedRender,
     className: passedClassName,
     children,
     ...nonBaseProps
@@ -205,6 +216,25 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     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) {
@@ -225,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
         ? {}
@@ -254,7 +273,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
             return { 'aria-checked': checkedOrMixed }
           })(checked)
 
-    const buttonProps: ComponentProps<typeof Element> = {
+    const buttonProps: ComponentProps<'button'> = {
       role,
       type: disabled === 'focusable' ? 'button' : type,
       disabled: disabled === true,
@@ -262,12 +281,23 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       ...checkedAttribute,
       className,
       children,
-      buttonOrLinkState: state,
       ...(remainingProps as ComponentProps<'button'>),
       ...((disabled === 'focusable' || (disabled && inline)) && manuallyDisabledEventProps),
     }
 
-    return render ? render(buttonProps, state) : <Element {...buttonProps} />
+    const buttonOrLinkState: ButtonOrLinkState = {
+      category: 'button',
+      role,
+      disabled,
+      type,
+      checked,
+    }
+
+    return render(
+      inline ? SpanButtonWithContext : ButtonWithContext,
+      buttonProps,
+      buttonOrLinkState,
+    )
   }
 
   const {
@@ -281,15 +311,6 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     ...remainingProps
   } = nonBaseProps
 
-  const state: ButtonOrLinkState = {
-    Element: 'a',
-    category: 'link',
-    role,
-    disabled,
-    href,
-    target,
-  }
-
   let linkProps: ComponentProps<'a'> = {
     role: disabled || role !== 'link' ? role : undefined,
     href: !disabled ? href : undefined,
@@ -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'
 

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/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} />
   }
 }