@tanstack/router-devtools 1.112.4 → 1.112.5

package/src/Explorer.tsx

@@ -356,7 +356,7 @@ const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
 }
 
 function useStyles() {
-  const shadowDomTarget = React.useContext(ShadowDomTargetContext)
+  const shadowDomTarget = React.use(ShadowDomTargetContext)
   const [_styles] = React.useState(() => stylesFactory(shadowDomTarget))
   return _styles
 }

package/src/TanStackRouterDevtools.tsx

@@ -61,9 +61,9 @@ export function TanStackRouterDevtools(
   const { shadowDOMTarget } = props
 
   return (
-    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
+    <ShadowDomTargetContext value={shadowDOMTarget}>
       <FloatingTanStackRouterDevtools {...props} />
-    </ShadowDomTargetContext.Provider>
+    </ShadowDomTargetContext>
   )
 }
 
@@ -190,7 +190,7 @@ function FloatingTanStackRouterDevtools({
 
   return (
     <Container ref={setRootEl} className="TanStackRouterDevtools">
-      <DevtoolsOnCloseContext.Provider
+      <DevtoolsOnCloseContext
         value={{
           onCloseClick: onCloseClick ?? (() => {}),
         }}
@@ -217,7 +217,7 @@ function FloatingTanStackRouterDevtools({
           handleDragStart={(e) => handleDragStart(panelRef.current, e)}
           shadowDOMTarget={shadowDOMTarget}
         />
-      </DevtoolsOnCloseContext.Provider>
+      </DevtoolsOnCloseContext>
 
       <button
         type="button"

package/src/TanStackRouterDevtoolsPanel.tsx

@@ -34,21 +34,22 @@ export interface DevtoolsPanelOptions {
   shadowDOMTarget?: ShadowRoot
 }
 
-export const TanStackRouterDevtoolsPanel = React.forwardRef<
-  HTMLDivElement,
-  DevtoolsPanelOptions
->(function TanStackRouterDevtoolsPanel(props, ref) {
-  const { shadowDOMTarget } = props
+export const TanStackRouterDevtoolsPanel =
+  function TanStackRouterDevtoolsPanel({
+    ref,
+    ...props
+  }: DevtoolsPanelOptions & { ref?: React.RefObject<HTMLDivElement | null> }) {
+    const { shadowDOMTarget } = props
 
-  return (
-    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
-      <DevtoolsOnCloseContext.Provider
-        value={{
-          onCloseClick: () => {},
-        }}
-      >
-        <BaseTanStackRouterDevtoolsPanel ref={ref} {...props} />
-      </DevtoolsOnCloseContext.Provider>
-    </ShadowDomTargetContext.Provider>
-  )
-})
+    return (
+      <ShadowDomTargetContext value={shadowDOMTarget}>
+        <DevtoolsOnCloseContext
+          value={{
+            onCloseClick: () => {},
+          }}
+        >
+          <BaseTanStackRouterDevtoolsPanel ref={ref} {...props} />
+        </DevtoolsOnCloseContext>
+      </ShadowDomTargetContext>
+    )
+  }

package/src/context.ts

@@ -12,7 +12,7 @@ export const DevtoolsOnCloseContext = React.createContext<
 >(undefined)
 
 export const useDevtoolsOnClose = () => {
-  const context = React.useContext(DevtoolsOnCloseContext)
+  const context = React.use(DevtoolsOnCloseContext)
   if (!context) {
     throw new Error(
       'useDevtoolsOnClose must be used within a TanStackRouterDevtools component',

package/src/theme.tsx

@@ -23,9 +23,9 @@ interface ProviderProps {
 const ThemeContext = React.createContext(defaultTheme)
 
 export function ThemeProvider({ theme, ...rest }: ProviderProps) {
-  return <ThemeContext.Provider value={theme} {...rest} />
+  return <ThemeContext value={theme} {...rest} />
 }
 
 export function useTheme() {
-  return React.useContext(ThemeContext)
+  return React.use(ThemeContext)
 }

package/src/useStyles.tsx

@@ -583,7 +583,7 @@ const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
 }
 
 export function useStyles() {
-  const shadowDomTarget = React.useContext(ShadowDomTargetContext)
+  const shadowDomTarget = React.use(ShadowDomTargetContext)
   const [_styles] = React.useState(() => stylesFactory(shadowDomTarget))
   return _styles
 }

package/src/utils.ts

@@ -63,37 +63,44 @@ export function styled<T extends keyof HTMLElementTagNameMap>(
   type: T,
   newStyles: Styles,
   queries: Record<string, Styles> = {},
-) {
-  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(
-    ({ style, ...rest }, ref) => {
-      const theme = useTheme()
-
-      const mediaStyles = Object.entries(queries).reduce(
-        (current, [key, value]) => {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useMediaQuery(key)
-            ? {
-                ...current,
-                ...(typeof value === 'function' ? value(rest, theme) : value),
-              }
-            : current
-        },
-        {},
-      )
-
-      return React.createElement(type, {
-        ...rest,
-        style: {
-          ...(typeof newStyles === 'function'
-            ? newStyles(rest, theme)
-            : newStyles),
-          ...style,
-          ...mediaStyles,
-        },
-        ref,
-      })
-    },
-  )
+): (
+  props: StyledComponent<T> & {
+    ref?: React.RefObject<HTMLElementTagNameMap[T] | null>
+  },
+) => React.ReactElement {
+  return ({
+    ref,
+    style,
+    ...rest
+  }: StyledComponent<T> & {
+    ref?: React.RefObject<HTMLElementTagNameMap[T] | null>
+  }) => {
+    const theme = useTheme()
+
+    const mediaStyles = Object.entries(queries).reduce(
+      (current, [key, value]) => {
+        return useMediaQuery(key)
+          ? {
+              ...current,
+              ...(typeof value === 'function' ? value(rest, theme) : value),
+            }
+          : current
+      },
+      {},
+    )
+
+    return React.createElement(type, {
+      ...rest,
+      style: {
+        ...(typeof newStyles === 'function'
+          ? newStyles(rest, theme)
+          : newStyles),
+        ...style,
+        ...mediaStyles,
+      },
+      ref,
+    })
+  }
 }
 
 export function useIsMounted() {