@graphprotocol/gds-react 0.1.2 → 0.2.1

package/src/components/Modal.meta.ts

@@ -2,7 +2,7 @@ import { createComponent } from '@graphprotocol/gds-css'
 
 export const ModalMeta = createComponent('Modal', {
   cssProps: {
-    /** @default 'dialog' */
+    /** @default 'dialog' // or on small screens (i.e. `max-xs`), 'drawer' */
     variant: {
       type: 'values',
       values: ['dialog', 'drawer'],

package/src/components/Modal.parts.tsx

@@ -7,7 +7,6 @@ import {
   useRef,
   useState,
   type ComponentProps,
-  type ReactElement,
   type ReactNode,
 } from 'react'
 import { Dialog } from '@base-ui/react/dialog'
@@ -18,6 +17,7 @@ import { ArrowLeftIcon, XIcon } from '@graphprotocol/gds-react/icons'
 import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { Portal } from './base/Portal.tsx'
+import type { RenderProp } from './base/Render.tsx'
 import { Transition } from './base/Transition.tsx'
 import { Button } from './Button.tsx'
 import { ButtonGroup } from './ButtonGroup.tsx'
@@ -42,35 +42,29 @@ export interface ModalProps<
     Steps extends readonly string[] ? Steps[number] : number,
 >
   extends Omit<ComponentProps<'div'>, 'children'>, GDSComponentProps<typeof ModalMeta> {
-  open?: boolean | undefined
-  /** Defaults to `false` if `trigger` is provided, or `true` otherwise. */
-  defaultOpen?: boolean | undefined
-  onOpenChange?: ((open: boolean) => void) | undefined
   /**
-   * Element that opens the modal when clicked, or function that returns such an element (where you
-   * can customize the actual trigger functionality; it doesn't necessarily have to be on click).
-   * The trigger element is rendered alongside the modal. This provides an alternative to the
-   * controlled API (the `open` and `onOpenChange` props) that doesn't require any state in the
-   * parent component.
+   * Element that opens the modal when clicked, or a function that returns such an element (where
+   * you can fully customize the interaction that opens the modal, e.g. `trigger={(renderProps, {
+   * openModal }) => <button {...renderProps} onMouseEnter={openModal} />}`).
    */
   trigger?:
-    | ReactElement
-    | ((
-        renderProps: Record<string, unknown>,
-        state: {
-          open: boolean
-          setOpen: (open: boolean) => void
-          openModal: () => void
-          currentStep: Step
-          setCurrentStep: (step: Step) => void
-        },
-      ) => ReactElement)
+    | RenderProp<{
+        open: boolean
+        setOpen: (open: boolean) => void
+        openModal: () => void
+        currentStep: Step
+        setCurrentStep: (step: Step) => void
+      }>
     | undefined
+  open?: boolean | undefined
+  /** Defaults to `false` if `trigger` is provided, or `true` otherwise. */
+  defaultOpen?: boolean | undefined
+  onOpenChange?: ((open: boolean) => void) | undefined
   /**
    * Whether the user should be able to close the modal on their own, either by clicking outside of
    * it, by pressing Escape, or by clicking the close button that gets rendered in `Modal.Header`
    * when `dismissible` is `true` (though it can be replaced or removed altogether with the
-   * `buttonAfter` prop). Defaults to `true` if either `onOpenChange` or `trigger` is provided, or
+   * `buttonAfter` prop). Defaults to `true` if either `trigger` or `onOpenChange` is provided, or
    * `false` otherwise.
    */
   dismissible?: boolean | undefined
@@ -84,7 +78,7 @@ export interface ModalProps<
   onCurrentStepChange?: ((step: Step) => void) | undefined
   children?:
     | ReactNode
-    | ((renderProps: {
+    | ((state: {
         open: boolean
         setOpen: (open: boolean) => void
         closeModal: () => void
@@ -101,10 +95,10 @@ export const ModalRoot = <
   ref: passedRef,
   variant,
   size,
+  trigger,
   open: controlledOpen,
   defaultOpen,
   onOpenChange,
-  trigger,
   dismissible: passedDismissible,
   role,
   steps: passedSteps = 1 as Steps,
@@ -121,11 +115,20 @@ export const ModalRoot = <
     variant,
     size,
   })
+  const cssPropsAttributes = getCSSPropsAttributes(ModalMeta, { variant, size }, style)
+  const cssPropsClassName = cn(`
+    u:default-size-medium
+    u:default-variant-dialog
+    u:max-xs:default-variant-drawer
+    u:max-2xs:prop-size-small
+  `)
+
+  const hasTrigger = trigger !== undefined
 
-  const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? !trigger, onOpenChange)
+  const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? !hasTrigger, onOpenChange)
 
   // TODO: Allow swiping down to close when `variant` is `drawer` and `dismissible` is `true`
-  const dismissible = passedDismissible ?? Boolean(onOpenChange || trigger)
+  const dismissible = passedDismissible ?? (hasTrigger || onOpenChange !== undefined)
 
   const steps = (
     typeof passedSteps === 'number'
@@ -151,15 +154,6 @@ export const ModalRoot = <
     previousStepIndex.current = currentStepIndex
   }
 
-  const defaultVariantClasses = cn(`
-    u:default-size-medium
-    u:default-variant-drawer
-    u:max-2xs:prop-size-small
-    u:xs:default-variant-dialog
-  `)
-  const cssPropsAttributes = getCSSPropsAttributes(ModalMeta, { variant, size }, style)
-  const triggerIsFunction = typeof trigger === 'function'
-
   return (
     <ModalContext.Provider
       value={{
@@ -187,18 +181,19 @@ export const ModalRoot = <
         }}
         disablePointerDismissal={!dismissible}
       >
-        {trigger ? (
+        {hasTrigger ? (
           <Dialog.Trigger
-            nativeButton={!triggerIsFunction}
             render={
-              triggerIsFunction
-                ? (renderProps) => {
+              typeof trigger !== 'function'
+                ? trigger
+                : (renderProps) => {
                     // Don't pass event handlers and other potentially too specific props (e.g. `type`)
                     const filteredRenderProps = Object.fromEntries(
                       Object.entries(renderProps).filter(
                         ([prop]) =>
                           prop === 'ref' ||
                           prop === 'id' ||
+                          prop === 'className' ||
                           prop.startsWith('aria-') ||
                           prop.startsWith('data-'),
                       ),
@@ -211,8 +206,6 @@ export const ModalRoot = <
                       setCurrentStep,
                     })
                   }
-                : // oxlint-disable-next-line no-explicit-any
-                  (trigger satisfies ReactElement<any> as ReactElement<any>)
             }
           />
         ) : null}
@@ -220,9 +213,10 @@ export const ModalRoot = <
         <Portal>
           <div
             ref={cssPropsPolyfillRef}
-            className={cn('gds-modal i:invisible', defaultVariantClasses, className)}
+            className={cn('gds-modal i:invisible', cssPropsClassName, className)}
             {...cssPropsAttributes}
             {...cssPropsPolyfillAttributes}
+            {...dirProps}
             {...props}
           />
         </Portal>
@@ -240,7 +234,7 @@ export const ModalRoot = <
              */
             className={cn(
               `gds-modal @container-[size] pointer-events-none absolute top-0 left-0 u:text-16 u:text-muted i:invisible i:*:visible`,
-              defaultVariantClasses,
+              cssPropsClassName,
               className,
             )}
             {...cssPropsAttributes}
@@ -359,7 +353,7 @@ export const ModalHeader = ({
         ? { count: stepCount, currentIndex: currentStepIndex }
         : null
 
-  const buttonTransitionClasses = cn(`
+  const buttonTransitionClassName = cn(`
     min-w-5 shrink-0
     **:button:default-variant-naked
     style-nested/transition-content:items-center
@@ -406,7 +400,7 @@ export const ModalHeader = ({
           layout="flex-col"
           mode="exit-enter"
           animateSize={false}
-          className={buttonTransitionClasses}
+          className={buttonTransitionClassName}
         >
           {buttonBefore}
         </Transition>
@@ -435,7 +429,7 @@ export const ModalHeader = ({
           layout="flex-col"
           mode="exit-enter"
           animateSize={false}
-          className={buttonTransitionClasses}
+          className={buttonTransitionClassName}
         >
           {buttonAfter}
         </Transition>

package/src/components/OTCInput.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { FieldMeta } from './base/Field.meta.ts'
 
 export const OTCInputMeta = createComponent('OTCInput', {
-  containerName: 'gds-field',
-  cssProps: {
-    /** @default 'medium' */
-    size: FieldMeta.cssProps.size,
-  },
+  extends: FieldMeta,
 })

package/src/components/OTCInput.tsx

@@ -45,7 +45,7 @@ export function OTCInput({
   const inputRef = useRef<HTMLInputElement>(null)
   const inputPassedRef = useMergedRefs(inputRef, passedRef)
 
-  const length = Math.min(Math.max(passedLength, 1), 32)
+  const length = Math.min(Math.max(passedLength, 1), 16)
 
   const [value, privateSetValue] = useControlled(controlledValue, defaultValue ?? '', onChange)
   const privatePaddedValue = useRef('')

package/src/components/Pane.meta.ts

@@ -0,0 +1,31 @@
+import { createComponent } from '@graphprotocol/gds-css'
+
+export const PaneContainerMeta = createComponent('PaneContainer', {
+  isolate: 'allow-inheritance',
+  cssProps: {
+    /** @default 'horizontal' */
+    orientation: {
+      type: 'values',
+      values: ['horizontal', 'vertical'],
+      defaultValue: 'horizontal',
+    },
+  },
+})
+
+export const PaneMeta = createComponent('Pane', {
+  isolate: 'allow-inheritance',
+  cssProps: {
+    /** @default 'docked' */
+    layout: {
+      type: 'values',
+      values: ['docked', 'overlay'],
+      defaultValue: 'docked',
+    },
+    /** @default // dynamic based on position and container orientation */
+    side: {
+      type: 'values',
+      values: ['top', 'bottom', 'start', 'end'],
+      defaultValue: 'start',
+    },
+  },
+})