@graphprotocol/gds-react 0.2.0 → 0.2.1

package/src/components/Menu.parts.tsx

@@ -30,7 +30,6 @@ import { Render, type RenderFnProps, type RenderProp } from './base/Render.tsx'
 import { Button } from './Button.tsx'
 import { Checkbox } from './Checkbox.tsx'
 import { MenuMeta, type MenuItemMeta } from './Menu.meta.js'
-import { Tooltip } from './Tooltip.tsx'
 
 const MenuTriggerContext = createContext<boolean>(false)
 
@@ -66,17 +65,15 @@ declare namespace MenuProps {
      * `alignOffset`, `matchTriggerWidth`, and `matchTriggerHeight`).
      */
     trigger?:
-      | RenderProp<
-          { open: boolean; setOpen: (open: boolean) => void; openMenu: () => void },
-          { disabled?: boolean | undefined }
-        >
+      | RenderProp<{ open: boolean; setOpen: (open: boolean) => void; openMenu: () => void }>
       | undefined
     /**
      * Controls how the menu is opened when `trigger` is an element. Ignored if `trigger` is a
      * function, since you can fully customize the interaction that opens the menu (e.g.
-     * `trigger={(props, { openMenu }) => <button {...props} onMouseEnter={openMenu} />}`).
+     * `trigger={(props, { openMenu }) => <button {...props} onMouseEnter={openMenu} />}`). Also
+     * ignored for submenus, which always open on hover.
      *
-     * @default 'click' // or for nested menus, 'hover'
+     * @default 'click'
      */
     triggerMode?: 'click' | 'hover' | undefined
     /** Defaults to `true` if `trigger` is not provided, or `undefined` otherwise. */
@@ -97,7 +94,7 @@ export type MenuProps<T extends OptionValue = OptionValue> =
 export function MenuRoot<T extends OptionValue>({
   ref: passedRef,
   trigger,
-  triggerMode: passedTriggerMode,
+  triggerMode,
   side,
   gap,
   align,
@@ -138,12 +135,50 @@ export function MenuRoot<T extends OptionValue>({
     },
   )
 
-  const isNested = useContext(MenuGroupContext) !== null
+  const isSubmenu = useContext(MenuGroupContext) !== null
+  const MenuRoot = isSubmenu ? Menu.SubmenuRoot : Menu.Root
+
   const hasTrigger = trigger !== undefined
-  const triggerIsElement = hasTrigger && typeof trigger !== 'function'
-  const triggerMode = passedTriggerMode ?? (isNested ? 'hover' : 'click')
-  const MenuRoot = isNested ? Menu.SubmenuRoot : Menu.Root
-  const MenuTrigger = isNested ? Menu.SubmenuTrigger : Menu.Trigger
+  const triggerElement = (() => {
+    if (!hasTrigger) return null
+    const renderTrigger =
+      typeof trigger !== 'function'
+        ? trigger
+        : (renderProps: RenderFnProps) => {
+            // 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-'),
+              ),
+            )
+            return trigger(filteredRenderProps, {
+              open,
+              setOpen,
+              openMenu: () => setOpen(true),
+            })
+          }
+    if (isSubmenu) {
+      return <Render render={renderTrigger} />
+    } else {
+      return (
+        <Menu.Trigger
+          nativeButton
+          openOnHover={triggerMode === 'hover'}
+          data-open-on-hover={triggerMode === 'hover' || undefined}
+          className={`
+            u:i:open:data-open-on-hover:state-hover
+            u:iii:open:not-data-open-on-hover:state-active
+          `}
+          render={renderTrigger}
+        />
+      )
+    }
+  })()
 
   const [open, setOpen] = useControlled(
     controlledOpen ?? (!hasTrigger ? true : undefined),
@@ -158,15 +193,18 @@ export function MenuRoot<T extends OptionValue>({
   return (
     <div
       ref={cssPropsPolyfillRef}
-      data-nested={isNested || undefined}
+      data-is-submenu={isSubmenu || undefined}
       data-has-trigger={hasTrigger || undefined}
       className={cn(
         `gds-menu root-contents [anchor-scope:all]
         not-data-has-trigger:**:data-base-ui-focus-guard:hidden
         u:rounded-12
-        u:data-nested:default-align-offset-[-2]
-        u:data-nested:default-gap-3
-        u:data-nested:default-side-end`,
+        u:data-is-submenu:default-align-offset-[-2]
+        u:data-is-submenu:default-gap-3
+        u:data-is-submenu:default-side-end`,
+        // Very imperfect workaround for https://bugs.webkit.org/show_bug.cgi?id=301871
+        `safari:root-block
+        i:safari:not-data-is-submenu:size-max`,
         className,
       )}
       {...getCSSPropsAttributes(
@@ -184,48 +222,11 @@ export function MenuRoot<T extends OptionValue>({
           // A menu with no trigger can still be opened/closed by the consumer, but it should not send events
           if (hasTrigger) setOpen(newOpen)
         }}
-        modal={!isNested ? hasTrigger : (undefined as never)}
+        modal={!isSubmenu ? hasTrigger : (undefined as never)}
         closeParentOnEsc
       >
         <MenuTriggerContext.Provider value={true}>
-          {hasTrigger ? (
-            // Hoist any tooltip used in `trigger` for its interactions to work properly
-            <Tooltip>
-              <MenuTrigger
-                nativeButton={!isNested}
-                // Ensure submenu triggers get disabled properly (see https://github.com/mui/base-ui/issues/3850)
-                disabled={triggerIsElement && trigger.props.disabled === true}
-                openOnHover={triggerMode === 'hover'}
-                data-open-on-hover={triggerMode === 'hover' || undefined}
-                className={`
-                  u:i:open:data-open-on-hover:state-hover
-                  u:iii:open:not-data-open-on-hover:state-active
-                `}
-                render={
-                  triggerIsElement
-                    ? trigger
-                    : (renderProps: RenderFnProps) => {
-                        // 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-'),
-                          ),
-                        )
-                        return trigger(filteredRenderProps, {
-                          open,
-                          setOpen,
-                          openMenu: () => setOpen(true),
-                        })
-                      }
-                }
-              />
-            </Tooltip>
-          ) : (
+          {triggerElement ?? (
             /**
              * Base UI doesn't explicitly support menus with no `Menu.Trigger`, `Menu.Portal`, or
              * `Menu.Positioner`, so we work around it. We render an invisible trigger to satisfy
@@ -258,9 +259,9 @@ export function MenuRoot<T extends OptionValue>({
             !hasTrigger
               ? portalRef
               : /**
-                 * Specifying `document.body` because while it is the default for top-level menus, a nested menu
+                 * Specifying `document.body` because while it is the default for top-level menus, a submenu
                  * defaults to using the same portal as its parent, which is not desirable when the parent is
-                 * rendered inline (it can cause the nested menu to appear behind other elements).
+                 * rendered inline (it can cause the submenu to appear behind other elements).
                  */
                 document?.body
           }
@@ -631,7 +632,7 @@ export function MenuItem<T extends OptionValue>({
       (groupContext !== null && groupContext !== 'root' ? groupContext.type : undefined) ??
       'plain')
 
-  const renderContent = (renderProps: RenderFnProps) => {
+  const renderItem = (renderProps: RenderFnProps) => {
     let addonBefore: AddonValue = passedAddonBefore
     let addonInside: AddonValue = undefined
     let addonAfter: AddonValue = passedAddonAfter
@@ -677,17 +678,10 @@ export function MenuItem<T extends OptionValue>({
     }
     return (
       <Render
-        render={
-          href !== undefined ? (
-            <ButtonOrLink href={href} target={target} disabled={disabled} />
-          ) : (
-            <div />
-          )
-        }
+        render={<ButtonOrLink href={href} target={target as undefined} />}
         data-type={type}
         data-variant={variant}
         className={cn(
-          // TODO: Replace `active:` with `data-pressed:` when https://github.com/mui/base-ui/issues/1726 is added, to style Space presses as well
           `gds-menu-item root-flex w-full items-center outline-0 select-none u:rounded-6 u:p-2 u:text-16
           u:state-idle
           u:checked:state-checked
@@ -696,7 +690,7 @@ export function MenuItem<T extends OptionValue>({
           u:disabled:state-disabled
           u:data-highlighted:state-hover
           u:data-[variant=danger]:text-status-error-default
-          u:ii:active:state-active
+          u:ii:not-disabled:active:state-active
           u:ii:data-[type=submenu-trigger]:not-[a]:cursor-default
           u:ii:data-[type=submenu-trigger]:not-[a]:active:state-hover
           ${/* Disabled styles */ ''}
@@ -749,9 +743,10 @@ export function MenuItem<T extends OptionValue>({
   }
 
   if (type === 'submenu-trigger') {
-    return renderContent(baseProps)
+    return <Menu.SubmenuTrigger nativeButton disabled={disabled} render={renderItem(baseProps)} />
   }
 
+  const nativeButton = href === undefined
   const onKeyDown: ComponentProps<typeof Menu.Item>['onKeyDown'] = (event) => {
     props.onKeyDown?.(event)
     /**
@@ -768,13 +763,14 @@ export function MenuItem<T extends OptionValue>({
     return (
       <CheckboxItem
         {...baseProps}
+        nativeButton={nativeButton}
         closeOnClick={false}
         checked={checked}
         defaultChecked={defaultChecked}
         onCheckedChange={onChange}
         onKeyDown={onKeyDown}
         disabled={disabled}
-        render={renderContent}
+        render={renderItem}
       />
     )
   }
@@ -783,17 +779,24 @@ export function MenuItem<T extends OptionValue>({
     return (
       <Menu.RadioItem
         {...baseProps}
+        nativeButton={nativeButton}
         closeOnClick={true}
         value={passedValue !== undefined ? passedValue : autoValue}
         onKeyDown={onKeyDown}
         disabled={disabled}
-        render={renderContent}
+        render={renderItem}
       />
     )
   }
 
   return (
-    <Menu.Item {...baseProps} onKeyDown={onKeyDown} disabled={disabled} render={renderContent} />
+    <Menu.Item
+      {...baseProps}
+      nativeButton={nativeButton}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      render={renderItem}
+    />
   )
 }
 MenuItem.displayName = 'Menu.Item'

package/src/components/Modal.parts.tsx

@@ -24,7 +24,6 @@ import { ButtonGroup } from './ButtonGroup.tsx'
 import { Divider } from './Divider.tsx'
 import { ModalMeta } from './Modal.meta.ts'
 import { Stepper, type StepperProps } from './Stepper.tsx'
-import { Tooltip } from './Tooltip.tsx'
 
 const ModalContext = createContext<{
   open: boolean
@@ -125,7 +124,6 @@ export const ModalRoot = <
   `)
 
   const hasTrigger = trigger !== undefined
-  const triggerIsElement = hasTrigger && typeof trigger !== 'function'
 
   const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? !hasTrigger, onOpenChange)
 
@@ -184,35 +182,32 @@ export const ModalRoot = <
         disablePointerDismissal={!dismissible}
       >
         {hasTrigger ? (
-          // Hoist any tooltip used in `trigger` for its interactions to work properly
-          <Tooltip>
-            <Dialog.Trigger
-              render={
-                triggerIsElement
-                  ? 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-'),
-                        ),
-                      )
-                      return trigger(filteredRenderProps, {
-                        open,
-                        setOpen,
-                        openModal: () => setOpen(true),
-                        currentStep,
-                        setCurrentStep,
-                      })
-                    }
-              }
-            />
-          </Tooltip>
+          <Dialog.Trigger
+            render={
+              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-'),
+                      ),
+                    )
+                    return trigger(filteredRenderProps, {
+                      open,
+                      setOpen,
+                      openModal: () => setOpen(true),
+                      currentStep,
+                      setCurrentStep,
+                    })
+                  }
+            }
+          />
         ) : null}
         {/* Ensure the CSS props polyfill works even when the modal is not mounted */}
         <Portal>

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