@graphprotocol/gds-react 0.1.1 → 0.1.2

package/src/components/Chip.parts.tsx

@@ -0,0 +1,329 @@
+'use client'
+
+import { createContext, useContext, type ComponentProps, type ReactNode } from 'react'
+import { Checkbox } from '@base-ui/react/checkbox'
+import { CheckboxGroup } from '@base-ui/react/checkbox-group'
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+
+import type { GDSComponentProps } from '@graphprotocol/gds-css'
+
+import { useAutoValue, useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
+import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
+import { renderAddon, type AddonValue } from './base/Addon.tsx'
+import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
+import { ChipGroupMeta, ChipMeta } from './Chip.meta.ts'
+
+type ExtractFn<T> = T extends (...args: infer A) => infer R ? (...args: A) => R : never
+
+export declare namespace ChipProps {
+  interface BaseProps extends GDSComponentProps<typeof ChipMeta> {
+    /** Name used to submit the chip's value when inside a `<Chip.Group type="checkbox">` in a form. */
+    name?: string | undefined
+    /** Value used to identify this chip when inside a `<Chip.Group>`. */
+    value?: string | undefined
+    addonBefore?: AddonValue | undefined
+    addonAfter?: AddonValue | undefined
+    count?: ReactNode | undefined
+  }
+  interface ButtonProps
+    extends
+      BaseProps,
+      Omit<ButtonOrLinkProps.ButtonProps, 'value'>,
+      ButtonOrLinkProps.DisableableProps {}
+  interface LinkProps
+    extends BaseProps, ButtonOrLinkProps.LinkProps, ButtonOrLinkProps.DisableableProps {}
+}
+
+export type ChipProps = ChipProps.ButtonProps | ChipProps.LinkProps
+
+interface ChipGroupContextValue {
+  type: 'checkbox' | 'radio'
+}
+
+const ChipGroupContext = createContext<ChipGroupContextValue | null>(null)
+
+export function ChipRoot({
+  size,
+  name,
+  value: passedValue,
+  addonBefore,
+  addonAfter,
+  count,
+  disabled = false,
+  className,
+  style,
+  children,
+  ...props
+}: ChipProps) {
+  useGDS()
+
+  const { rootProps, nestedProps } = splitProps(props)
+
+  const autoValue = useAutoValue(children)
+  const value = passedValue !== undefined ? passedValue : autoValue
+
+  const groupContext = useContext(ChipGroupContext)
+
+  const [stateRef, state] = useCSSState({
+    pointer: undefined,
+    focus: undefined,
+    checked: undefined,
+    disabled: Boolean(disabled),
+  })
+  const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
+    ChipMeta,
+    { size },
+    { ref: stateRef },
+  )
+
+  return (
+    <div
+      ref={cssPropsPolyfillStateRef}
+      data-type={groupContext?.type ?? 'plain'}
+      className={cn(
+        `gds-chip root-flex flex-col u:size-max u:max-w-full
+        u:has-nested-checked/chip-ref:expose-checked
+        u:has-nested-hover/chip-ref:expose-hover
+        u:has-nested-focus-visible/chip-ref:expose-focus
+        u:has-nested-disabled/chip-ref:expose-disabled
+        u:i:has-nested-checked/chip-ref:data-[type=radio]:state-idle`,
+        className,
+      )}
+      {...state.exposedAttributes}
+      {...state.polyfillAttributes}
+      {...getCSSPropsAttributes(ChipMeta, { size }, style)}
+      {...cssPropsPolyfillAttributes}
+      {...rootProps}
+    >
+      {(() => {
+        if (!groupContext || props.href !== undefined) {
+          return renderButtonOrLink({})
+        }
+
+        if (groupContext.type === 'checkbox') {
+          return (
+            <Checkbox.Root
+              name={name ?? (undefined as never)}
+              value={typeof value === 'string' ? value : (undefined as never)}
+              disabled={Boolean(disabled)}
+              nativeButton
+              render={renderButtonOrLink}
+            />
+          )
+        } else {
+          return (
+            <Radio.Root
+              value={value}
+              disabled={Boolean(disabled)}
+              nativeButton
+              render={renderButtonOrLink}
+            />
+          )
+        }
+
+        function renderButtonOrLink({
+          tabIndex: _tabIndex,
+          defaultChecked: _defaultChecked,
+          ...renderProps
+        }: Parameters<
+          ExtractFn<ComponentProps<typeof Checkbox.Root | typeof Radio.Root>['render']>
+        >[0]) {
+          return (
+            <ButtonOrLink
+              {...renderProps}
+              disabled={disabled}
+              className={cn(
+                renderProps.className,
+                `nested/chip-ref flex grow items-center justify-center
+                rounded-full border border-default text-muted transition
+                @state-checked/chip:border-brand-muted
+                @state-checked/chip:bg-brand-subtlest
+                @state-checked/chip:text-default
+                @state-hover/chip:border-strong
+                @state-hover/chip:text-default
+                @state-hover/chip:@state-checked/chip:border-brand-default
+                @state-hover/chip:@state-checked/chip:bg-brand-subtler
+                @prop-size-small/chip:h-6
+                @prop-size-small/chip:px-1
+                @prop-size-small/chip:text-12
+                @prop-size-medium/chip:h-8
+                @prop-size-medium/chip:px-1.5
+                @prop-size-medium/chip:text-14
+                @prop-size-large/chip:h-10
+                @prop-size-large/chip:px-2
+                @prop-size-large/chip:text-16
+                u:*:transition-opacity
+                u:*:@state-disabled/chip:opacity-disabled
+                u:*:@state-disabled/chip:grayscale
+                u:@prop-size-small/chip:addon-small
+                u:@prop-size-medium/chip:addon-medium
+                u:@prop-size-large/chip:addon-large
+                i:@state-disabled/chip:border-muted
+                i:@state-disabled/chip:bg-transparent
+                i:@state-disabled/chip:text-muted
+                i:@state-disabled/chip:@state-checked/chip:border-transparent
+                i:@state-disabled/chip:@state-checked/chip:bg-brand-subtlest`,
+              )}
+              {...nestedProps}
+            >
+              {/* Ensure rounded corners are clickable */}
+              <span className="absolute inset-0 not-in-clickable:hidden" />
+              {addonBefore ? <ChipAddon side="before">{renderAddon(addonBefore)}</ChipAddon> : null}
+              <span
+                className={`
+                  flex items-baseline
+                  @prop-size-small/chip:gap-0.5
+                  @prop-size-small/chip:px-0.5
+                  @prop-size-medium/chip:gap-1
+                  @prop-size-medium/chip:px-1
+                  @prop-size-large/chip:gap-1
+                  @prop-size-large/chip:px-1
+                `}
+              >
+                <span className="truncate">{children}</span>
+                {count ? (
+                  <span
+                    className={`
+                      max-w-full shrink-0 truncate text-subtle transition
+                      @state-enabled/chip:@state-checked/chip:text-current
+                      @state-enabled/chip:@state-hover/chip:text-current
+                      @prop-size-small/chip:text-10
+                      @prop-size-medium/chip:text-12
+                      @prop-size-large/chip:text-14
+                    `}
+                  >
+                    {count}
+                  </span>
+                ) : null}
+              </span>
+              {addonAfter ? <ChipAddon side="after">{renderAddon(addonAfter)}</ChipAddon> : null}
+            </ButtonOrLink>
+          )
+        }
+      })()}
+    </div>
+  )
+}
+ChipRoot.displayName = 'Chip'
+
+function ChipAddon({
+  side,
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'> & { side: 'before' | 'after' }) {
+  return (
+    <span
+      data-side={side}
+      className={cn(
+        `gds-addon root-flex items-center justify-center u:h-(--gds-addon-size) u:min-w-(--gds-addon-size) u:shrink-0
+        u:has-avatar-group:data-[side=after]:ps-0.5
+        u:has-tag:data-[side=after]:ps-0.5
+        u:has-avatar-group:data-[side=before]:pe-0.5
+        u:has-tag:data-[side=before]:pe-0.5`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export declare namespace ChipGroupProps {
+  interface BaseProps
+    extends Omit<ComponentProps<'div'>, 'onChange'>, GDSComponentProps<typeof ChipGroupMeta> {}
+  interface CheckboxProps extends BaseProps {
+    type: 'checkbox'
+    name?: undefined
+    /** Array of checked/selected chip values. */
+    value?: string[] | undefined
+    defaultValue?: string[] | undefined
+    onChange?: ((value: string[]) => void) | undefined
+  }
+  interface RadioProps extends BaseProps {
+    type: 'radio'
+    /** Name used to submit the checked/selected chip value when inside a form. */
+    name?: string | undefined
+    /** Checked/selected chip value. */
+    value?: string | undefined
+    defaultValue?: string | undefined
+    onChange?: ((value: string) => void) | undefined
+  }
+}
+
+export type ChipGroupProps = ChipGroupProps.CheckboxProps | ChipGroupProps.RadioProps
+
+export function ChipGroup({
+  ref: passedRef,
+  type,
+  name,
+  value,
+  defaultValue,
+  onChange,
+  size,
+  className,
+  style,
+  children,
+  ...props
+}: ChipGroupProps) {
+  useGDS()
+
+  if (props['aria-label'] === undefined && props['aria-labelledby'] === undefined) {
+    // oxlint-disable-next-line no-console
+    console.warn(
+      '[Chip.Group] One of `aria-label` or `aria-labelledby` should be set for accessibility',
+    )
+  }
+
+  const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
+    ChipGroupMeta,
+    { size },
+    { ref: passedRef, returnPropValues: { size } },
+  )
+
+  const sharedProps = {
+    ref: cssPropsPolyfillPassedRef,
+    'data-size': cssProps.size,
+    className: cn(
+      `gds-chip-group root-flex u:flex-wrap
+      u:data-[size=large]:gap-2
+      u:data-[size=medium]:gap-1.5
+      u:data-[size=small]:gap-1
+      u:**:chip:@prop-size-small/chip-group:prop-size-small
+      u:**:chip:@prop-size-medium/chip-group:prop-size-medium
+      u:**:chip:@prop-size-large/chip-group:prop-size-large`,
+      className,
+    ),
+    ...getCSSPropsAttributes(ChipGroupMeta, { size }, style),
+    ...cssPropsPolyfillAttributes,
+    ...props,
+  }
+
+  return (
+    <ChipGroupContext.Provider value={{ type }}>
+      {type === 'checkbox' ? (
+        <CheckboxGroup
+          {...sharedProps}
+          {...(value !== undefined && { value })}
+          {...(defaultValue !== undefined && { defaultValue })}
+          {...(onChange !== undefined && { onValueChange: onChange })}
+        >
+          {children}
+        </CheckboxGroup>
+      ) : (
+        <RadioGroup
+          name={name ?? (undefined as never)}
+          {...sharedProps}
+          {...(value !== undefined && { value })}
+          {...(defaultValue !== undefined && { defaultValue })}
+          {...(onChange !== undefined && { onValueChange: onChange as (value: unknown) => void })}
+        >
+          {children}
+        </RadioGroup>
+      )}
+    </ChipGroupContext.Provider>
+  )
+}
+ChipGroup.displayName = 'Chip.Group'

package/src/components/Chip.tsx

@@ -0,0 +1,7 @@
+import { ChipGroup, ChipRoot } from './Chip.parts.tsx'
+
+export const Chip = Object.assign(ChipRoot, {
+  Group: ChipGroup,
+})
+
+export type { ChipProps, ChipGroupProps } from './Chip.parts.tsx'

package/src/components/DescriptionList.parts.tsx

@@ -189,7 +189,7 @@ export function DescriptionListItem({
         <span
           className={`
             absolute inset-y-0 flex items-center justify-center
-            not-group-data-loading/description-list-item:hidden
+            group-not-data-loading/description-list-item:hidden
             @prop-orientation-horizontal/description-list:start-0
             @prop-orientation-vertical/description-list:end-0
             @prop-orientation-vertical/description-list:w-(--gds-addon-size)

package/src/components/SegmentedControl.parts.tsx

@@ -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(
@@ -140,22 +142,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) {
@@ -187,32 +187,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 {...tooltipProps}>
+      {/**
+       * 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 +223,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}
@@ -270,8 +269,8 @@ export function SegmentedControlOption<T extends OptionValue>({
             `}
           />
         </Radio.Root>
-      </Tooltip>
-    </div>
+      </div>
+    </Tooltip>
   )
 }
 SegmentedControlOption.displayName = 'SegmentedControl.Option'

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

package/src/components/Tooltip.parts.tsx

@@ -155,7 +155,6 @@ export function TooltipRoot({
               side={cssProps.position}
               sideOffset={twToPx(cssProps.gap)}
               align={cssProps.align}
-              disableAnchorTracking
               {...dirProps}
             >
               <Tooltip.Popup

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

@@ -68,19 +68,26 @@ export declare namespace InternalButtonOrLinkProps {
     linkComponent?: LinkComponent | undefined
   }
   interface ButtonProps
-    extends BaseProps, DisableableProps, Omit<ComponentProps<'button'>, 'disabled'> {
+    extends
+      BaseProps,
+      DisableableProps,
+      Omit<ComponentProps<'button'>, 'defaultValue' | 'disabled'> {
     href?: undefined
     target?: undefined
     checked?: undefined
+    defaultChecked?: undefined
   }
-  interface ToggleButtonProps extends Omit<ButtonProps, 'checked'> {
-    /** Whether the button is in a checked/selected/pressed state. */
-    checked?: boolean | 'indeterminate' | undefined
+  interface ToggleButtonProps extends Omit<ButtonProps, 'checked' | 'defaultChecked'> {
+    /** Whether the button is in a pressed/selected state. */
+    checked?: boolean | undefined
+    defaultChecked?: boolean | undefined
   }
-  interface LinkProps extends BaseProps, DisableableProps, ComponentProps<'a'> {
+  interface LinkProps
+    extends BaseProps, DisableableProps, Omit<ComponentProps<'a'>, 'defaultValue'> {
     href: string
     type?: undefined
     checked?: undefined
+    defaultChecked?: undefined
   }
 }
 
@@ -192,11 +199,19 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       role = 'button',
       type = 'button',
       checked,
+      defaultChecked,
       href: _href,
       target: _target,
       ...remainingProps
     } = nonBaseProps
 
+    if (defaultChecked !== undefined) {
+      // oxlint-disable-next-line no-console
+      console.warn(
+        '[ButtonOrLink] `defaultChecked` is not supported; use a controlled `checked` prop instead, or wrap `ButtonOrLink` in a component that manages the uncontrolled state',
+      )
+    }
+
     const Element = inline ? SpanButtonWithContext : ButtonWithContext
 
     const state: ButtonOrLinkState = {
@@ -208,22 +223,23 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
       checked,
     }
 
-    const checkedAttribute = (() => {
-      if (checked === undefined) {
-        return {}
-      }
-      if (
-        (role === 'option' || role === 'tab' || role === 'row' || role === 'gridcell') &&
-        checked !== 'indeterminate'
-      ) {
-        return { 'aria-selected': checked }
-      }
-      const checkedOrMixed = checked === 'indeterminate' ? ('mixed' as const) : checked
-      if (role === 'button') {
-        return { 'aria-pressed': checkedOrMixed }
-      }
-      return { 'aria-checked': checkedOrMixed }
-    })()
+    const checkedAttribute =
+      checked === undefined
+        ? {}
+        : ((checked: unknown) => {
+            if (
+              (role === 'option' || role === 'tab' || role === 'row' || role === 'gridcell') &&
+              checked !== 'indeterminate'
+            ) {
+              return { 'aria-selected': Boolean(checked) }
+            }
+            const checkedOrMixed =
+              checked === 'indeterminate' ? ('mixed' as const) : Boolean(checked)
+            if (role === 'button') {
+              return { 'aria-pressed': checkedOrMixed }
+            }
+            return { 'aria-checked': checkedOrMixed }
+          })(checked)
 
     let buttonProps: ComponentProps<typeof Element> = {
       role,
@@ -251,6 +267,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps) => {
     rel = target === '_blank' ? 'noopener noreferrer' : undefined,
     type: _type,
     checked: _checked,
+    defaultChecked: _defaultChecked,
     ...remainingProps
   } = nonBaseProps
 

package/src/components/index.ts

@@ -14,6 +14,8 @@ export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup.tsx'
 export { ButtonGroupMeta } from './ButtonGroup.meta.ts'
 export { Card, type CardProps } from './Card.tsx'
 export { CardMeta } from './Card.meta.ts'
+export { Chip, type ChipProps, type ChipGroupProps } from './Chip.tsx'
+export { ChipMeta, ChipGroupMeta } from './Chip.meta.ts'
 export { Cluster, type ClusterProps } from './Cluster.tsx'
 export { ClusterMeta } from './Cluster.meta.ts'
 export { CodeBlock, type CodeBlockProps, type CodeBlockTabsProps } from './CodeBlock.tsx'

package/src/tailwind-plugin.ts

@@ -16,6 +16,7 @@ import { ButtonMeta } from './components/Button.meta.ts'
 import { ButtonGroupMeta } from './components/ButtonGroup.meta.ts'
 import { CardMeta } from './components/Card.meta.ts'
 import { CheckboxMeta } from './components/Checkbox.meta.ts'
+import { ChipGroupMeta, ChipMeta } from './components/Chip.meta.ts'
 import { ClusterMeta } from './components/Cluster.meta.ts'
 import { CodeBlockMeta, CodeBlockTabsMeta } from './components/CodeBlock.meta.ts'
 import { CopyButtonMeta } from './components/CopyButton.meta.ts'
@@ -85,6 +86,8 @@ const gdsTailwindPluginWithComponents: ReturnType<typeof createPlugin> = createP
     CodeBlockTabsMeta,
     CheckableMeta,
     CheckboxMeta,
+    ChipMeta,
+    ChipGroupMeta,
     ClusterMeta,
     CopyButtonMeta,
     CurrencyInputMeta,