@graphprotocol/gds-react 0.2.0 → 0.2.2

package/src/components/base/index.ts

@@ -18,6 +18,7 @@ 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 { Presence, usePresence, type PresenceProps } from './Presence.tsx'
 export {
   Render,
   type RenderFnProps,

package/src/components/index.ts

@@ -63,6 +63,16 @@ export {
 export { ModalMeta } from './Modal.meta.ts'
 export { OTCInput, type OTCInputProps } from './OTCInput.tsx'
 export { OTCInputMeta } from './OTCInput.meta.ts'
+export {
+  Pane,
+  usePane,
+  type PaneContainerProps,
+  type PaneProps,
+  type PaneProviderProps,
+  type PaneToggleButtonProps,
+  type UsePaneOptions,
+} from './Pane.tsx'
+export { PaneContainerMeta, PaneMeta } from './Pane.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'

package/src/hooks/useCSSProp.ts

@@ -8,7 +8,7 @@ import {
   type GDSComponent,
 } from '@graphprotocol/gds-css'
 
-import { styleScheduler } from '../utils/styleScheduler.ts'
+import { styleScheduler } from '../utils/index.ts'
 
 /**
  * Returns a `ref` to set on an element, and an async function to get the current value of a CSS

package/src/hooks/useControlled.ts

@@ -1,20 +1,28 @@
-import { useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 export function useControlled<T, OnChangeValue extends T = T, OnChangeArgs extends unknown[] = []>(
   controlledValue: T | undefined,
   defaultValue: T,
   onChange?: (value: OnChangeValue, ...args: OnChangeArgs) => void,
 ) {
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
   const [uncontrolledValue, setUncontrolledValue] = useState(
     controlledValue !== undefined ? controlledValue : defaultValue,
   )
+
   const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
-  const setValue = (newValue: OnChangeValue, ...args: OnChangeArgs) => {
-    if (newValue === value) return
-    onChange?.(newValue, ...args)
-    if (controlledValue === undefined) {
-      setUncontrolledValue(newValue)
-    }
-  }
+  const setValue = useCallback(
+    (newValue: OnChangeValue, ...args: OnChangeArgs) => {
+      if (newValue === value) return
+      onChangeRef.current?.(newValue, ...args)
+      if (controlledValue === undefined) {
+        setUncontrolledValue(newValue)
+      }
+    },
+    [controlledValue, value],
+  )
+
   return [value, setValue] as const
 }

package/src/hooks/useGDS.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 
-import { GDSContext } from '../GDSProvider.tsx'
+import { GDSContext } from '../GDSContext.ts'
 
 /** Throws an error if used outside of a `GDSProvider`. */
 export function useGDS() {

package/src/hooks/useStyleObserver.ts

@@ -2,7 +2,7 @@ import { useCallback, useLayoutEffect, useRef, type Ref } from 'react'
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import StyleObserver from 'style-observer'
 
-import { styleScheduler } from '../utils/styleScheduler.ts'
+import { styleScheduler } from '../utils/index.ts'
 import { useEffectWithRefDeps } from './useEffectWithRefDeps.ts'
 
 type Record<T extends string> = Parameters<ConstructorParameters<typeof StyleObserver>[0]>[0][0] & {

package/src/tailwind-plugin.ts

@@ -31,6 +31,7 @@ import { LinkMeta } from './components/Link.meta.ts'
 import { MenuItemMeta, MenuMeta } from './components/Menu.meta.ts'
 import { ModalMeta } from './components/Modal.meta.ts'
 import { OTCInputMeta } from './components/OTCInput.meta.ts'
+import { PaneContainerMeta, PaneMeta } from './components/Pane.meta.ts'
 import { RadioMeta } from './components/Radio.meta.ts'
 import { SearchMeta } from './components/Search.meta.ts'
 import {
@@ -104,6 +105,8 @@ const gdsTailwindPluginWithComponents: ReturnType<typeof createPlugin> = createP
     MenuMeta,
     ModalMeta,
     OTCInputMeta,
+    PaneContainerMeta,
+    PaneMeta,
     RadioMeta,
     SearchMeta,
     SegmentedControlMeta,

package/src/utils/InlineCounter.tsx

@@ -0,0 +1,17 @@
+import { useState, type ComponentProps } from 'react'
+
+export function InlineCounter(props: ComponentProps<'span'>) {
+  const [count, setCount] = useState(0)
+  return (
+    <span {...props}>
+      {count}{' '}
+      <button
+        type="button"
+        onClick={() => setCount((prev) => prev + 1)}
+        className="inline hover:underline"
+      >
+        (increment)
+      </button>
+    </span>
+  )
+}

package/src/utils/RenderCount.tsx

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react'
+import { useRenderCount } from '@react-hookz/web'
+
+export function RenderCount(props: ComponentProps<'span'>) {
+  const renderCount = useRenderCount()
+  return <span {...props}>{renderCount}</span>
+}

package/src/utils/index.ts

@@ -2,8 +2,10 @@ export { cn } from './cn.ts'
 export { getAssetUrl } from './getAssetUrl.ts'
 export { getCSSPropsAttributes } from './getCSSPropsAttributes.ts'
 export { getReactNodeKey } from './getReactNodeKey.ts'
+export { InlineCounter } from './InlineCounter.tsx'
 export { isReactNode } from './isReactNode.ts'
 export { reactNodeToString } from './reactNodeToString.ts'
+export { RenderCount } from './RenderCount.tsx'
 export { splitProps } from './splitProps.ts'
 export { styleScheduler } from './styleScheduler.ts'
 export { trimReactNode } from './trimReactNode.tsx'