@byline/host-tanstack-start 4.17.0 → 4.18.0

package/dist/admin-shell/chrome/router-pager.d.ts

@@ -13,6 +13,13 @@ interface RouterPageProps extends PaginationProps {
  * A convenience pager wrapped around uikit's Pagination with `asChild`
  * targets that delegate to TanStack Router's `<Link>`. `asChild` merges
  * the existing button styles into the rendered Link.
+ *
+ * `smoothScrollToTop` is for a pager sitting *below* a long list: turning a
+ * page there should carry the reader back to the top rather than leaving them
+ * at the foot of a fresh page. It suppresses the router's own instant
+ * `resetScroll` and animates instead — so the component owes an actual
+ * scroll, which was the missing half: the flag disabled the reset and put
+ * nothing in its place, so a bottom pager did not scroll at all.
  */
 export declare function RouterPager({ className, smoothScrollToTop, 'aria-label': ariaLabel, ...rest }: RouterPageProps): React.JSX.Element;
 export {};

package/dist/admin-shell/chrome/router-pager.js

@@ -1,11 +1,19 @@
 import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { useRouterState } from "@tanstack/react-router";
 import { ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, Pagination } from "@byline/ui/react";
 import { Link } from "./loose-router.js";
+import { scrollWindowToTop } from "./scroll-to-top.js";
 function RouterPager({ className, smoothScrollToTop, 'aria-label': ariaLabel, ...rest }) {
     const location = useRouterState({
         select: (s)=>s.location
     });
+    const handleScrollToTop = useCallback(()=>{
+        if (true !== smoothScrollToTop) return;
+        scrollWindowToTop();
+    }, [
+        smoothScrollToTop
+    ]);
     return /*#__PURE__*/ jsx(Pagination, {
         variant: "dashboard",
         ...rest,
@@ -19,6 +27,7 @@ function RouterPager({ className, smoothScrollToTop, 'aria-label': ariaLabel, ..
                     return /*#__PURE__*/ jsx(Pagination.First, {
                         render: item.disabled ? /*#__PURE__*/ jsx("div", {}) : /*#__PURE__*/ jsx(Link, {
                             resetScroll: true !== smoothScrollToTop,
+                            onClick: handleScrollToTop,
                             to: location.pathname,
                             search: params
                         }),
@@ -32,6 +41,7 @@ function RouterPager({ className, smoothScrollToTop, 'aria-label': ariaLabel, ..
                     return /*#__PURE__*/ jsx(Pagination.Previous, {
                         render: item.disabled ? /*#__PURE__*/ jsx("div", {}) : /*#__PURE__*/ jsx(Link, {
                             resetScroll: true !== smoothScrollToTop,
+                            onClick: handleScrollToTop,
                             to: location.pathname,
                             search: params
                         }),
@@ -46,6 +56,7 @@ function RouterPager({ className, smoothScrollToTop, 'aria-label': ariaLabel, ..
                     return /*#__PURE__*/ jsx(Pagination.Number, {
                         render: item.disabled ? /*#__PURE__*/ jsx("div", {}) : /*#__PURE__*/ jsx(Link, {
                             resetScroll: true !== smoothScrollToTop,
+                            onClick: handleScrollToTop,
                             to: location.pathname,
                             search: params
                         }),
@@ -61,6 +72,7 @@ function RouterPager({ className, smoothScrollToTop, 'aria-label': ariaLabel, ..
                     return /*#__PURE__*/ jsx(Pagination.Next, {
                         render: item.disabled ? /*#__PURE__*/ jsx("div", {}) : /*#__PURE__*/ jsx(Link, {
                             resetScroll: true !== smoothScrollToTop,
+                            onClick: handleScrollToTop,
                             to: location.pathname,
                             search: params
                         }),
@@ -75,6 +87,7 @@ function RouterPager({ className, smoothScrollToTop, 'aria-label': ariaLabel, ..
                     return /*#__PURE__*/ jsx(Pagination.Last, {
                         render: item.disabled ? /*#__PURE__*/ jsx("div", {}) : /*#__PURE__*/ jsx(Link, {
                             resetScroll: true !== smoothScrollToTop,
+                            onClick: handleScrollToTop,
                             to: location.pathname,
                             search: params
                         }),

package/dist/admin-shell/chrome/scroll-to-top.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Return the reader to the top of the page.
+ *
+ * Separate from `RouterPager` so the behaviour can be asserted without
+ * mounting a router. `smoothScrollToTop` suppresses TanStack's instant
+ * `resetScroll` in favour of an animated one, which makes a missing
+ * implementation silent — the page simply does not move. That is what
+ * happened to every pager carrying the flag.
+ *
+ * Honours `prefers-reduced-motion`: those readers still arrive at the top,
+ * without the travel.
+ */
+export declare function scrollWindowToTop(): void;

package/dist/admin-shell/chrome/scroll-to-top.js

@@ -0,0 +1,9 @@
+function scrollWindowToTop() {
+    if ("u" < typeof window) return;
+    const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    window.scrollTo({
+        top: 0,
+        behavior: true === prefersReducedMotion ? 'auto' : 'smooth'
+    });
+}
+export { scrollWindowToTop };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -125,15 +125,15 @@
     "react-json-view-lite": "^2.5.0",
     "react-swipeable": "^7.0.2",
     "zod": "^4.4.3",
-    "@byline/analytics": "4.17.0",
-    "@byline/ai": "4.17.0",
-    "@byline/auth": "4.17.0",
-    "@byline/analytics-agent": "4.17.0",
-    "@byline/i18n": "4.17.0",
-    "@byline/admin": "4.17.0",
-    "@byline/core": "4.17.0",
-    "@byline/ui": "4.17.0",
-    "@byline/client": "4.17.0"
+    "@byline/admin": "4.18.0",
+    "@byline/ai": "4.18.0",
+    "@byline/analytics-agent": "4.18.0",
+    "@byline/client": "4.18.0",
+    "@byline/auth": "4.18.0",
+    "@byline/analytics": "4.18.0",
+    "@byline/i18n": "4.18.0",
+    "@byline/core": "4.18.0",
+    "@byline/ui": "4.18.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/chrome/router-pager.tsx

@@ -6,6 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import { useCallback } from 'react'
 import { useRouterState } from '@tanstack/react-router'
 
 import type { PaginationProps } from '@byline/ui/react'
@@ -18,6 +19,7 @@ import {
 } from '@byline/ui/react'
 
 import { Link } from './loose-router.js'
+import { scrollWindowToTop } from './scroll-to-top.js'
 
 interface RouterPageProps extends PaginationProps {
   smoothScrollToTop?: boolean
@@ -27,6 +29,13 @@ interface RouterPageProps extends PaginationProps {
  * A convenience pager wrapped around uikit's Pagination with `asChild`
  * targets that delegate to TanStack Router's `<Link>`. `asChild` merges
  * the existing button styles into the rendered Link.
+ *
+ * `smoothScrollToTop` is for a pager sitting *below* a long list: turning a
+ * page there should carry the reader back to the top rather than leaving them
+ * at the foot of a fresh page. It suppresses the router's own instant
+ * `resetScroll` and animates instead — so the component owes an actual
+ * scroll, which was the missing half: the flag disabled the reset and put
+ * nothing in its place, so a bottom pager did not scroll at all.
  */
 export function RouterPager({
   className,
@@ -36,6 +45,14 @@ export function RouterPager({
 }: RouterPageProps): React.JSX.Element {
   const location = useRouterState({ select: (s) => s.location })
 
+  // Fires alongside navigation rather than after it: the scroll and the new
+  // page load run together, so the list is in place by the time the reader
+  // arrives at the top.
+  const handleScrollToTop = useCallback(() => {
+    if (smoothScrollToTop !== true) return
+    scrollWindowToTop()
+  }, [smoothScrollToTop])
+
   return (
     <Pagination variant="dashboard" {...rest}>
       <Pagination.Root className={className} ariaLabel={ariaLabel}>
@@ -51,6 +68,7 @@ export function RouterPager({
                   ) : (
                     <Link
                       resetScroll={smoothScrollToTop !== true}
+                      onClick={handleScrollToTop}
                       to={location.pathname as never}
                       search={params}
                     />
@@ -76,6 +94,7 @@ export function RouterPager({
                   ) : (
                     <Link
                       resetScroll={smoothScrollToTop !== true}
+                      onClick={handleScrollToTop}
                       to={location.pathname as never}
                       search={params}
                     />
@@ -103,6 +122,7 @@ export function RouterPager({
                   ) : (
                     <Link
                       resetScroll={smoothScrollToTop !== true}
+                      onClick={handleScrollToTop}
                       to={location.pathname as never}
                       search={params}
                     />
@@ -130,6 +150,7 @@ export function RouterPager({
                   ) : (
                     <Link
                       resetScroll={smoothScrollToTop !== true}
+                      onClick={handleScrollToTop}
                       to={location.pathname as never}
                       search={params}
                     />
@@ -156,6 +177,7 @@ export function RouterPager({
                   ) : (
                     <Link
                       resetScroll={smoothScrollToTop !== true}
+                      onClick={handleScrollToTop}
                       to={location.pathname as never}
                       search={params}
                     />

package/src/admin-shell/chrome/scroll-to-top.test.ts

@@ -0,0 +1,56 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { scrollWindowToTop } from './scroll-to-top.js'
+
+function mockReducedMotion(matches: boolean) {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn((query: string) => ({ matches, media: query })) as unknown as typeof window.matchMedia
+  )
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  vi.restoreAllMocks()
+})
+
+describe('scrollWindowToTop', () => {
+  it('scrolls to the top of the page', () => {
+    const scrollTo = vi.fn()
+    vi.stubGlobal('scrollTo', scrollTo)
+    mockReducedMotion(false)
+
+    scrollWindowToTop()
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' })
+  })
+
+  it('skips the animation when the reader asks for reduced motion', () => {
+    const scrollTo = vi.fn()
+    vi.stubGlobal('scrollTo', scrollTo)
+    mockReducedMotion(true)
+
+    scrollWindowToTop()
+
+    // Still goes to the top — only the travel is dropped.
+    expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'auto' })
+  })
+
+  /** Older browsers and some test environments have no `matchMedia`. */
+  it('still scrolls when matchMedia is unavailable', () => {
+    const scrollTo = vi.fn()
+    vi.stubGlobal('scrollTo', scrollTo)
+    vi.stubGlobal('matchMedia', undefined)
+
+    expect(() => scrollWindowToTop()).not.toThrow()
+    expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' })
+  })
+})

package/src/admin-shell/chrome/scroll-to-top.ts

@@ -0,0 +1,28 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * Return the reader to the top of the page.
+ *
+ * Separate from `RouterPager` so the behaviour can be asserted without
+ * mounting a router. `smoothScrollToTop` suppresses TanStack's instant
+ * `resetScroll` in favour of an animated one, which makes a missing
+ * implementation silent — the page simply does not move. That is what
+ * happened to every pager carrying the flag.
+ *
+ * Honours `prefers-reduced-motion`: those readers still arrive at the top,
+ * without the travel.
+ */
+export function scrollWindowToTop(): void {
+  if (typeof window === 'undefined') return
+
+  // `matchMedia` is absent in some test and server-ish environments; treating
+  // that as "no preference expressed" keeps the scroll working either way.
+  const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+  window.scrollTo({ top: 0, behavior: prefersReducedMotion === true ? 'auto' : 'smooth' })
+}