@graphprotocol/gds-react 0.1.1 → 0.2.0

package/src/components/Input.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ComponentProps, ReactElement, ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { parseNumber } from '@graphprotocol/gds-utils'
@@ -8,10 +8,10 @@ import { parseNumber } from '@graphprotocol/gds-utils'
 import { useControlled, useGDS } from '../hooks/index.ts'
 import { cn, splitProps } from '../utils/index.ts'
 import { Field, type FieldProps } from './base/Field.tsx'
-import { Render } from './base/Render.tsx'
+import { Render, type RenderProp } from './base/Render.tsx'
 import type { InputMeta } from './Input.meta.ts'
 
-export interface InputState {
+export type InputState = {
   inputProps: ComponentProps<'input'>
   inputWithUnitAndAction: ReactNode
 }
@@ -39,9 +39,7 @@ export interface InputProps
   message?: FieldProps['message'] | undefined
   unit?: ReactNode | undefined
   action?: ReactNode | undefined
-  renderInput?:
-    | ((renderProps: ComponentProps<'div'>, state: InputState) => ReactElement)
-    | undefined
+  renderInput?: RenderProp<InputState> | undefined
 }
 
 export function Input({
@@ -168,6 +166,7 @@ export function Input({
                       **:button:default-variant-tertiary
                       @prop-size-small/field:pe-0.5
                       @prop-size-small/field:**:button:var-[radius=var(--radius-4)]
+                      @prop-size-small/field:**:button-group:var-[gap=--spacing(0.5)]
                       @prop-size-medium/field:pe-1.5
                       @prop-size-large/field:pe-2
                       @prop-size-small/field:**:button-or-group:prop-size-xsmall

package/src/components/Keyboard.tsx

@@ -48,7 +48,7 @@ export function Keyboard({
     <kbd
       ref={cssPropsPolyfillPassedRef}
       className={cn(
-        `gds-keyboard root-inline u:shrink-0 u:font-mono u:font-regular u:whitespace-nowrap u:text-default
+        `gds-keyboard root-inline u:shrink-0 u:font-mono u:whitespace-nowrap
         i:leading-0`,
         className,
       )}

package/src/components/Link.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const LinkMeta = createComponent('Link', {
+  isolate: 'allow-inheritance',
   cssProps: {
     /** @default 'primary' */
     variant: {

package/src/components/Link.tsx

@@ -15,7 +15,7 @@ export declare namespace LinkProps {
     /** @default 'primary' */
     variant?: 'primary' | 'secondary' | undefined
     addonBefore?: AddonValue | undefined
-    /** Defaults to `ArrowUpRightInteractiveIcon` if `href` is set and `target` is `_blank` */
+    /** Defaults to `ArrowUpRightInteractiveIcon` if `href` is defined and `target` is `_blank` */
     addonAfter?: AddonValue | undefined
   }
   interface ButtonProps
@@ -70,8 +70,7 @@ export function Link({
       disabled={disabled}
       data-variant={cssProps.variant}
       className={cn(
-        `gds-link isolate ${/* Allow nested elements (e.g. `CodeInline`) to have a negative `z-index` to appear behind the underline */ ''}
-        root-inline u:w-max u:max-w-full u:wrap-anywhere u:outline-0
+        `gds-link root-inline u:w-max u:max-w-full u:wrap-anywhere u:outline-0
         u:hover:state-hover
         u:focus-visible:state-focus
         u:active:state-active

package/src/components/Menu.meta.ts

@@ -1,5 +1,43 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
-export const MenuMeta = createComponent('Menu')
+export const MenuMeta = createComponent('Menu', {
+  isolate: false,
+  cssProps: {
+    /** @default 'bottom' // or for nested menus, 'end' */
+    side: {
+      type: 'values',
+      values: ['top', 'bottom', 'start', 'end'],
+      defaultValue: 'bottom',
+    },
+    /** @default 1 // or for nested menus, 3 */
+    gap: {
+      type: 'number',
+      defaultValue: 1,
+    },
+    /** @default 'start' */
+    align: {
+      type: 'values',
+      values: ['start', 'center', 'end'],
+      defaultValue: 'start',
+    },
+    /** @default 0 // or for nested menus, -2 */
+    alignOffset: {
+      type: 'number',
+      defaultValue: 0,
+    },
+    /** @default false */
+    matchTriggerWidth: {
+      type: 'values',
+      values: [false, true, 'at-least', 'at-most'],
+      defaultValue: false,
+    },
+    /** @default false */
+    matchTriggerHeight: {
+      type: 'values',
+      values: [false, true, 'at-least', 'at-most'],
+      defaultValue: false,
+    },
+  },
+})
 
 export const MenuItemMeta = createComponent('MenuItem')