@graphprotocol/gds-react 0.1.2 → 0.2.1

package/src/components/Pane.tsx

@@ -0,0 +1,17 @@
+import { PaneContainer, PaneProvider, PaneRoot, PaneToggleButton } from './Pane.parts.tsx'
+
+export const Pane = Object.assign(PaneRoot, {
+  Provider: PaneProvider,
+  Container: PaneContainer,
+  ToggleButton: PaneToggleButton,
+})
+
+export { usePane } from './Pane.parts.tsx'
+
+export type {
+  PaneContainerProps,
+  PaneProps,
+  PaneProviderProps,
+  PaneToggleButtonProps,
+  UsePaneOptions,
+} from './Pane.parts.tsx'

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

@@ -102,7 +102,7 @@ export function Search({
       data-size={cssProps.size}
       data-layout={cssProps.layout}
       className={cn(
-        `gds-search root-flex flex-col u:max-w-full
+        `gds-search root-flex flex-col u:h-max u:max-w-full
         u:hover:state-hover
         u:active:state-active
         u:data-[layout=compact]:data-[size=medium]:min-w-10

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
@@ -88,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}
@@ -156,12 +159,6 @@ export function SegmentedControlOption<T extends OptionValue>({
     'is-toggle': undefined,
   })
 
-  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,7 +184,7 @@ export function SegmentedControlOption<T extends OptionValue>({
   }
 
   return (
-    <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
@@ -252,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 ? (

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

@@ -34,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,
+    },
   },
 })