@edgeandnode/eds-react 1.0.0 → 1.0.2

package/src/components/CodeBlock.parts.tsx

@@ -50,15 +50,6 @@ import { TabSetContext } from './TabSet.context.ts'
 import { TabSet, type TabSetTabProps } from './TabSet.tsx'
 import { ToggleButton } from './ToggleButton.tsx'
 
-// Can't import `@shikijs/vscode-textmate`'s `FontStyle` enum due to `verbatimModuleSyntax`
-const FontStyle = {
-  NotSet: -1,
-  None: 0,
-  Italic: 1,
-  Bold: 2,
-  Underline: 4,
-} as const
-
 const THEMES = {
   dark: 'night-owl',
   light: 'min-light',
@@ -166,7 +157,7 @@ export function CodeBlockRoot({
   children,
   ...props
 }: CodeBlockProps) {
-  const { activeTheme } = useEDS()
+  useEDS()
   const tabsContext = useContext(CodeBlockTabsContext)
   const hasAncestorTabs = tabsContext !== null
   const hasAncestorHeader = useContext(CodeBlockHeaderContext) !== false
@@ -209,7 +200,6 @@ export function CodeBlockRoot({
     highlights,
     secrets,
     language,
-    activeTheme,
     highlighter,
     hasAncestorHeader,
   })
@@ -363,7 +353,18 @@ export function CodeBlockRoot({
                   <span className="select-none"> </span>
                 ) : (
                   <span
+                    /**
+                     * `light-dark()` only works for colors, so the font styles use the `dark:`
+                     * variant (and highlighted tokens need `i:font-bold` to override the weight).
+                     */
                     className="
+                      *:font-(--shiki-light-font-weight)
+                      *:text-[light-dark(var(--shiki-light),var(--shiki-dark))]
+                      *:[font-style:var(--shiki-light-font-style)]
+                      *:[text-decoration:var(--shiki-light-text-decoration)]
+                      dark:*:font-(--shiki-dark-font-weight)
+                      dark:*:[font-style:var(--shiki-dark-font-style)]
+                      dark:*:[text-decoration:var(--shiki-dark-text-decoration)]
                       @prop-wrap-true/code-block:wrap-anywhere
                       @prop-wrap-true/code-block:whitespace-pre-wrap
                     "
@@ -379,23 +380,18 @@ export function CodeBlockRoot({
                           data-whitespace={chunk.content.trim() === '' || undefined}
                           data-highlighted={chunk.highlighted || undefined}
                           className={cn(
-                            chunk.fontStyle === FontStyle.Bold ? 'font-bold' : undefined,
-                            chunk.fontStyle === FontStyle.Italic ? 'italic' : undefined,
-                            chunk.fontStyle === FontStyle.Underline ? 'underline' : undefined,
-                            chunk.highlighted ? `z-10 bg-code-highlighted py-1 font-bold
+                            chunk.highlighted ? `z-10 bg-code-highlighted py-1
                               not-has-[+[data-highlighted]]:-me-1
                               not-has-[+[data-highlighted]]:rounded-e-4
                               not-has-[+[data-highlighted]]:pe-1
                               not-[[data-highlighted]+*]:-ms-1
                               not-[[data-highlighted]+*]:rounded-s-4
-                              not-[[data-highlighted]+*]:ps-1` : 'z-20',
+                              not-[[data-highlighted]+*]:ps-1
+                              i:font-bold` : 'z-20',
                             // Prevent wrapping between the indentation and the code
                             chunkIndex === 1 ? '[[data-whitespace]+*]:break-all' : undefined,
                           )}
-                          style={{
-                            color: chunk.color,
-                            backgroundColor: chunk.bgColor,
-                          }}
+                          style={chunk.htmlStyle}
                         >
                           {chunkContent}
                         </span>
@@ -423,7 +419,6 @@ function useCodeLines({
   highlights,
   secrets,
   language,
-  activeTheme,
   highlighter,
   hasAncestorHeader,
 }: {
@@ -432,7 +427,6 @@ function useCodeLines({
   highlights: string[]
   secrets: string[]
   language: Language
-  activeTheme: 'dark' | 'light'
   highlighter: Highlighter
   hasAncestorHeader: boolean
 }): { lines: CodeLine[]; codeToCopy: string } {
@@ -461,7 +455,9 @@ function useCodeLines({
     if (hasAncestorHeader) return []
 
     const { tokens } = highlighter.codeToTokens(code, {
-      theme: THEMES[activeTheme],
+      // Both themes' styles become CSS variables, so tokens follow the local color scheme
+      themes: THEMES,
+      defaultColor: false,
       lang: LANGUAGES.includes(language) ? language : 'text',
     })
 
@@ -526,7 +522,7 @@ function useCodeLines({
 
       return { chunks, style: lineStyle }
     })
-  }, [highlighter, passedCode, activeTheme, language, highlights, secrets, diff])
+  }, [highlighter, passedCode, language, highlights, secrets, diff])
 
   return { lines, codeToCopy }
 }

package/src/components/CopyButton.tsx

@@ -8,7 +8,8 @@ import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { CopyInteractiveIcon } from '@edgeandnode/eds-react/icons'
 
 import { useEDS } from '../hooks/index.ts'
-import { cn, isReactNode } from '../utils/index.ts'
+import { cn } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { Button, type ButtonProps } from './Button.tsx'
 import type { CopyButtonMeta } from './CopyButton.meta.ts'
 import { Tooltip } from './Tooltip.tsx'
@@ -49,7 +50,7 @@ export function CopyButton({
 
   const hasChildren = children != null
   const copyIcon = <CopyInteractiveIcon copied={copied} />
-  const tooltipProps = isReactNode(tooltip) ? { content: tooltip } : tooltip
+  const tooltipProps = getTooltipProps(tooltip)
   const [tooltipOpen, setTooltipOpen] = useState(false)
 
   return (

package/src/components/Icon.tsx

@@ -1,18 +1,12 @@
 'use client'
 
-import {
-  createElement,
-  isValidElement,
-  type ComponentProps,
-  type ComponentType,
-  type ReactElement,
-} from 'react'
+import { createElement, type ComponentProps, type ComponentType, type ReactElement } from 'react'
 import { mergeProps } from '@base-ui/react'
 
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 
 import { useEDS } from '../hooks/index.ts'
-import { cn, getCSSPropsAttributes } from '../utils/index.ts'
+import { cn, getCSSPropsAttributes, isComponentType } from '../utils/index.ts'
 import { IconMeta } from './Icon.meta.ts'
 import { useTooltipCollector } from './Tooltip.tsx'
 
@@ -37,7 +31,7 @@ export interface IconPropsWithSrc extends IconProps {
 export function Icon({ src, alt, size, color, ...props }: IconPropsWithSrc) {
   useEDS()
 
-  const iconContent = isValidElement(src) ? src : createElement(src)
+  const iconContent = isComponentType(src) ? createElement(src) : src
   const collectTooltipContent = useTooltipCollector()
 
   if (collectTooltipContent && alt) {

package/src/components/LocalTheme.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { ComponentProps, ElementType } from 'react'
+import { mergeProps } from '@base-ui/react'
+
+import { LocalThemeContext, THEME_CLASSES, type ResolvedTheme } from '../EDSContext.ts'
+
+export interface LocalThemeProps extends ComponentProps<'div'> {
+  /** @default 'div' */
+  as?: ElementType | undefined
+}
+
+function LocalTheme({
+  theme,
+  as: Element = 'div',
+  ...props
+}: LocalThemeProps & { theme: ResolvedTheme }) {
+  return (
+    <LocalThemeContext.Provider value={theme}>
+      <Element {...mergeProps({ className: THEME_CLASSES[theme] }, props)} />
+    </LocalThemeContext.Provider>
+  )
+}
+
+/**
+ * Renders its content in the dark theme, whatever the page's theme is. Components that need to know
+ * the theme in JavaScript can read it with `useEDS().localTheme`.
+ */
+export function Dark(props: LocalThemeProps) {
+  return <LocalTheme theme="dark" {...props} />
+}
+
+/**
+ * Renders its content in the light theme, whatever the page's theme is. Components that need to
+ * know the theme in JavaScript can read it with `useEDS().localTheme`.
+ */
+export function Light(props: LocalThemeProps) {
+  return <LocalTheme theme="light" {...props} />
+}

package/src/components/Menu.parts.tsx

@@ -166,7 +166,7 @@ export function MenuRoot<T extends OptionValue>({
   children,
   ...props
 }: MenuProps<T>) {
-  const { dirProps } = useEDS()
+  const { dirProps, localThemeClass } = useEDS()
 
   const isSubmenu = useContext(MenuGroupContext) !== null
   const isContextMenu = triggerMode === 'right-click' && !isSubmenu
@@ -307,6 +307,8 @@ export function MenuRoot<T extends OptionValue>({
                 ? document.body
                 : undefined
           }
+          // Inline menus are portalled in place, so they already inherit the local theme
+          className={hasTrigger ? localThemeClass : undefined}
         >
           <Menu.Positioner
             ref={passedRef}
@@ -535,8 +537,8 @@ function MenuInlineFallback({
         {...mergeProps(
           {
             className: cn(`
-              pointer-events-none absolute inset-[anchor(inside)] size-auto! [position-anchor:--eds-menu]
-              not-open:hidden
+              pointer-events-none! absolute! inset-[anchor(inside)]! z-auto! m-0! size-auto! [position-anchor:--eds-menu]!
+              not-open:hidden!
               u:rounded-12
             `),
           },

package/src/components/Modal.parts.tsx

@@ -17,6 +17,7 @@ import { Dialog } from '@base-ui/react/dialog'
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { ArrowLeftIcon, XIcon } from '@edgeandnode/eds-react/icons'
 
+import { LocalThemeContext } from '../EDSContext.ts'
 import { useControlled, useCSSPropsPolyfill, useEDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { Portal } from './base/Portal.tsx'
@@ -275,7 +276,13 @@ export const ModalRoot = <
             hidden={undefined}
           />
         </Portal>
-        <Dialog.Portal>
+        <Dialog.Portal
+          /**
+           * Modals cover the whole page, so they're rendered in `<body>`, even when opened from
+           * inside another portal (e.g. a `Menu`), where Base UI would put them otherwise.
+           */
+          container={typeof document !== 'undefined' ? document.body : undefined}
+        >
           <div
             ref={passedRef}
             /**
@@ -355,15 +362,18 @@ export const ModalRoot = <
                   has-nested/modal-slot:p-0
                 "
               >
-                {typeof children === 'function'
-                  ? children({
-                      open,
-                      setOpen,
-                      closeModal: () => setOpen(false),
-                      currentStep,
-                      setCurrentStep,
-                    })
-                  : children}
+                {/* Modals cover the whole page, so they use its theme rather than the local one */}
+                <LocalThemeContext.Provider value={undefined}>
+                  {typeof children === 'function'
+                    ? children({
+                        open,
+                        setOpen,
+                        closeModal: () => setOpen(false),
+                        currentStep,
+                        setCurrentStep,
+                      })
+                    : children}
+                </LocalThemeContext.Provider>
               </div>
             </Dialog.Popup>
           </div>

package/src/components/SegmentedControl.parts.tsx

@@ -22,13 +22,8 @@ import {
   useCSSState,
   useEDS,
 } from '../hooks/index.ts'
-import {
-  cn,
-  getCSSPropsAttributes,
-  isReactNode,
-  splitProps,
-  type OptionValue,
-} from '../utils/index.ts'
+import { cn, getCSSPropsAttributes, splitProps, type OptionValue } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { SegmentedControlMeta, SegmentedControlOptionMeta } from './SegmentedControl.meta.ts'
 import { Tooltip, type TooltipProps } from './Tooltip.tsx'
@@ -193,7 +188,7 @@ export function SegmentedControlOption<T extends OptionValue>({
   }
 
   return (
-    <Tooltip {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}>
+    <Tooltip {...getTooltipProps(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

package/src/components/Select.parts.tsx

@@ -18,6 +18,7 @@ import { CaretDownInteractiveIcon } from '@edgeandnode/eds-react/icons'
 
 import { useControlled } from '../hooks/index.ts'
 import { cn, reactNodeToString, splitProps, type OptionValue } from '../utils/index.ts'
+import { resolveLazy } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { Field, type FieldProps } from './base/Field.tsx'
 import { Render, type RenderFnHandlers, type RenderFnProps } from './base/Render.tsx'
@@ -292,10 +293,10 @@ export declare namespace SelectProps {
     options?: never
     /**
      * `Select.Option` elements (fragments / arrays are fine — `flattenChildren` flattens them).
-     * Wrapping options here (e.g., `<Tooltip><Select.Option/></Tooltip>`) is unsupported:
-     * `child.type === SelectOption` only matches direct children, so a wrapped option wouldn't
-     * appear in `optionsList`. Use the data API for that — its `children` render fn is opaque to
-     * `Select`, so wrapping is free.
+     * Wrapping options here (e.g., `<Tooltip><Select.Option/></Tooltip>`) is unsupported: options
+     * are identified by their type, which only matches direct children, so a wrapped option
+     * wouldn't appear in `optionsList`. Use the data API for that — its `children` render fn is
+     * opaque to `Select`, so wrapping is free.
      */
     children?: ReactNode
   }
@@ -727,7 +728,7 @@ function useSelectOptions<T extends OptionValue>({
     const flatChildren = flattenChildren(children as ReactNode)
     let autoValueCounter = 0
     augmentedChildren = flatChildren.flatMap((child) => {
-      if (isValidElement(child) && child.type === SelectOption) {
+      if (isValidElement(child) && resolveLazy(child.type) === SelectOption) {
         const childProps = child.props as SelectOptionProps<T>
         const hasExplicitValue = childProps.value !== undefined
         const effectiveValue = (hasExplicitValue ? childProps.value : autoValueCounter) as T

package/src/components/TabSet.parts.tsx

@@ -15,7 +15,8 @@ import flattenChildren from 'react-keyed-flatten-children'
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 
 import { useControlled, useCSSPropsPolyfill, useCSSState, useEDS } from '../hooks/index.ts'
-import { cn, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
+import { cn, getCSSPropsAttributes } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
 import {
@@ -270,10 +271,7 @@ export function TabSetTab({
             tabRenderProps,
           )}
           render={(buttonOrLinkRenderProps, { Element, elementProps }) => (
-            <Tooltip
-              {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}
-              triggerProps={buttonOrLinkRenderProps}
-            >
+            <Tooltip {...getTooltipProps(tooltip)} triggerProps={buttonOrLinkRenderProps}>
               <Element {...elementProps}>
                 {addonBefore ? <TabAddon>{renderAddon(addonBefore)}</TabAddon> : null}
                 {children ? (

package/src/components/Table.parts.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  Children,
   createContext,
   Fragment,
   isValidElement,
@@ -753,9 +754,8 @@ export function TableCell({
         ) : null}
       </span>
     )
-  const cellContentMayContainInteractiveElements = Array.isArray(children)
-    ? children.some(isValidElement)
-    : isValidElement(children)
+  // `Children.toArray` also resolves lazy nodes (elements passed from server components)
+  const cellContentMayContainInteractiveElements = Children.toArray(children).some(isValidElement)
 
   return (
     <td

package/src/components/ThemeSwitcher.tsx

@@ -5,7 +5,7 @@ import { MoonIcon, SunIcon } from '@edgeandnode/eds-react/icons'
 
 import type { ResolvedTheme } from '../EDSContext.ts'
 import { useEDS } from '../hooks/index.ts'
-import { isReactNode } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { Menu } from './Menu.tsx'
 import { SegmentedControl, type SegmentedControlProps } from './SegmentedControl.tsx'
 import type { ThemeSwitcherMeta } from './ThemeSwitcher.meta.ts'
@@ -50,7 +50,7 @@ export function ThemeSwitcher({
         <Tooltip
           content={`Switch to ${activeTheme === 'dark' ? 'light' : 'dark'} theme`}
           closeOnClick={false}
-          {...(isReactNode(tooltip) && tooltip !== undefined ? { content: tooltip } : tooltip)}
+          {...getTooltipProps(tooltip)}
           triggerProps="forward"
         >
           <SegmentedControl<'dark' | 'light'>

package/src/components/Tooltip.parts.tsx

@@ -75,7 +75,7 @@ export function TooltipRoot({
   triggerProps: passedTriggerProps,
   ...passedProps
 }: TooltipProps) {
-  const { dirProps } = useEDS()
+  const { dirProps, localThemeClass } = useEDS()
 
   const ancestorTooltip = useContext(TooltipContext)
 
@@ -190,7 +190,7 @@ export function TooltipRoot({
             hidden={undefined}
           />
         </Portal>
-        <Tooltip.Portal>
+        <Tooltip.Portal className={localThemeClass}>
           <Tooltip.Positioner
             key={getReactNodeKey(content)} // Refresh the tooltip's position when the content changes (see `WithDynamicContent` story)
             side={

package/src/components/base/Addon.tsx

@@ -1,5 +1,6 @@
 import { createElement, type ComponentType, type ReactNode } from 'react'
-import { isValidElementType } from 'react-is'
+
+import { isComponentType } from '../../utils/index.ts'
 
 type AddonComponent = ComponentType<{
   __addonCompatible?: undefined
@@ -10,9 +11,7 @@ type AddonComponent = ComponentType<{
 export type AddonValue = ReactNode | AddonComponent
 
 export function renderAddon(value: AddonValue): ReactNode {
-  return isValidElementType(value) && typeof value !== 'string'
-    ? createElement(value)
-    : (value as ReactNode)
+  return isComponentType(value) ? createElement(value) : value
 }
 
 /**

package/src/components/base/ButtonOrLink.parts.tsx

@@ -21,6 +21,7 @@ import { useButton } from 'react-aria'
 import type { Merge } from 'type-fest'
 
 import { cn } from '../../utils/index.ts'
+import { resolveLazy } from '../../utils/internal/index.ts'
 import { Render, type RenderFn, type RenderFnProps } from './Render.tsx'
 import { ButtonOrLinkContext, useAncestorButtonOrLink } from './useAncestorButtonOrLink.ts'
 
@@ -345,7 +346,7 @@ export const ButtonOrLinkRoot = (passedProps: InternalButtonOrLinkProps): ReactE
         }
       }
     } else if (!disabled) {
-      linkComponent = passedLinkComponent
+      linkComponent = resolveLazy(passedLinkComponent)
     }
   }
 

package/src/components/index.ts

@@ -44,6 +44,7 @@ export { Label, type LabelProps } from './Label.tsx'
 export { LabelMeta } from './Label.meta.ts'
 export { Link, type LinkProps } from './Link.tsx'
 export { LinkMeta } from './Link.meta.ts'
+export { Dark, Light, type LocalThemeProps } from './LocalTheme.tsx'
 export {
   Menu,
   type MenuEmptyProps,

package/src/hooks/useCSSProp.ts

@@ -8,7 +8,7 @@ import {
   type EDSComponent,
 } from '@edgeandnode/eds-css'
 
-import { styleScheduler } from '../utils/index.ts'
+import { styleScheduler } from '../utils/internal/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/useEDS.ts

@@ -1,19 +1,35 @@
 import { useContext } from 'react'
 
-import { EDSContext } from '../EDSContext.ts'
+import { EDSContext, LocalThemeContext, THEME_CLASSES } from '../EDSContext.ts'
 
 /** Throws an error if used outside of a `EDSProvider`. */
 export function useEDS() {
   const context = useContext(EDSContext)
+  const localTheme = useContext(LocalThemeContext)
 
   if (context === null) {
     throw new Error('EDS components must be wrapped in a `EDSProvider`')
   }
 
   return {
+    /** The page's theme: `'dark'`, `'light'`, or `'system'` (follows the OS preference) */
     theme: context.theme,
-    activeTheme: context.activeTheme,
+    /** Changes the page's theme (use `ThemeSwitcher` for the UI) */
     setTheme: context.setTheme,
+    /** The page's theme, with `'system'` resolved to `'dark'` or `'light'` */
+    activeTheme: context.activeTheme,
+    /**
+     * The theme of the nearest `Dark` or `Light` ancestor, or `undefined` if there's none. Use
+     * `localTheme ?? activeTheme` to get the theme content is rendered in.
+     */
+    localTheme,
+    /**
+     * The class of the nearest `Dark` or `Light` ancestor, or `undefined` if there's none. Add it
+     * to content rendered outside of that ancestor in the DOM (e.g. with `createPortal`) so it
+     * keeps its theme.
+     */
+    localThemeClass: localTheme !== undefined ? THEME_CLASSES[localTheme] : undefined,
+    /** The `dir` and `lang` of `EDSProvider`, to spread on content rendered outside of it. */
     dirProps: {
       dir: context.direction,
       lang: context.language,

package/src/hooks/useStyleObserver.ts

@@ -1,7 +1,8 @@
 import { useCallback, useLayoutEffect, useRef, type Ref } from 'react'
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 
-import { styleObserver, styleScheduler, type StyleObserverRecord } from '../utils/index.ts'
+import { styleObserver, type StyleObserverRecord } from '../utils/index.ts'
+import { styleScheduler } from '../utils/internal/index.ts'
 import { useEffectWithRefDeps } from './useEffectWithRefDeps.ts'
 
 /**

package/src/icons/CalendarDynamicIcon.tsx

@@ -16,6 +16,7 @@ export interface CalendarDynamicIconProps extends Omit<IconProps, 'alt'> {
 
 export function CalendarDynamicIcon({
   alt,
+  // oxlint-disable-next-line react/purity -- `useState(() => new Date())` would need `'use client'`, which would cause hydration mismatches (time zone, locale) where this is rendered by a server component
   date = new Date(),
   ...props
 }: CalendarDynamicIconProps) {

package/src/utils/getReactNodeKey.ts

@@ -2,6 +2,7 @@ import { Children, isValidElement, type ReactNode } from 'react'
 
 import { getKey } from '@edgeandnode/eds-utils'
 
+import { resolveLazy } from './internal/index.ts'
 import { reactNodeToString } from './reactNodeToString.ts'
 
 /**
@@ -12,18 +13,33 @@ import { reactNodeToString } from './reactNodeToString.ts'
  * @returns A string key that uniquely identifies the node structure and content.
  */
 export function getReactNodeKey(reactNode: ReactNode): string {
-  const keys =
-    Children.map(reactNode, (child) => {
-      if (!child || typeof child === 'boolean') {
-        return 'empty'
-      }
-      if (!isValidElement(child)) {
-        return getKey(child)
-      }
-      if (child.key !== null) {
-        return `key:${child.key}`
-      }
-      return `${getKey(child.type)}:${reactNodeToString(child)}`
-    }) ?? []
-  return keys.length > 0 ? keys.join('|') : 'empty'
+  try {
+    const keys =
+      Children.map(reactNode, (child) => {
+        if (!child || typeof child === 'boolean') {
+          return 'empty'
+        }
+        if (!isValidElement(child)) {
+          return getKey(child)
+        }
+        if (child.key !== null) {
+          return `key:${child.key}`
+        }
+        /**
+         * Key the type by the component it resolves to, so that identical content created by a
+         * server component gets the same key in every server response (each of which has new lazy
+         * types)
+         */
+        return `${getKey(resolveLazy(child.type))}:${reactNodeToString(child)}`
+      }) ?? []
+    return keys.length > 0 ? keys.join('|') : 'empty'
+  } catch (error) {
+    /**
+     * Resolving a lazy value (e.g. from a server component) suspends (throws a thenable) while it's
+     * still loading, which isn't possible in effects, where this is also called. Fall back to the
+     * node's identity then, but let any other error through.
+     */
+    if (typeof error !== 'object' || error === null || !('then' in error)) throw error
+    return getKey(reactNode)
+  }
 }

package/src/utils/index.ts

@@ -3,12 +3,12 @@ export { getAssetUrl } from './getAssetUrl.ts'
 export { getCSSPropsAttributes } from './getCSSPropsAttributes.ts'
 export { getReactNodeKey } from './getReactNodeKey.ts'
 export { InlineCounter } from './InlineCounter.tsx'
+export { isComponentType } from './isComponentType.ts'
 export { isReactNode } from './isReactNode.ts'
 export { reactNodeToString } from './reactNodeToString.ts'
 export { RenderCount } from './RenderCount.tsx'
 export { setInputValue } from './setInputValue.ts'
 export { splitProps } from './splitProps.ts'
 export { styleObserver, type StyleObserverRecord } from './styleObserver.ts'
-export { styleScheduler } from './styleScheduler.ts'
 export { trimReactNode } from './trimReactNode.tsx'
 export type { OptionValue, Stringifiable } from './types.ts'

package/src/utils/internal/getTooltipProps.ts

@@ -0,0 +1,25 @@
+import type { TooltipProps } from '../../components/Tooltip.tsx'
+
+/**
+ * Normalizes a component's `tooltip` prop, which accepts either the tooltip's content or its props.
+ * Checks for props (a plain object that isn't a React node) rather than for content, so that any
+ * kind of node is treated as content, including ones that `isReactNode` doesn't recognize (e.g.
+ * portals or promises).
+ */
+export function getTooltipProps(
+  tooltip: TooltipProps['content'] | Omit<TooltipProps, 'children'>,
+): Omit<TooltipProps, 'children'> {
+  if (tooltip === undefined) return {}
+  return isTooltipProps(tooltip) ? tooltip : { content: tooltip }
+}
+
+function isTooltipProps(
+  tooltip: Exclude<TooltipProps['content'], undefined> | Omit<TooltipProps, 'children'>,
+): tooltip is Omit<TooltipProps, 'children'> {
+  return (
+    typeof tooltip === 'object' &&
+    tooltip !== null &&
+    !('$$typeof' in tooltip) &&
+    [Object.prototype, null].includes(Object.getPrototypeOf(tooltip))
+  )
+}

package/src/utils/internal/index.ts

@@ -0,0 +1,3 @@
+export { getTooltipProps } from './getTooltipProps.ts'
+export { isLazy, resolveLazy } from './resolveLazy.ts'
+export { styleScheduler } from './styleScheduler.ts'