@graphprotocol/gds-react 0.1.1 → 0.2.0

package/src/components/Modal.meta.ts

@@ -2,7 +2,7 @@ import { createComponent } from '@graphprotocol/gds-css'
 
 export const ModalMeta = createComponent('Modal', {
   cssProps: {
-    /** @default 'dialog' */
+    /** @default 'dialog' // or on small screens (i.e. `max-xs`), 'drawer' */
     variant: {
       type: 'values',
       values: ['dialog', 'drawer'],

package/src/components/Modal.parts.tsx

@@ -7,7 +7,6 @@ import {
   useRef,
   useState,
   type ComponentProps,
-  type ReactElement,
   type ReactNode,
 } from 'react'
 import { Dialog } from '@base-ui/react/dialog'
@@ -18,12 +17,14 @@ import { ArrowLeftIcon, XIcon } from '@graphprotocol/gds-react/icons'
 import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { Portal } from './base/Portal.tsx'
+import type { RenderProp } from './base/Render.tsx'
 import { Transition } from './base/Transition.tsx'
 import { Button } from './Button.tsx'
 import { ButtonGroup } from './ButtonGroup.tsx'
 import { Divider } from './Divider.tsx'
 import { ModalMeta } from './Modal.meta.ts'
 import { Stepper, type StepperProps } from './Stepper.tsx'
+import { Tooltip } from './Tooltip.tsx'
 
 const ModalContext = createContext<{
   open: boolean
@@ -42,35 +43,29 @@ export interface ModalProps<
     Steps extends readonly string[] ? Steps[number] : number,
 >
   extends Omit<ComponentProps<'div'>, 'children'>, GDSComponentProps<typeof ModalMeta> {
-  open?: boolean | undefined
-  /** Defaults to `false` if `trigger` is provided, or `true` otherwise. */
-  defaultOpen?: boolean | undefined
-  onOpenChange?: ((open: boolean) => void) | undefined
   /**
-   * Element that opens the modal when clicked, or function that returns such an element (where you
-   * can customize the actual trigger functionality; it doesn't necessarily have to be on click).
-   * The trigger element is rendered alongside the modal. This provides an alternative to the
-   * controlled API (the `open` and `onOpenChange` props) that doesn't require any state in the
-   * parent component.
+   * Element that opens the modal when clicked, or a function that returns such an element (where
+   * you can fully customize the interaction that opens the modal, e.g. `trigger={(renderProps, {
+   * openModal }) => <button {...renderProps} onMouseEnter={openModal} />}`).
    */
   trigger?:
-    | ReactElement
-    | ((
-        renderProps: Record<string, unknown>,
-        state: {
-          open: boolean
-          setOpen: (open: boolean) => void
-          openModal: () => void
-          currentStep: Step
-          setCurrentStep: (step: Step) => void
-        },
-      ) => ReactElement)
+    | RenderProp<{
+        open: boolean
+        setOpen: (open: boolean) => void
+        openModal: () => void
+        currentStep: Step
+        setCurrentStep: (step: Step) => void
+      }>
     | undefined
+  open?: boolean | undefined
+  /** Defaults to `false` if `trigger` is provided, or `true` otherwise. */
+  defaultOpen?: boolean | undefined
+  onOpenChange?: ((open: boolean) => void) | undefined
   /**
    * Whether the user should be able to close the modal on their own, either by clicking outside of
    * it, by pressing Escape, or by clicking the close button that gets rendered in `Modal.Header`
    * when `dismissible` is `true` (though it can be replaced or removed altogether with the
-   * `buttonAfter` prop). Defaults to `true` if either `onOpenChange` or `trigger` is provided, or
+   * `buttonAfter` prop). Defaults to `true` if either `trigger` or `onOpenChange` is provided, or
    * `false` otherwise.
    */
   dismissible?: boolean | undefined
@@ -84,7 +79,7 @@ export interface ModalProps<
   onCurrentStepChange?: ((step: Step) => void) | undefined
   children?:
     | ReactNode
-    | ((renderProps: {
+    | ((state: {
         open: boolean
         setOpen: (open: boolean) => void
         closeModal: () => void
@@ -101,10 +96,10 @@ export const ModalRoot = <
   ref: passedRef,
   variant,
   size,
+  trigger,
   open: controlledOpen,
   defaultOpen,
   onOpenChange,
-  trigger,
   dismissible: passedDismissible,
   role,
   steps: passedSteps = 1 as Steps,
@@ -121,11 +116,21 @@ export const ModalRoot = <
     variant,
     size,
   })
+  const cssPropsAttributes = getCSSPropsAttributes(ModalMeta, { variant, size }, style)
+  const cssPropsClassName = cn(`
+    u:default-size-medium
+    u:default-variant-dialog
+    u:max-xs:default-variant-drawer
+    u:max-2xs:prop-size-small
+  `)
 
-  const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? !trigger, onOpenChange)
+  const hasTrigger = trigger !== undefined
+  const triggerIsElement = hasTrigger && typeof trigger !== 'function'
+
+  const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? !hasTrigger, onOpenChange)
 
   // TODO: Allow swiping down to close when `variant` is `drawer` and `dismissible` is `true`
-  const dismissible = passedDismissible ?? Boolean(onOpenChange || trigger)
+  const dismissible = passedDismissible ?? (hasTrigger || onOpenChange !== undefined)
 
   const steps = (
     typeof passedSteps === 'number'
@@ -151,15 +156,6 @@ export const ModalRoot = <
     previousStepIndex.current = currentStepIndex
   }
 
-  const defaultVariantClasses = cn(`
-    u:default-size-medium
-    u:default-variant-drawer
-    u:max-2xs:prop-size-small
-    u:xs:default-variant-dialog
-  `)
-  const cssPropsAttributes = getCSSPropsAttributes(ModalMeta, { variant, size }, style)
-  const triggerIsFunction = typeof trigger === 'function'
-
   return (
     <ModalContext.Provider
       value={{
@@ -187,42 +183,45 @@ export const ModalRoot = <
         }}
         disablePointerDismissal={!dismissible}
       >
-        {trigger ? (
-          <Dialog.Trigger
-            nativeButton={!triggerIsFunction}
-            render={
-              triggerIsFunction
-                ? (renderProps) => {
-                    // Don't pass event handlers and other potentially too specific props (e.g. `type`)
-                    const filteredRenderProps = Object.fromEntries(
-                      Object.entries(renderProps).filter(
-                        ([prop]) =>
-                          prop === 'ref' ||
-                          prop === 'id' ||
-                          prop.startsWith('aria-') ||
-                          prop.startsWith('data-'),
-                      ),
-                    )
-                    return trigger(filteredRenderProps, {
-                      open,
-                      setOpen,
-                      openModal: () => setOpen(true),
-                      currentStep,
-                      setCurrentStep,
-                    })
-                  }
-                : // oxlint-disable-next-line no-explicit-any
-                  (trigger satisfies ReactElement<any> as ReactElement<any>)
-            }
-          />
+        {hasTrigger ? (
+          // Hoist any tooltip used in `trigger` for its interactions to work properly
+          <Tooltip>
+            <Dialog.Trigger
+              render={
+                triggerIsElement
+                  ? trigger
+                  : (renderProps) => {
+                      // Don't pass event handlers and other potentially too specific props (e.g. `type`)
+                      const filteredRenderProps = Object.fromEntries(
+                        Object.entries(renderProps).filter(
+                          ([prop]) =>
+                            prop === 'ref' ||
+                            prop === 'id' ||
+                            prop === 'className' ||
+                            prop.startsWith('aria-') ||
+                            prop.startsWith('data-'),
+                        ),
+                      )
+                      return trigger(filteredRenderProps, {
+                        open,
+                        setOpen,
+                        openModal: () => setOpen(true),
+                        currentStep,
+                        setCurrentStep,
+                      })
+                    }
+              }
+            />
+          </Tooltip>
         ) : null}
         {/* Ensure the CSS props polyfill works even when the modal is not mounted */}
         <Portal>
           <div
             ref={cssPropsPolyfillRef}
-            className={cn('gds-modal i:invisible', defaultVariantClasses, className)}
+            className={cn('gds-modal i:invisible', cssPropsClassName, className)}
             {...cssPropsAttributes}
             {...cssPropsPolyfillAttributes}
+            {...dirProps}
             {...props}
           />
         </Portal>
@@ -240,7 +239,7 @@ export const ModalRoot = <
              */
             className={cn(
               `gds-modal @container-[size] pointer-events-none absolute top-0 left-0 u:text-16 u:text-muted i:invisible i:*:visible`,
-              defaultVariantClasses,
+              cssPropsClassName,
               className,
             )}
             {...cssPropsAttributes}
@@ -359,7 +358,7 @@ export const ModalHeader = ({
         ? { count: stepCount, currentIndex: currentStepIndex }
         : null
 
-  const buttonTransitionClasses = cn(`
+  const buttonTransitionClassName = cn(`
     min-w-5 shrink-0
     **:button:default-variant-naked
     style-nested/transition-content:items-center
@@ -406,7 +405,7 @@ export const ModalHeader = ({
           layout="flex-col"
           mode="exit-enter"
           animateSize={false}
-          className={buttonTransitionClasses}
+          className={buttonTransitionClassName}
         >
           {buttonBefore}
         </Transition>
@@ -435,7 +434,7 @@ export const ModalHeader = ({
           layout="flex-col"
           mode="exit-enter"
           animateSize={false}
-          className={buttonTransitionClasses}
+          className={buttonTransitionClassName}
         >
           {buttonAfter}
         </Transition>

package/src/components/OTCInput.meta.ts

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

package/src/components/OTCInput.tsx

@@ -45,7 +45,7 @@ export function OTCInput({
   const inputRef = useRef<HTMLInputElement>(null)
   const inputPassedRef = useMergedRefs(inputRef, passedRef)
 
-  const length = Math.min(Math.max(passedLength, 1), 32)
+  const length = Math.min(Math.max(passedLength, 1), 16)
 
   const [value, privateSetValue] = useControlled(controlledValue, defaultValue ?? '', onChange)
   const privatePaddedValue = useRef('')

package/src/components/Radio.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { CheckableMeta } from './base/Checkable.meta.ts'
 
 export const RadioMeta = createComponent('Radio', {
-  containerName: 'gds-checkable',
-  cssProps: {
-    /** @default 'medium' */
-    size: CheckableMeta.cssProps.size,
-  },
+  extends: CheckableMeta,
 })

package/src/components/SegmentedControl.meta.ts

@@ -11,4 +11,6 @@ export const SegmentedControlMeta = createComponent('SegmentedControl', {
   },
 })
 
-export const SegmentedControlOptionMeta = createComponent('SegmentedControlOption')
+export const SegmentedControlOptionMeta = createComponent('SegmentedControlOption', {
+  isolate: 'allow-inheritance',
+})

package/src/components/SegmentedControl.parts.tsx

@@ -30,7 +30,7 @@ import {
 } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { SegmentedControlMeta, type SegmentedControlOptionMeta } from './SegmentedControl.meta.ts'
-import { Tooltip, useCollectedTooltip, type TooltipProps } from './Tooltip.tsx'
+import { Tooltip, type TooltipProps } from './Tooltip.tsx'
 
 export interface SegmentedControlProps<T extends OptionValue = OptionValue>
   extends
@@ -53,6 +53,8 @@ export function SegmentedControlRoot<T extends OptionValue>({
   children,
   ...props
 }: SegmentedControlProps<T>) {
+  useGDS()
+
   if (props['aria-label'] === undefined && props['aria-labelledby'] === undefined) {
     // oxlint-disable-next-line no-console
     console.warn(
@@ -86,7 +88,10 @@ export function SegmentedControlRoot<T extends OptionValue>({
         setValue(newValue as T)
         setValueJustChanged(true)
       }}
-      className={cn('gds-segmented-control root-block u:w-max u:max-w-full i:h-max', className)}
+      className={cn(
+        'gds-segmented-control root-block [anchor-scope:all] u:w-max u:max-w-full i:h-max',
+        className,
+      )}
       {...getCSSPropsAttributes(SegmentedControlMeta, { size }, style)}
       {...cssPropsPolyfillAttributes}
       {...props}
@@ -140,28 +145,20 @@ export function SegmentedControlOption<T extends OptionValue>({
   children,
   ...props
 }: SegmentedControlOptionProps<T>) {
-  useGDS()
-
   const { rootProps, nestedProps } = splitProps(props)
 
   const buttonRef = useRef<HTMLSpanElement>(null)
   const buttonPassedRef = useMergedRefs(buttonRef, passedRef)
 
+  const autoValue = useAutoValue(children)
+  const value = passedValue !== undefined ? passedValue : autoValue
+
   const [stateRef, state] = useCSSState({
     pointer: undefined,
     checked: undefined,
     'is-toggle': undefined,
   })
 
-  const autoValue = useAutoValue(children)
-  const value = passedValue !== undefined ? passedValue : autoValue
-
-  const { onCollect, collectedContent } = useCollectedTooltip()
-  let tooltipProps: Omit<TooltipProps, 'children'> = { content: collectedContent }
-  if (tooltip !== undefined) {
-    tooltipProps = isReactNode(tooltip) ? { content: tooltip } : { ...tooltipProps, ...tooltip }
-  }
-
   const toggle = (event: MouseEvent | KeyboardEvent) => {
     if (!buttonRef.current) return
     const optionButtons =
@@ -187,32 +184,32 @@ export function SegmentedControlOption<T extends OptionValue>({
   }
 
   return (
-    /**
-     * This wrapper is necessary to ensure this component returns a single element (which some
-     * Tailwind classes might assume) because `Radio.Root` renders a `<input type="radio">` as a
-     * sibling of the button (actually a `<span>`). Ideally, we would make `Radio.Root` the root and
-     * it would render an internal component (e.g. `SegmentedControlOptionButton`) that would itself
-     * render a wrapper `<div>` around the button and the input (as well as calling `useCSSState`
-     * with a proper initial `checked` value, from the `render` state), but that is not possible
-     * currently (see https://github.com/mui/base-ui/issues/3143).
-     */
-    <div
-      ref={stateRef}
-      className={cn(
-        `gds-segmented-control-option root-block
-        state-[is-toggle=false]
-        group-[:has([data-checked]):has(>:nth-child(2)):not(:has(>:nth-child(3)))]/segmented-control-options:state-[is-toggle]
-        u:group-has-nested-hover/segmented-control--segmented-control-toggle:state-hover
-        u:group-has-nested-active/segmented-control--segmented-control-toggle:state-active
-        u:has-nested-hover/segmented-control-option-ref:state-hover
-        u:has-nested-active/segmented-control-option-ref:state-active
-        u:has-nested-[[data-checked]]/segmented-control-option-ref:state-checked`,
-        className,
-      )}
-      {...state.polyfillAttributes}
-      {...rootProps}
-    >
-      <Tooltip {...tooltipProps}>
+    <Tooltip {...(isReactNode(tooltip) ? { content: tooltip } : tooltip)}>
+      {/**
+       * This wrapper is necessary to ensure this component returns a single element (which some Tailwind
+       * classes might assume) because `Radio.Root` renders a `<input type="radio">` as a sibling of the
+       * button (actually a `<span>`). Ideally, we would make `Radio.Root` the root and it would render an
+       * internal component (e.g. `SegmentedControlOptionButton`) that would itself render a wrapper
+       * `<div>` around the button and the input (as well as calling `useCSSState` with a proper initial
+       * `checked` value, from the `render` state), but that is not possible currently (see
+       * https://github.com/mui/base-ui/issues/3143).
+       */}
+      <div
+        ref={stateRef}
+        className={cn(
+          `gds-segmented-control-option root-block
+          state-[is-toggle=false]
+          group-[:has([data-checked]):has(>:nth-child(2)):not(:has(>:nth-child(3)))]/segmented-control-options:state-[is-toggle]
+          u:group-has-nested-hover/segmented-control--segmented-control-toggle:state-hover
+          u:group-has-nested-active/segmented-control--segmented-control-toggle:state-active
+          u:has-nested-hover/segmented-control-option-ref:state-hover
+          u:has-nested-active/segmented-control-option-ref:state-active
+          u:has-nested-[[data-checked]]/segmented-control-option-ref:state-checked`,
+          className,
+        )}
+        {...state.polyfillAttributes}
+        {...rootProps}
+      >
         <Radio.Root
           ref={buttonPassedRef}
           value={value}
@@ -223,8 +220,7 @@ export function SegmentedControlOption<T extends OptionValue>({
             }
           }}
           className={`
-            nested/segmented-control-option-ref block w-full cursor-pointer outline-0
-            @state-checked/segmented-control-option:cursor-default
+            nested/segmented-control-option-ref block w-full outline-0
             @state-checked/segmented-control-option:[anchor-name:--gds-segmented-control-checked]
           `}
           {...nestedProps}
@@ -253,7 +249,7 @@ export function SegmentedControlOption<T extends OptionValue>({
             ) : null}
             {children ? (
               <span className="truncate px-1">
-                <Tooltip.Collector onCollect={onCollect}>{children}</Tooltip.Collector>
+                <Tooltip.Collector>{children}</Tooltip.Collector>
               </span>
             ) : null}
             {addonAfter ? (
@@ -270,8 +266,8 @@ export function SegmentedControlOption<T extends OptionValue>({
             `}
           />
         </Radio.Root>
-      </Tooltip>
-    </div>
+      </div>
+    </Tooltip>
   )
 }
 SegmentedControlOption.displayName = 'SegmentedControl.Option'

package/src/components/Stepper.meta.ts

@@ -2,6 +2,7 @@ import { createComponent } from '@graphprotocol/gds-css'
 
 export const StepperMeta = createComponent('Stepper', {
   cssProps: {
+    // TODO: Rename to `labelSide` and add a `hideLabel` prop?
     /** @default 'top' */
     labelPosition: {
       type: 'values',

package/src/components/Stepper.parts.tsx

@@ -39,7 +39,9 @@ export const StepperRoot = ({
 
   const childrenArray = children
     ? flattenChildren(children)
-    : Array.from({ length: Math.max(1, count) }, (_, index) => <StepperStep key={index} />)
+    : Array.from({ length: Math.min(Math.max(1, count), 16) }, (_, index) => (
+        <StepperStep key={index} />
+      ))
   const currentIndex = Math.min(
     Math.max(
       Number.isInteger(passedCurrentIndex) ? passedCurrentIndex : Math.round(passedCurrentIndex),

package/src/components/Switch.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { CheckableMeta } from './base/Checkable.meta.ts'
 
 export const SwitchMeta = createComponent('Switch', {
-  containerName: 'gds-checkable',
-  cssProps: {
-    /** @default 'medium' */
-    size: CheckableMeta.cssProps.size,
-  },
+  extends: CheckableMeta,
 })

package/src/components/TabSet.meta.ts

@@ -26,4 +26,6 @@ export const TabSetTabsMeta = createComponent('TabSetTabs', {
   },
 })
 
-export const TabSetTabMeta = createComponent('TabSetTab')
+export const TabSetTabMeta = createComponent('TabSetTab', {
+  isolate: 'allow-inheritance',
+})

package/src/components/TabSet.parts.tsx

@@ -118,8 +118,8 @@ export function TabSetTabs({
           className={`
             absolute inset-x-[anchor(inside)] bottom-0 h-px bg-(--border-color-brand-default) transition-[inset] duration-300
             [position-anchor:--gds-tab-set-underline]
-            not-group-hover/tab-set-tabs:duration-0
             not-supports-[position-anchor:--foo]:hidden
+            group-not-hover/tab-set-tabs:duration-0
             group-has-focus-visible/tab-set-tabs:hidden
           `}
         />

package/src/components/TextArea.meta.ts

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

package/src/components/ToggleButton.meta.ts

@@ -5,18 +5,13 @@ import { ButtonMeta } from './Button.meta.ts'
 type ButtonVariant = (typeof ButtonMeta.cssProps.variant.values)[number]
 
 export const ToggleButtonMeta = createComponent('ToggleButton', {
-  containerName: 'gds-button',
+  extends: ButtonMeta,
   cssProps: {
-    /** @default 'secondary' */
     variant: {
       type: 'values',
       values: ['secondary', 'tertiary', 'naked'] as const satisfies ButtonVariant[],
       defaultValue: 'secondary',
     },
-    /** @default 'medium' */
-    size: ButtonMeta.cssProps.size,
-    /** @default false */
-    hideLabel: ButtonMeta.cssProps.hideLabel,
   },
   vars: {
     fg: {

package/src/components/ToggleButton.tsx

@@ -17,8 +17,6 @@ export interface ToggleButtonProps
   extends
     Omit<ButtonProps.ToggleButtonProps, 'onChange' | 'variant'>,
     GDSComponentProps<typeof ToggleButtonMeta> {
-  checked?: boolean | undefined
-  defaultChecked?: boolean | undefined
   onChange?: ((checked: boolean) => void) | undefined
 }
 
@@ -36,13 +34,13 @@ export function ToggleButton({
 
   return (
     <InternalButton
-      {...props}
       checked={checked}
       onClick={(event) => {
         setChecked(!checked)
         onClick?.(event)
       }}
       className={cn('gds-toggle-button', className)}
+      {...props}
     />
   )
 }

package/src/components/Tooltip.meta.ts

@@ -3,9 +3,9 @@ import { createComponent } from '@graphprotocol/gds-css'
 export const TooltipMeta = createComponent('Tooltip', {
   cssProps: {
     /** @default 'top' */
-    position: {
+    side: {
       type: 'values',
-      values: ['top', 'bottom', 'inline-start', 'inline-end'],
+      values: ['top', 'bottom', 'start', 'end'],
       defaultValue: 'top',
     },
     /** @default 1 */
@@ -19,11 +19,22 @@ export const TooltipMeta = createComponent('Tooltip', {
       values: ['start', 'center', 'end'],
       defaultValue: 'center',
     },
+    /** @default 0 */
+    alignOffset: {
+      type: 'number',
+      defaultValue: 0,
+    },
     /** @default false */
     disabled: {
       type: 'values',
       values: [false, true],
       defaultValue: false,
     },
+    /** @default true */
+    overrideDescendants: {
+      type: 'values',
+      values: [false, true],
+      defaultValue: true,
+    },
   },
 })