@tanstack/router-devtools 1.112.5 → 1.112.7

package/src/Explorer.tsx

@@ -356,7 +356,7 @@ const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
 }
 
 function useStyles() {
-  const shadowDomTarget = React.use(ShadowDomTargetContext)
+  const shadowDomTarget = React.useContext(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 value={shadowDOMTarget}>
+    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
       <FloatingTanStackRouterDevtools {...props} />
-    </ShadowDomTargetContext>
+    </ShadowDomTargetContext.Provider>
   )
 }
 
@@ -190,7 +190,7 @@ function FloatingTanStackRouterDevtools({
 
   return (
     <Container ref={setRootEl} className="TanStackRouterDevtools">
-      <DevtoolsOnCloseContext
+      <DevtoolsOnCloseContext.Provider
         value={{
           onCloseClick: onCloseClick ?? (() => {}),
         }}
@@ -217,7 +217,7 @@ function FloatingTanStackRouterDevtools({
           handleDragStart={(e) => handleDragStart(panelRef.current, e)}
           shadowDOMTarget={shadowDOMTarget}
         />
-      </DevtoolsOnCloseContext>
+      </DevtoolsOnCloseContext.Provider>
 
       <button
         type="button"

package/src/TanStackRouterDevtoolsPanel.tsx

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

package/src/context.ts

@@ -12,7 +12,7 @@ export const DevtoolsOnCloseContext = React.createContext<
 >(undefined)
 
 export const useDevtoolsOnClose = () => {
-  const context = React.use(DevtoolsOnCloseContext)
+  const context = React.useContext(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 value={theme} {...rest} />
+  return <ThemeContext.Provider value={theme} {...rest} />
 }
 
 export function useTheme() {
-  return React.use(ThemeContext)
+  return React.useContext(ThemeContext)
 }

package/src/useStyles.tsx

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

package/src/utils.ts

@@ -63,44 +63,37 @@ export function styled<T extends keyof HTMLElementTagNameMap>(
   type: T,
   newStyles: Styles,
   queries: Record<string, Styles> = {},
-): (
-  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,
-    })
-  }
+) {
+  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,
+      })
+    },
+  )
 }
 
 export function useIsMounted() {