fix: scroll to top selectors function (#4281)

Author: tmarnet

docs/router/framework/react/guide/scroll-restoration.md

@@ -17,6 +17,19 @@ const router = createRouter({
 })
 ```
 
+For complex selectors that cannot be simply resolved using `document.querySelector(selector)`, you can pass functions that return HTML elements to `routerOptions.scrollToTopSelectors`:
+
+```tsx
+const selector = () =>
+  document
+    .querySelector('#shadowRootParent')
+    ?.shadowRoot?.querySelector('#main-scrollable-area')
+
+const router = createRouter({
+  scrollToTopSelectors: [selector],
+})
+```
+
 These selectors are handled **in addition to `window`** which cannot be disabled currently.
 
 ## Scroll Restoration

packages/router-core/src/router.ts

@@ -390,7 +390,7 @@ export interface RouterOptions<
    *
    * @default ['window']
    */
-  scrollToTopSelectors?: Array<string>
+  scrollToTopSelectors?: Array<string | (() => Element | null | undefined)>
 }
 
 export interface RouterState<
@@ -882,7 +882,6 @@ export class RouterCore<
     }
 
     if (
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       !this.history ||
       (this.options.history && this.options.history !== this.history)
     ) {
@@ -901,7 +900,6 @@ export class RouterCore<
       this.buildRouteTree()
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!this.__store) {
       this.__store = new Store(getInitialRouterState(this.latestLocation), {
         onUpdate: () => {
@@ -920,7 +918,6 @@ export class RouterCore<
     if (
       typeof window !== 'undefined' &&
       'CSS' in window &&
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       typeof window.CSS?.supports === 'function'
     ) {
       this.isViewTransitionTypesSupported = window.CSS.supports(

packages/router-core/src/scroll-restoration.ts

@@ -105,7 +105,9 @@ export function restoreScroll(
   key: string | undefined,
   behavior: ScrollToOptions['behavior'] | undefined,
   shouldScrollRestoration: boolean | undefined,
-  scrollToTopSelectors: Array<string> | undefined,
+  scrollToTopSelectors:
+    | Array<string | (() => Element | null | undefined)>
+    | undefined,
 ) {
   let byKey: ScrollRestorationByKey
 
@@ -174,7 +176,11 @@ export function restoreScroll(
       ...(scrollToTopSelectors?.filter((d) => d !== 'window') ?? []),
     ].forEach((selector) => {
       const element =
-        selector === 'window' ? window : document.querySelector(selector)
+        selector === 'window'
+          ? window
+          : typeof selector === 'function'
+            ? selector()
+            : document.querySelector(selector)
       if (element) {
         element.scrollTo({
           top: 0,