@graphprotocol/gds-react 0.1.0 → 0.1.1

package/src/components/Search.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import { useEffect, useRef, type ComponentProps } from 'react'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
+
+import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { MagnifyingGlassIcon, XIcon } from '@graphprotocol/gds-react/icons'
+
+import { useControlled, useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
+import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
+import { Button } from './Button.tsx'
+import { Keyboard } from './Keyboard.js'
+import { SearchMeta } from './Search.meta.ts'
+
+export interface SearchProps
+  extends
+    Omit<ComponentProps<'input'>, 'disabled' | 'onChange' | 'size' | 'type'>,
+    GDSComponentProps<typeof SearchMeta> {
+  value?: string | undefined
+  defaultValue?: string | undefined
+  onChange?: ((value: string) => void) | undefined
+  /**
+   * Key that focuses the search input when pressed. Set to `false` to disable.
+   *
+   * @default '/'
+   */
+  focusKey?: string | false | undefined
+}
+
+export function Search({
+  ref: passedRef,
+  size,
+  layout,
+  placeholder = 'Search...',
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  focusKey = '/',
+  className,
+  style,
+  ...props
+}: SearchProps) {
+  useGDS()
+
+  const { rootProps, nestedProps } = splitProps(props)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputPassedRef = useMergedRefs(inputRef, passedRef)
+  const previousActiveElementRef = useRef<HTMLElement | null>(null)
+  const [value, setValue] = useControlled(controlledValue, defaultValue ?? '', onChange)
+
+  const [stateRef, state] = useCSSState({
+    pointer: undefined,
+    focus: undefined,
+    blank: value === '',
+    open: value !== '',
+  })
+  const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
+    SearchMeta,
+    { size, layout },
+    { ref: stateRef, returnPropValues: { size, layout } },
+  )
+
+  useEffect(() => {
+    if (!focusKey) return
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key !== focusKey) return
+
+      const input = inputRef.current
+      if (!input) return
+
+      // Don't focus if already focused on an interactive element
+      const activeElement = document.activeElement
+      if (
+        activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement ||
+        (activeElement instanceof HTMLElement && activeElement.isContentEditable)
+      ) {
+        return
+      }
+
+      // Don't focus if the input has an inert/hidden ancestor
+      if (input.closest('[inert], [data-base-ui-inert], [aria-hidden="true"]')) {
+        return
+      }
+
+      event.preventDefault()
+      // Store the currently focused element before focusing the input
+      previousActiveElementRef.current = activeElement instanceof HTMLElement ? activeElement : null
+      input.focus()
+      input.select()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [focusKey])
+
+  return (
+    <div
+      ref={cssPropsPolyfillStateRef}
+      data-size={cssProps.size}
+      data-layout={cssProps.layout}
+      className={cn(
+        `gds-search root-flex flex-col u:max-w-full
+        u:hover:state-hover
+        u:active:state-active
+        u:data-[layout=compact]:data-[size=medium]:min-w-10
+        u:data-[layout=compact]:data-[size=small]:min-w-8
+        u:has-nested-not-blank/search-ref:expose-open
+        u:has-nested-blank/search-ref:expose-blank
+        u:has-nested-focus-visible/search-ref:expose-focus
+        u:has-nested-focus-visible/search-ref:expose-open
+        u:has-nested-active/search-clear-button:state-focus`,
+        className,
+      )}
+      {...state.exposedAttributes}
+      {...state.polyfillAttributes}
+      {...getCSSPropsAttributes(SearchMeta, { size, layout }, style)}
+      {...cssPropsPolyfillAttributes}
+      {...rootProps}
+    >
+      <div
+        className={`
+          flex h-(--height) grow overflow-clip text-form-text duration-300
+          @prop-size-small/search:[--height:--spacing(8)]
+          @prop-size-small/search:[--padding:--spacing(2)]
+          @prop-size-medium/search:[--height:--spacing(10)]
+          @prop-size-medium/search:[--padding:--spacing(2.5)]
+          @prop-layout-compact/search:transition-[width]
+          @prop-layout-compact/search:@state-not-open/search:w-(--height)
+          @prop-layout-compact/search:@prop-size-small/search:animate-[width-1_1ms]
+          @prop-layout-compact/search:@prop-size-medium/search:animate-[width-2_1ms]
+        `}
+      >
+        <div
+          className={`
+            h-full w-(--gds-search-input-width) grow border border-form-idle transition
+            @state-hover/search:border-form-hover
+            @state-focus/search:border-focus
+            @state-active/search:transition-none
+            @prop-size-small/search:rounded-6
+            @prop-size-medium/search:rounded-8
+          `}
+        />
+        <input
+          ref={inputPassedRef}
+          type="search"
+          placeholder={placeholder}
+          aria-label={placeholder || 'Search'}
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onKeyDown={(event) => {
+            nestedProps.onKeyDown?.(event)
+            if (event.defaultPrevented) return
+            if (event.key === 'Escape' && value === '') {
+              event.preventDefault()
+              inputRef.current?.blur()
+              // Restore focus to the previous element if it still exists in the DOM
+              if (
+                previousActiveElementRef.current &&
+                document.contains(previousActiveElementRef.current)
+              ) {
+                previousActiveElementRef.current.focus()
+                previousActiveElementRef.current = null
+              }
+            }
+          }}
+          className={`
+            nested/search-ref absolute end-0 top-0 size-full ps-(--padding) pe-(--height) outline-0
+            @state-not-focus/search:@state-blank/search:ps-[calc(var(--height)+var(--padding))]
+            @state-focus/search:placeholder:text-transparent
+            @prop-size-small/search:text-12
+            @prop-size-medium/search:text-14
+            @prop-layout-compact/search:@state-not-open/search:w-screen
+            @prop-layout-compact/search:@state-not-open/search:opacity-0
+          `}
+          {...nestedProps}
+        />
+        <div
+          className={`
+            pointer-events-none absolute inset-y-0 start-0 flex w-(--height) items-center justify-center
+            border-e border-form-idle transition
+            @state-hover/search:border-form-hover
+            @state-focus/search:hidden
+            @prop-layout-compact/search:@state-not-open/search:border-0
+            @prop-layout-compact/search:@state-open/search:@state-not-blank/search:hidden
+            @prop-layout-full/search:@state-not-blank/search:hidden
+          `}
+        >
+          <MagnifyingGlassIcon
+            alt=""
+            className={`
+              @prop-size-small/search:prop-size-3.5
+              @prop-size-medium/search:prop-size-4
+            `}
+          />
+        </div>
+        <div
+          className={`
+            pointer-events-none absolute inset-y-0 end-0 grid w-(--height) place-items-center
+            *:col-span-full *:row-span-full
+          `}
+        >
+          <Button
+            variant="tertiary"
+            size="xsmall"
+            tooltip={null}
+            tabIndex={-1}
+            onClick={() => {
+              setValue('')
+              inputRef.current?.focus()
+            }}
+            className={`
+              nested/search-clear-button pointer-events-auto size-6 var-[radius=var(--radius-4)]
+              @state-blank/search:hidden
+              @prop-layout-compact/search:@state-not-open/search:hidden
+            `}
+          >
+            <XIcon alt="Clear" />
+          </Button>
+          {focusKey ? (
+            <Keyboard
+              size="large"
+              className={`
+                @state-not-blank/search:hidden
+                @state-focus/search:hidden
+                @prop-layout-compact/search:@state-not-open/search:hidden
+              `}
+            >
+              {focusKey}
+            </Keyboard>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/SegmentedControl.parts.tsx

@@ -8,9 +8,9 @@ import {
   type KeyboardEvent,
   type MouseEvent,
 } from 'react'
-import { Radio } from '@base-ui-components/react/radio'
-import { RadioGroup } from '@base-ui-components/react/radio-group'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 
@@ -142,6 +142,8 @@ export function SegmentedControlOption<T extends OptionValue>({
 }: SegmentedControlOptionProps<T>) {
   useGDS()
 
+  const { rootProps, nestedProps } = splitProps(props)
+
   const buttonRef = useRef<HTMLSpanElement>(null)
   const buttonPassedRef = useMergedRefs(buttonRef, passedRef)
 
@@ -154,8 +156,6 @@ export function SegmentedControlOption<T extends OptionValue>({
   const autoValue = useAutoValue(children)
   const value = passedValue !== undefined ? passedValue : autoValue
 
-  const { rootProps, nestedProps } = splitProps(props)
-
   const { onCollect, collectedContent } = useCollectedTooltip()
   let tooltipProps: Omit<TooltipProps, 'children'> = { content: collectedContent }
   if (tooltip !== undefined) {
@@ -190,12 +190,11 @@ export function SegmentedControlOption<T extends OptionValue>({
     /**
      * 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 (which is a `<span>`, see https://github.com/mui/base-ui/pull/3205).
-     * 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).
+     * 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}

package/src/components/TabSet.parts.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { createContext, useContext, type ComponentProps } from 'react'
-import { Tabs } from '@base-ui-components/react/tabs'
+import { Tabs } from '@base-ui/react/tabs'
 import flattenChildren from 'react-keyed-flatten-children'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
@@ -265,7 +265,7 @@ export function TabSetPanels({
         u:group-data-[activation-direction=right]/tab-set:var-[exit-translate-x=-32px]
         u:has-nested-focus-visible/tab-set-panel:animate
         u:has-nested-focus-visible/tab-set-panel:outline
-        u:has-nested-focus-visible/tab-set-panel:animate-outline-from-(--border-color-focus)`,
+        u:has-nested-focus-visible/tab-set-panel:animate-outline-from-focus`,
         transition && typeof transition === 'object' ? transition.className : undefined,
         className,
       )}

package/src/components/Tooltip.parts.tsx

@@ -2,15 +2,17 @@
 
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
   type ComponentProps,
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { Tooltip } from '@base-ui-components/react/tooltip'
+import { Tooltip } from '@base-ui/react/tooltip'
 
 import { twToPx, type GDSComponentProps } from '@graphprotocol/gds-css'
 
@@ -83,9 +85,9 @@ export function TooltipRoot({
   const enabled = !cssProps.disabled && !hasEnabledTooltipAncestor && Boolean(content)
   const [open, ownSetOpen] = useControlled(controlledOpen, false, onOpenChange)
   const nestedSetOpen = useRef<(newOpen: boolean) => void>(null)
-  const registerNestedSetOpen = (newNestedSetOpen: (newOpen: boolean) => void) => {
+  const registerNestedSetOpen = useCallback((newNestedSetOpen: (newOpen: boolean) => void) => {
     nestedSetOpen.current = newNestedSetOpen
-  }
+  }, [])
   const setOpen = (newOpen: boolean) => {
     ownSetOpen(newOpen)
     /**
@@ -112,8 +114,16 @@ export function TooltipRoot({
     clearOpenTimeout()
   }
 
+  const tooltipContextValue = useMemo(
+    () => ({
+      enabled,
+      registerNestedSetOpen,
+    }),
+    [enabled, registerNestedSetOpen],
+  )
+
   return (
-    <TooltipContext.Provider value={{ enabled, registerNestedSetOpen }}>
+    <TooltipContext.Provider value={tooltipContextValue}>
       <TooltipCollector onCollect={onCollect}>
         <Tooltip.Root
           disabled={!enabled}
@@ -145,6 +155,7 @@ export function TooltipRoot({
               side={cssProps.position}
               sideOffset={twToPx(cssProps.gap)}
               align={cssProps.align}
+              disableAnchorTracking
               {...dirProps}
             >
               <Tooltip.Popup

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

@@ -4,6 +4,7 @@ import {
   createContext,
   isValidElement,
   useContext,
+  useMemo,
   useRef,
   useState,
   type ComponentProps,
@@ -13,7 +14,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import { mergeProps } from '@react-aria/utils'
 import { useButton } from 'react-aria'
 
@@ -337,25 +338,38 @@ export const ButtonOrLinkConfig = ({
   children,
 }: ButtonOrLinkConfigProps) => {
   const ancestorConfig = useContext(ButtonOrLinkConfigContext)
+
   const onClick =
     passedOnClick && ancestorConfig?.onClick
-      ? (
-          event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>,
-          props: InternalButtonOrLinkProps,
-        ) => {
-          passedOnClick(event, props)
-          if (event.isPropagationStopped()) return
-          ancestorConfig.onClick!(event, props)
-        }
+      ? (() => {
+          const ancestorOnClick = ancestorConfig.onClick
+          return (
+            event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>,
+            props: InternalButtonOrLinkProps,
+          ) => {
+            passedOnClick(event, props)
+            if (event.isPropagationStopped()) return
+            ancestorOnClick(event, props)
+          }
+        })()
       : (passedOnClick ?? ancestorConfig?.onClick)
   const transformProps =
     passedTransformProps && ancestorConfig?.transformProps
-      ? (props: InternalButtonOrLinkProps) => {
-          return ancestorConfig.transformProps!(passedTransformProps(props))
-        }
+      ? (() => {
+          const ancestorTransformProps = ancestorConfig.transformProps
+          return (props: InternalButtonOrLinkProps) => {
+            return ancestorTransformProps(passedTransformProps(props))
+          }
+        })()
       : (passedTransformProps ?? ancestorConfig?.transformProps)
+
+  const buttonOrLinkConfigContextValue = useMemo(() => {
+    if (!onClick && !transformProps) return null
+    return { onClick, transformProps }
+  }, [onClick, transformProps])
+
   return (
-    <ButtonOrLinkConfigContext.Provider value={{ onClick, transformProps }}>
+    <ButtonOrLinkConfigContext.Provider value={buttonOrLinkConfigContextValue}>
       {children}
     </ButtonOrLinkConfigContext.Provider>
   )

package/src/components/base/Render.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { ComponentProps, ElementType } from 'react'
-import { useRender } from '@base-ui-components/react/use-render'
+import { useRender } from '@base-ui/react/use-render'
 
 export type RenderProps<
   T extends ElementType = 'span',

package/src/components/index.ts

@@ -63,6 +63,8 @@ export { OTCInput, type OTCInputProps } from './OTCInput.tsx'
 export { OTCInputMeta } from './OTCInput.meta.ts'
 export { Radio, type RadioAreaProps, type RadioGroupProps, type RadioProps } from './Radio.tsx'
 export { RadioMeta } from './Radio.meta.ts'
+export { Search, type SearchProps } from './Search.tsx'
+export { SearchMeta } from './Search.meta.ts'
 export {
   SegmentedControl,
   type SegmentedControlOptionProps,

package/src/hooks/useCSSProp.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef, type Ref, type RefCallback } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import {
   parseCSSPropValue,

package/src/hooks/useEffectWithRefDeps.ts

@@ -6,7 +6,7 @@ import {
   type Ref,
   type RefCallback,
 } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import { useCustomCompareEffect, useCustomCompareMemo, type EffectHook } from '@react-hookz/web'
 import { isEqual } from '@ver0/deep-equal'
 

package/src/hooks/useNumberInput.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
 import {
   bigIntToNumber,

package/src/hooks/useStyleObserver.ts

@@ -1,5 +1,5 @@
 import { useCallback, useLayoutEffect, useRef, type Ref } from 'react'
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs'
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import StyleObserver from 'style-observer'
 
 import { styleScheduler } from '../utils/styleScheduler.ts'

package/src/tailwind-plugin.ts

@@ -31,6 +31,7 @@ import { MenuItemMeta, MenuMeta } from './components/Menu.meta.ts'
 import { ModalMeta } from './components/Modal.meta.ts'
 import { OTCInputMeta } from './components/OTCInput.meta.ts'
 import { RadioMeta } from './components/Radio.meta.ts'
+import { SearchMeta } from './components/Search.meta.ts'
 import {
   SegmentedControlMeta,
   SegmentedControlOptionMeta,
@@ -101,6 +102,7 @@ const gdsTailwindPluginWithComponents: ReturnType<typeof createPlugin> = createP
     ModalMeta,
     OTCInputMeta,
     RadioMeta,
+    SearchMeta,
     SegmentedControlMeta,
     SegmentedControlOptionMeta,
     StatusMeta,