@graphprotocol/gds-react 0.1.0 → 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/CodeBlock.parts.tsx

@@ -19,8 +19,6 @@ import {
 } from 'shiki'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
-
-import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import {
   EyeClosedIcon,
   EyeIcon,
@@ -37,7 +35,9 @@ import {
   FileTsxIcon,
   FileVueIcon,
   TerminalIcon,
-} from '../icons/index.generated.ts'
+} from '@graphprotocol/gds-react/icons'
+
+import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes, type Stringifiable } from '../utils/index.ts'
 import { Button } from './Button.tsx'
 import { CodeBlockMeta } from './CodeBlock.meta.ts'

package/src/components/CopyButton.tsx

@@ -3,9 +3,9 @@
 import { useRef, useState } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { CopyInteractiveIcon } from '@graphprotocol/gds-react/icons'
 
 import { useGDS } from '../hooks/index.ts'
-import { CopyInteractiveIcon } from '../icons/index.generated.ts'
 import { cn, isReactNode } from '../utils/index.ts'
 import { Button, type ButtonProps } from './Button.tsx'
 import type { CopyButtonMeta } from './CopyButton.meta.ts'

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/Keyboard.tsx

@@ -72,7 +72,7 @@ export function Keyboard({
           @prop-size-large/keyboard:text-14
           @prop-size-large/keyboard:[--height:--spacing(6)]
           ${/* Prevent incorrect alignment when empty */ ''}
-          empty:after:content-(--content-nbsp)
+          empty:after:content-nbsp
         `}
       >
         {childrenArray.map((child, index) => (

package/src/components/Label.tsx

@@ -30,11 +30,12 @@ export function Label({
 }: LabelProps) {
   useGDS()
 
+  const { rootProps, nestedProps } = splitProps(props)
+
   const [cssPropsPolyfillRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(LabelMeta, {
     variant,
     size,
   })
-  const { rootProps, nestedProps } = splitProps(props)
   const NestedElement = (props.htmlFor ? 'label' : 'span') as 'span'
 
   const {

package/src/components/Link.tsx

@@ -2,8 +2,9 @@
 
 import type { ComponentProps, CSSProperties } from 'react'
 
+import { ArrowUpRightInteractiveIcon } from '@graphprotocol/gds-react/icons'
+
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { ArrowUpRightInteractiveIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, trimReactNode } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'

package/src/components/Menu.parts.tsx

@@ -10,13 +10,11 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { Menu } from '@base-ui-components/react/menu'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { Menu } from '@base-ui/react/menu'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import type { Merge } from 'type-fest'
 
 import { twToPx, type GDSComponentProps } from '@graphprotocol/gds-css'
-
-import { useAutoValue, useControlled, useCSSState, useGDS } from '../hooks/index.ts'
 import {
   ArrowRightInteractiveIcon,
   ArrowUpRightInteractiveIcon,
@@ -25,7 +23,9 @@ import {
   LoadingIcon,
   MagnifyingGlassIcon,
   XIcon,
-} from '../icons/index.generated.ts'
+} from '@graphprotocol/gds-react/icons'
+
+import { useAutoValue, useControlled, useCSSState, useGDS } from '../hooks/index.ts'
 import { cn, type OptionValue } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
@@ -209,8 +209,8 @@ export function MenuRoot<T extends OptionValue>({
       }}
       modal={!isNested ? position !== false : (undefined as never)}
       /**
-       * This seems to be the only way to disable a `Menu.SubmenuTrigger`. See
-       * https://github.com/mui/base-ui/issues/1976#issuecomment-2914529452.
+       * This seems to be the only way to disable a `Menu.SubmenuTrigger` (see
+       * https://github.com/mui/base-ui/issues/1976#issuecomment-2914529452).
        */
       disabled={triggerIsElement ? Boolean(trigger.props.disabled) : (undefined as never)}
       closeParentOnEsc
@@ -219,10 +219,7 @@ export function MenuRoot<T extends OptionValue>({
         <Trigger
           nativeButton={isNested ? false : triggerIsElement}
           openOnHover={position && position.openOnHover !== false}
-          delay={
-            (position && typeof position.openOnHover === 'number' ? position.openOnHover : 100) ||
-            1 /* 0 is buggy: https://github.com/mui/base-ui/issues/3446 */
-          }
+          delay={position && typeof position.openOnHover === 'number' ? position.openOnHover : 100}
           data-open-on-hover={Boolean(position && position.openOnHover) || undefined}
           className={`
             u:i:open:data-open-on-hover:state-hover
@@ -433,27 +430,26 @@ const MaybePortal = ({
   ...props
 }: ComponentProps<'div'> & { position: MenuPosition | false }) => {
   const containerRef = useRef<HTMLDivElement>(null)
-  const parentPosition = useContext(MenuItemsContext)?.position
   const { dirProps } = useGDS()
 
   return (
     <>
       {/**
        * Ideally, we simply wouldn't render a `Menu.Portal` or `Menu.Positioner` when `position` is
-       * `false`, but they are required by Base UI (https://github.com/mui/base-ui/pull/1222). So we hack
-       * our way around them.
+       * `false`, but they are required by Base UI, so we hack our way around them.
        */}
       {!position ? <div ref={containerRef} className="contents *:contents" /> : null}
-      {/**
-       * If there is a parent menu that is not positioned, we need to specify `document.body` as the
-       * container of this menu's portal to prevent it from being rendered in the same portal container as
-       * the parent menu and appearing behind other elements as a result (since nested menus are always
-       * positioned). The reason we don't use `document.body` for all positioned menus regardless of
-       * whether it's nested or not is that it prevents the focus from returning to the trigger when the
-       * menu closes (https://github.com/mui/base-ui/issues/1809).
-       */}
       <Menu.Portal
-        container={!position ? containerRef : parentPosition === false ? document?.body : undefined}
+        container={
+          !position
+            ? containerRef
+            : /**
+               * Specifying `document.body` because while it is the default for top-level menus, a nested menu
+               * defaults to using the same portal as its parent, which is not desirable when the parent is not
+               * positioned (it can cause the nested menu to appear behind other elements).
+               */
+              document?.body
+        }
       >
         <Menu.Positioner
           align={position ? position.align : 'start'}
@@ -518,7 +514,7 @@ export function MenuGroup<T extends OptionValue>({
             <Menu.RadioGroup
               value={value}
               defaultValue={defaultValue}
-              {...(onChange !== undefined ? { onValueChange: onChange } : {})}
+              {...(onChange !== undefined && { onValueChange: onChange })}
             />
           ) : (
             <div />

package/src/components/Modal.parts.tsx

@@ -10,7 +10,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { Dialog } from '@base-ui-components/react/dialog'
+import { Dialog } from '@base-ui/react/dialog'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { ArrowLeftIcon, XIcon } from '@graphprotocol/gds-react/icons'

package/src/components/OTCInput.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import { useControlled, useGDS } from '../hooks/index.ts'
 import { cn } from '../utils/index.ts'

package/src/components/Search.meta.ts

@@ -0,0 +1,24 @@
+import { createComponent } from '@graphprotocol/gds-css'
+
+export const SearchMeta = createComponent('Search', {
+  cssProps: {
+    /** @default 'medium' */
+    size: {
+      type: 'values',
+      values: ['small', 'medium'],
+      defaultValue: 'medium',
+    },
+    /** @default 'full' */
+    layout: {
+      type: 'values',
+      values: ['compact', 'full'],
+      defaultValue: 'full',
+    },
+  },
+  vars: {
+    'input-width': {
+      '@variant @prop-size-small/search': '--spacing(32)',
+      '@variant @prop-size-medium/search': '--spacing(40)',
+    },
+  },
+})