@graphprotocol/gds-react 0.1.2 → 0.2.0

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 } from './Render.tsx'
 
 interface LinkComponentObject {
   component: ElementType
@@ -35,7 +36,7 @@ type LinkComponent =
   | LinkComponentObject
   | null
 
-export interface ButtonOrLinkState {
+export type ButtonOrLinkState = {
   Element: ElementType
   category: 'button' | 'link' | 'other'
   role: NonNullable<InternalButtonOrLinkProps['role']>
@@ -61,10 +62,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<ButtonOrLinkState> | undefined
+    /** Custom component to use for rendering links (e.g. Next.js Link) */
     linkComponent?: LinkComponent | undefined
   }
   interface ButtonProps
@@ -121,16 +120,19 @@ interface WithButtonOrLinkContextProps {
   buttonOrLinkState: ButtonOrLinkState
 }
 
-const memoizedWithContextComponents = new Map<ElementType, ElementType>()
+type WithContextComponent<T extends ElementType> = (
+  props: Merge<ComponentProps<T>, WithButtonOrLinkContextProps>,
+) => 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 +144,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:
@@ -187,11 +189,22 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     inline = false,
     linkComponent: passedLinkComponent,
     render,
-    onClick,
     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 className = cn('gds-button-or-link', passedClassName)
 
   if (props.href === undefined) {
@@ -241,7 +254,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
             return { 'aria-checked': checkedOrMixed }
           })(checked)
 
-    let buttonProps: ComponentProps<typeof Element> = {
+    const buttonProps: ComponentProps<typeof Element> = {
       role,
       type: disabled === 'focusable' ? 'button' : type,
       disabled: disabled === true,
@@ -250,11 +263,8 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       className,
       children,
       buttonOrLinkState: state,
-    }
-    buttonProps = {
-      ...buttonProps,
-      onClick: !disabled ? (onClick as typeof buttonProps.onClick) : undefined,
-      ...(remainingProps as typeof buttonProps),
+      ...(remainingProps as ComponentProps<'button'>),
+      ...((disabled === 'focusable' || (disabled && inline)) && manuallyDisabledEventProps),
     }
 
     return render ? render(buttonProps, state) : <Element {...buttonProps} />
@@ -280,26 +290,16 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     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
@@ -425,16 +425,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/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/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
   }
 

package/src/components/base/Render.tsx

@@ -1,31 +1,53 @@
 'use client'
 
-import type { ComponentProps, ElementType } from 'react'
-import { useRender } from '@base-ui/react/use-render'
+import type { ReactElement } from 'react'
+import { useRender, type HTMLProps } from '@base-ui/react/use-render'
+import { objectFromEntries } from 'ts-extras'
 
-export type RenderProps<
-  T extends ElementType = 'span',
-  State extends Record<string, unknown> = Record<string, unknown>,
-> = ComponentProps<T> & {
-  render: NonNullable<useRender.ComponentProps<T, State>['render']>
+export type RenderFnProps = HTMLProps
+export type RenderFnState = Record<string, unknown> | undefined
+
+export type RenderFn<State extends RenderFnState = undefined, ElementProps = unknown> = (
+  renderProps: RenderFnProps,
+  state: State,
+) => ReactElement<ElementProps>
+
+/**
+ * Type for a `render` prop that accepts either a React element or a render function.
+ *
+ * - **Element form**: Pass a React element to replace the default tag (e.g., `<strong />`).
+ * - **Function form**: Pass a callback `(props, state) => ReactElement` for full control.
+ *
+ * @template State - The state object passed to the render function.
+ * @template ElementProps - Optional constraint on the returned element's props (e.g., `{ disabled?:
+ *   boolean }`).
+ */
+export type RenderProp<State extends RenderFnState = undefined, ElementProps = unknown> =
+  | ReactElement<ElementProps>
+  | RenderFn<State, ElementProps>
+
+export interface RenderProps<State extends RenderFnState = undefined> {
+  render: RenderProp<State>
   state?: State | undefined
+  [key: string]: unknown
 }
 
 /**
  * A utility component that provides polymorphic rendering capabilities. It can render as any HTML
  * element or React component.
  */
-export function Render<
-  T extends ElementType = 'span',
-  State extends Record<string, unknown> = Record<string, unknown>,
->({ render, state, ...props }: RenderProps<T, State>) {
+export function Render<State extends RenderFnState>({
+  render,
+  state,
+  ...props
+}: RenderProps<State>) {
   return useRender({
     render,
-    state,
+    state: state !== undefined ? state : (undefined as never),
     props,
     // Do not automatically add data attributes for state properties
-    stateAttributesMapping: Object.fromEntries(
-      Object.keys(state ?? {}).map((stateProperty) => [stateProperty, (_value) => null] as const),
-    ) as Record<keyof State, (value: unknown) => null>,
+    stateAttributesMapping: objectFromEntries(
+      Object.keys(state ?? {}).map((stateProperty) => [stateProperty, () => null] as const),
+    ),
   })
 }

package/src/components/base/Transition.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const TransitionMeta = createComponent('Transition', {
+  isolate: 'allow-inheritance',
   vars: {
     'enter-opacity': '0',
     'enter-scale': '1',

package/src/components/base/Transition.tsx

@@ -108,7 +108,7 @@ export function Transition({
         ref={statePassedRef}
         data-layout={layout}
         className={cn(
-          `gds-transition isolate
+          `gds-transition
           u:state-[transition=idle]
           u:data-[layout=block]:block
           u:data-[layout=flex-col]:flex
@@ -130,7 +130,7 @@ export function Transition({
       data-layout={layout}
       data-animate-size={animateSize || undefined}
       className={cn(
-        `gds-transition isolate
+        `gds-transition
         u:state-[transition=idle]
         u:has-[>*>*>[inert]]:state-[transition=running]
         u:has-[>*>*>[inert]]:data-[animate-size=clip]:overflow-clip

package/src/components/base/index.ts

@@ -7,7 +7,6 @@ export {
   type ButtonOrLinkProps,
   type ButtonOrLinkState,
 } from './ButtonOrLink.tsx'
-export { ButtonOrLinkMeta } from './ButtonOrLink.meta.ts'
 export {
   Checkable,
   type CheckableLabelProps,
@@ -19,6 +18,13 @@ export { Field, type FieldProps, type FieldState } from './Field.tsx'
 export { FieldMeta } from './Field.meta.ts'
 export { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './MaybeButtonOrLink.tsx'
 export { Portal } from './Portal.tsx'
-export { Render, type RenderProps } from './Render.tsx'
+export {
+  Render,
+  type RenderFnProps,
+  type RenderFnState,
+  type RenderFn,
+  type RenderProp,
+  type RenderProps,
+} from './Render.tsx'
 export { Transition, type TransitionProps } from './Transition.tsx'
 export { TransitionMeta } from './Transition.meta.ts'

package/src/components/index.ts

@@ -97,8 +97,7 @@ export { ToggleButton, type ToggleButtonProps } from './ToggleButton.tsx'
 export { ToggleButtonMeta } from './ToggleButton.meta.ts'
 export {
   Tooltip,
-  useCollectTooltip,
-  useCollectedTooltip,
+  useTooltipCollector,
   type TooltipProps,
   type TooltipCollectorProps,
   type TooltipContentProps,

package/src/hooks/index.ts

@@ -12,6 +12,7 @@ export { useCSSProps } from './useCSSProps.ts'
 export { useCSSPropsPolyfill } from './useCSSPropsPolyfill.ts'
 export { useCSSState } from './useCSSState.ts'
 export { useEffectWithRefDeps } from './useEffectWithRefDeps.ts'
+export { useFirstRender } from './useFirstRender.ts'
 export { useForceRerender } from './useForceRerender.ts'
 export { useMapWithInit } from './useMapWithInit.ts'
 export {

package/src/hooks/useCSSProp.ts

@@ -21,17 +21,15 @@ export function useCSSProp<
   const { ref: passedRef } = options
   const elementRef = useRef<HTMLElement>(null)
   const callbackRef: RefCallback<HTMLElement> | null = useMergedRefs(elementRef, passedRef)
-  const prop = component.getCSSPropByName(propName)
+  const cssProp = component.getCSSPropByName(propName)
 
-  const getCSSProp = useCallback(async () => {
+  const getCSSPropValue = useCallback(async () => {
     if (typeof window === 'undefined' || !elementRef.current) return null
     const element = elementRef.current
     const computedStyle = await styleScheduler.getComputedStyle(element)
-    const rawValue = computedStyle.getPropertyValue(
-      `--gds-${component.kebabName}-${prop.kebabName}`,
-    )
-    return parseCSSPropValue(prop, rawValue) as CSSPropType<ComponentCSSPropsConfig<C>[P]>
-  }, [component, prop])
+    const rawValue = computedStyle.getPropertyValue(cssProp.cssProperty)
+    return parseCSSPropValue(cssProp, rawValue) as CSSPropType<ComponentCSSPropsConfig<C>[P]>
+  }, [cssProp])
 
-  return [callbackRef, getCSSProp] as const
+  return [callbackRef, getCSSPropValue] as const
 }

package/src/hooks/useCSSProps.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'react'
-import { objectEntries } from 'ts-extras'
+import { objectKeys } from 'ts-extras'
 
 import {
   parseCSSPropValue,
@@ -22,48 +22,39 @@ export type PropValues<P extends PassedValues<GDSComponent>> = {
 
 /**
  * Hook to observe and track CSS prop values from the DOM. Returns a callback ref, a map of prop
- * values that updates when CSS properties change, and metadata about each prop.
+ * values that updates when CSS properties change, and the array of CSS props.
  */
 export function useCSSProps<C extends GDSComponent, P extends PassedValues<C>>(
   component: C,
   passedValues: P,
   options: {
     ref?: Ref<HTMLElement> | undefined
-    disabled?: boolean
+    disabled?: boolean | undefined
   } = {},
 ) {
   const { ref, disabled = false } = options
 
-  const props = useRefWithInit(() =>
-    objectEntries(passedValues).map(([propName, passedValue]) => {
-      const cssProp = component.getCSSPropByName(propName)
-      return {
-        name: propName,
-        passedValue,
-        cssProp,
-        cssProperty: `--gds-${component.kebabName}-${cssProp.kebabName}`,
-        polyfillAttribute: `data-gds-prop-polyfill-${cssProp.kebabName}`,
-      }
-    }),
+  const cssProps = useRefWithInit(() =>
+    objectKeys(passedValues).map((propName) => component.getCSSPropByName(propName)),
   ).current
 
   const propValues = useMapWithInit(() =>
-    props.map((prop) => {
+    cssProps.map((cssProp) => {
       // Using the initial value for missing passed values could be wrong because it can be overridden in CSS, but it's just for the first render
-      const initialValue =
-        prop.passedValue !== undefined ? prop.passedValue : prop.cssProp.initialValue
-      return [prop.name, initialValue]
+      const passedValue = passedValues[cssProp.name]
+      const initialValue = passedValue !== undefined ? passedValue : cssProp.initialValue
+      return [cssProp.name, initialValue]
     }),
   )
 
-  const cssProperties = useRefWithInit(() => props.map((prop) => prop.cssProperty)).current
+  const cssProperties = useRefWithInit(() => cssProps.map((cssProp) => cssProp.cssProperty)).current
 
   const callbackRef = useStyleObserver(
     cssProperties,
     (records) => {
       for (const record of records) {
-        const prop = props.find((prop) => prop.cssProperty === record.property)!
-        const value = parseCSSPropValue(prop.cssProp, record.value)
+        const prop = cssProps.find((prop) => prop.cssProperty === record.property)!
+        const value = parseCSSPropValue(prop, record.value)
         if (propValues.get(prop.name) !== value) {
           propValues.set(prop.name, value)
         }
@@ -73,5 +64,5 @@ export function useCSSProps<C extends GDSComponent, P extends PassedValues<C>>(
     { ...(ref !== undefined && { ref }), immediate: true, disabled },
   )
 
-  return [callbackRef, Object.fromEntries(propValues) as PropValues<P>, props] as const
+  return [callbackRef, Object.fromEntries(propValues) as PropValues<P>, cssProps] as const
 }

package/src/hooks/useCSSPropsPolyfill.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, type Ref, type RefCallback } from 'react'
+import type { Ref, RefCallback } from 'react'
 
 import {
   getCSSPropRawValue,
@@ -9,7 +9,7 @@ import {
 } from '@graphprotocol/gds-css'
 
 import { useCSSProps, type PassedValues, type PropValues } from './useCSSProps.ts'
-import { useForceRerender } from './useForceRerender.ts'
+import { useFirstRender } from './useFirstRender.ts'
 
 type ExtractPolyfillValues<P extends CSSPropsConfig> = {
   [K in keyof P as P[K]['type'] extends 'values' ? K : never]: CSSPropType<P[K]> | undefined
@@ -68,19 +68,21 @@ export function useCSSPropsPolyfill<
   const allPassedValues = (() => {
     if (!returnPropValues) return passedValues
     if (returnPropValues === true) return passedValues
-    const merged = { ...passedValues }
-    for (const [key, value] of Object.entries(returnPropValues)) {
-      if (key in passedValues && passedValues[key as keyof typeof passedValues] !== value) {
+    const passed = passedValues as Record<string, unknown>
+    const merged = { ...passed }
+    for (const key of Object.keys(returnPropValues)) {
+      const value = returnPropValues[key]
+      if (key in passedValues && passed[key] !== value) {
         throw new Error(
-          `[useCSSPropsPolyfill] Conflicting values for prop \`${key}\`: ${passedValues[key as keyof typeof passedValues]} vs ${value}`,
+          `[useCSSPropsPolyfill] Conflicting values for prop \`${key}\`: ${String(passed[key])} vs ${value}`,
         )
       }
-      merged[key as keyof typeof merged] = value as (typeof merged)[keyof typeof merged]
+      merged[key] = value
     }
-    return merged
+    return merged as typeof passedValues
   })()
 
-  const [callbackRef, propValues, props] = useCSSProps(component, allPassedValues, {
+  const [callbackRef, propValues, cssProps] = useCSSProps(component, allPassedValues, {
     ref,
     disabled: !polyfillEnabled && !returnPropValues,
   })
@@ -92,30 +94,20 @@ export function useCSSPropsPolyfill<
    * to immediately rerender in browsers that support style queries); unfortunately, that would
    * cause a flash of missing styles in browsers that need the polyfill.
    */
-  const firstRender = useRef(true)
+  const firstRender = useFirstRender({ immediatelyRerender: !polyfillEnabled })
   const polyfillAttributes =
-    polyfillEnabled || firstRender.current
+    polyfillEnabled || firstRender
       ? Object.fromEntries(
-          props
+          cssProps
             .filter((prop) => prop.name in passedValues)
             .map((prop) => {
               const value = propValues[prop.name as keyof typeof propValues]
-              const rawValue = getCSSPropRawValue(prop.cssProp, value)
+              const rawValue = getCSSPropRawValue(prop, value)
               return [prop.polyfillAttribute, rawValue]
             }),
         )
       : {}
 
-  // If the polyfill is not needed, rerender to remove the polyfill attributes
-  const [rerender] = useForceRerender()
-  useLayoutEffect(() => {
-    firstRender.current = false
-    if (!polyfillEnabled) {
-      rerender()
-    }
-    // oxlint-disable-next-line exhaustive-deps
-  }, [])
-
   if (!returnPropValues) {
     return [callbackRef, polyfillAttributes] as const
   }

package/src/hooks/useCSSState.ts

@@ -56,15 +56,17 @@ export function useCSSState<
 
   const variables = useRefWithInit(() =>
     Object.keys(variableInitialValues).map((variableName) => {
-      const defaultValue =
-        variableName in cssStateVariables
-          ? cssStateVariables[variableName as CSSStateVariableName].defaultValue
-          : undefined
+      const isArbitrary = !(variableName in cssStateVariables)
+      const defaultValue = !isArbitrary
+        ? cssStateVariables[variableName as CSSStateVariableName].defaultValue
+        : undefined
       return {
         name: variableName,
         defaultValue,
         initialValue: variableInitialValues[variableName as keyof T] ?? defaultValue,
-        observedProperty: `--gds-observed-${variableName}`,
+        observedProperty: isArbitrary
+          ? `--gds-state-${variableName}`
+          : `--gds-observed-${variableName}`,
         exposedProperty: `--gds-exposed-${variableName}`,
         exposedAttribute: `data-gds-exposed-${variableName}`,
         polyfillAttribute: `data-gds-state-polyfill-${variableName}`,
@@ -105,7 +107,10 @@ export function useCSSState<
       for (const record of records) {
         if (propertyValues.get(record.property) !== record.value) {
           propertyValues.set(record.property, record.value)
-          if (record.property.startsWith('--gds-observed-')) {
+          if (
+            record.property.startsWith('--gds-state-') ||
+            record.property.startsWith('--gds-observed-')
+          ) {
             statePropertiesChanged = true
           }
         }