@byline/admin 6.1.0 → 6.2.0

package/dist/presentation/tabs_module.css

@@ -1,18 +1,109 @@
 :is(.tabs-AUVgW2, .byline-admin-tabs) {
+  align-items: stretch;
+  gap: var(--byline-admin-tabs-trigger-gap, 12px);
+  display: flex;
+  position: relative;
+}
+
+.tabs-AUVgW2:after {
+  content: "";
+  z-index: 0;
+  height: var(--border-width-thin);
+  background-color: var(--gray-200);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.byline-admin-tabs:after {
+  content: "";
+  z-index: 0;
+  height: var(--border-width-thin);
+  background-color: var(--gray-200);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+:is(.viewport-Q34w7N, .byline-admin-tabs-viewport) {
+  z-index: 1;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  flex: auto;
+  min-width: 0;
+  position: relative;
+  overflow: auto hidden;
+}
+
+.viewport-Q34w7N::-webkit-scrollbar {
+  display: none;
+}
+
+.byline-admin-tabs-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+:is(.viewport-Q34w7N[data-draggable="true"], .byline-admin-tabs-viewport[data-draggable="true"]) {
+  cursor: grab;
+}
+
+:is(.viewport-Q34w7N[data-dragging="true"], .byline-admin-tabs-viewport[data-dragging="true"]) {
+  cursor: grabbing;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+:is(.viewport-Q34w7N[data-dragging="true"] .byline-admin-tab, .byline-admin-tabs-viewport[data-dragging="true"] .byline-admin-tab) {
+  cursor: grabbing;
+}
+
+:is(.viewport-Q34w7N, .byline-admin-tabs-viewport) {
+  --fade-start: 0px;
+  --fade-end: 0px;
+  -webkit-mask-image: linear-gradient(to right,
+    transparent 0,
+    black var(--fade-start),
+    black calc(100% - var(--fade-end)),
+    transparent 100%);
+  -webkit-mask-image: linear-gradient(to right,
+    transparent 0,
+    black var(--fade-start),
+    black calc(100% - var(--fade-end)),
+    transparent 100%);
+  mask-image: linear-gradient(to right,
+    transparent 0,
+    black var(--fade-start),
+    black calc(100% - var(--fade-end)),
+    transparent 100%);
+}
+
+:is(.viewport-Q34w7N[data-at-start="false"], .byline-admin-tabs-viewport[data-at-start="false"]) {
+  --fade-start: 1.5rem;
+}
+
+:is(.viewport-Q34w7N[data-at-end="false"], .byline-admin-tabs-viewport[data-at-end="false"]) {
+  --fade-end: 1.5rem;
+}
+
+:is(.tablist-a3JXdm, .byline-admin-tablist) {
   gap: var(--spacing-16);
-  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  width: max-content;
   display: flex;
+  position: relative;
 }
 
 :is(.tab-Tn7xcQ, .byline-admin-tab) {
   color: var(--gray-500);
   font-size: 1.1rem;
   font-weight: var(--font-weight-medium);
+  white-space: nowrap;
   cursor: pointer;
   background: none;
   border-bottom: 2px solid #0000;
   outline: none;
-  margin-bottom: -1px;
+  flex: none;
   padding: .625rem 0;
   transition: color .15s, border-color .15s;
   position: relative;
@@ -24,7 +115,8 @@
 }
 
 :is(.tab-Tn7xcQ:focus-visible, .byline-admin-tab:focus-visible) {
-  box-shadow: 0 0 0 2px var(--blue-500);
+  box-shadow: inset 0 0 0 2px var(--blue-500);
+  border-radius: var(--radius-sm, 3px);
 }
 
 :is(.tab-active-cGf5N5, .byline-admin-tab-active), :is(.tab-active-cGf5N5:hover, .byline-admin-tab-active:hover) {
@@ -48,8 +140,64 @@
   display: flex;
 }
 
-:is(:is([data-theme="dark"], .dark) .tabs-AUVgW2, :is([data-theme="dark"], .dark) .byline-admin-tabs) {
-  border-bottom-color: var(--gray-700);
+:is(.overflow-trigger-sQPQE8, .byline-admin-tabs-overflow-trigger) {
+  z-index: 1;
+  width: var(--byline-admin-tabs-trigger-size, 32px);
+  height: var(--byline-admin-tabs-trigger-size, 32px);
+  border: var(--border-width-thin) var(--border-style-solid) transparent;
+  border-radius: var(--radius-sm, 3px);
+  color: var(--gray-500);
+  cursor: pointer;
+  background: none;
+  flex: none;
+  justify-content: center;
+  align-self: center;
+  align-items: center;
+  padding: 0;
+  transition: color .15s, background-color .15s;
+  display: flex;
+  position: relative;
+}
+
+:is(.overflow-trigger-sQPQE8:hover, .byline-admin-tabs-overflow-trigger:hover) {
+  color: var(--gray-800);
+  background-color: var(--gray-100);
+}
+
+:is(.overflow-trigger-sQPQE8:focus-visible, .byline-admin-tabs-overflow-trigger:focus-visible) {
+  outline: 2px solid var(--blue-500);
+  outline-offset: 1px;
+}
+
+:is(.overflow-icon-E4aR_Z, .byline-admin-tabs-overflow-icon) {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+:is(.overflow-menu-BkkmwS, .byline-admin-tabs-overflow-menu) {
+  min-width: 12rem;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+:is(.overflow-item-ahgTA4, .byline-admin-tabs-overflow-item) {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-8);
+  display: flex;
+}
+
+:is(.overflow-item-ahgTA4[data-active="true"], .byline-admin-tabs-overflow-item[data-active="true"]) {
+  color: var(--primary-600);
+  font-weight: var(--font-weight-medium);
+}
+
+:is([data-theme="dark"], .dark) .tabs-AUVgW2:after {
+  background-color: var(--gray-700);
+}
+
+:is([data-theme="dark"], .dark) .byline-admin-tabs:after {
+  background-color: var(--gray-700);
 }
 
 :is(:is([data-theme="dark"], .dark) .tab-Tn7xcQ, :is([data-theme="dark"], .dark) .byline-admin-tab) {
@@ -66,3 +214,16 @@
   border-bottom-color: var(--primary-400);
 }
 
+:is(:is([data-theme="dark"], .dark) .overflow-trigger-sQPQE8, :is([data-theme="dark"], .dark) .byline-admin-tabs-overflow-trigger) {
+  color: var(--gray-400);
+}
+
+:is(:is([data-theme="dark"], .dark) .overflow-trigger-sQPQE8:hover, :is([data-theme="dark"], .dark) .byline-admin-tabs-overflow-trigger:hover) {
+  color: var(--gray-200);
+  background-color: var(--gray-800);
+}
+
+:is(:is([data-theme="dark"], .dark) .overflow-item-ahgTA4[data-active="true"], :is([data-theme="dark"], .dark) .byline-admin-tabs-overflow-item[data-active="true"]) {
+  color: var(--primary-200);
+}
+

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -183,12 +183,12 @@
     "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.2",
     "zod": "^4.6.2",
-    "@byline/analytics": "6.1.0",
-    "@byline/analytics-agent": "6.1.0",
-    "@byline/core": "6.1.0",
-    "@byline/auth": "6.1.0",
-    "@byline/i18n": "6.1.0",
-    "@byline/ui": "6.1.0"
+    "@byline/analytics": "6.2.0",
+    "@byline/analytics-agent": "6.2.0",
+    "@byline/core": "6.2.0",
+    "@byline/auth": "6.2.0",
+    "@byline/i18n": "6.2.0",
+    "@byline/ui": "6.2.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/forms/form-renderer.tsx

@@ -29,7 +29,7 @@ import { FieldRenderer } from '../fields/field-renderer'
 import { useBylineFieldServices } from '../fields/field-services-context'
 import { AdminGroup } from '../presentation/group'
 import { AdminRow } from '../presentation/row'
-import { AdminTabs } from '../presentation/tabs'
+import { AdminTabs, tabPanelId, tabTriggerId } from '../presentation/tabs'
 import { AvailableLocalesWidget } from './available-locales-widget'
 import { DocumentActions, type DocumentActionsLocaleOption } from './document-actions'
 import { FormProvider, useFieldValue, useFormContext } from './form-context'
@@ -671,11 +671,13 @@ const FormContent = ({
         ? (visibleTabs[0]?.name ?? requested)
         : requested
     const activeTab = visibleTabs.find((t) => t.name === resolvedActive)
+    const idBase = `tabset:${set.name}`
 
     return (
-      <div key={`tabset:${set.name}`} className={cx('byline-form-tabset', styles.tabset)}>
+      <div key={idBase} className={cx('byline-form-tabset', styles.tabset)}>
         {visibleTabs.length > 0 && (
           <AdminTabs
+            idBase={idBase}
             tabs={visibleTabs}
             activeTab={resolvedActive}
             onChange={(tabName) => handleTabChange(set.name, tabName)}
@@ -684,7 +686,12 @@ const FormContent = ({
           />
         )}
         {activeTab && (
-          <div className={cx('byline-form-tabset-fields', styles['tabset-fields'])}>
+          <div
+            role="tabpanel"
+            id={tabPanelId(idBase, activeTab.name)}
+            aria-labelledby={tabTriggerId(idBase, activeTab.name)}
+            className={cx('byline-form-tabset-fields', styles['tabset-fields'])}
+          >
             {activeTab.fields.map((name) => renderItem(name))}
           </div>
         )}

package/src/presentation/tab-strip-drag.test.node.ts

@@ -0,0 +1,143 @@
+/**
+ * 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 { describe, expect, it } from 'vitest'
+
+import {
+  advanceDrag,
+  CLICK_SUPPRESSION_MS,
+  DRAG_THRESHOLD_PX,
+  shouldStartDrag,
+  shouldSuppressClick,
+} from './tab-strip-drag'
+
+describe('shouldStartDrag', () => {
+  const mouseDown = { pointerType: 'mouse', button: 0, overflowing: true }
+
+  it('starts on a primary mouse button over an overflowing strip', () => {
+    expect(shouldStartDrag(mouseDown)).toBe(true)
+  })
+
+  /**
+   * Touch already scrolls the viewport natively, with momentum and rubber-band
+   * behaviour no hand-rolled drag reproduces. Intercepting it would replace a
+   * good interaction with a worse one.
+   */
+  it('leaves touch to the browser', () => {
+    expect(shouldStartDrag({ ...mouseDown, pointerType: 'touch' })).toBe(false)
+  })
+
+  it('leaves pen to the browser', () => {
+    expect(shouldStartDrag({ ...mouseDown, pointerType: 'pen' })).toBe(false)
+  })
+
+  it('ignores the middle button', () => {
+    expect(shouldStartDrag({ ...mouseDown, button: 1 })).toBe(false)
+  })
+
+  it('ignores the secondary button, which opens the context menu', () => {
+    expect(shouldStartDrag({ ...mouseDown, button: 2 })).toBe(false)
+  })
+
+  it('does nothing when the strip has no overflow to scroll', () => {
+    expect(shouldStartDrag({ ...mouseDown, overflowing: false })).toBe(false)
+  })
+})
+
+describe('advanceDrag', () => {
+  const origin = { pointerX: 200, scrollLeft: 100 }
+  const idle = { origin, dragging: false }
+  const maxScroll = 400
+
+  /**
+   * Below the threshold the gesture is still a click. Scrolling here would
+   * make every click on a tab nudge the strip, and suppressing the click that
+   * follows would stop tabs selecting at all.
+   */
+  it('does not scroll before the threshold is crossed', () => {
+    const next = advanceDrag(idle, 200 + (DRAG_THRESHOLD_PX - 1), maxScroll)
+
+    expect(next).toEqual({ dragging: false, scrollLeft: null })
+  })
+
+  it('begins dragging once the pointer reaches the threshold', () => {
+    const next = advanceDrag(idle, 200 + DRAG_THRESHOLD_PX, maxScroll)
+
+    expect(next.dragging).toBe(true)
+  })
+
+  it('crosses the threshold in either direction', () => {
+    const next = advanceDrag(idle, 200 - DRAG_THRESHOLD_PX, maxScroll)
+
+    expect(next.dragging).toBe(true)
+  })
+
+  /** Dragging right pulls the content right, so the scroll offset decreases. */
+  it('scrolls the content with the pointer when dragged right', () => {
+    const next = advanceDrag({ origin, dragging: true }, 230, maxScroll)
+
+    expect(next.scrollLeft).toBe(70)
+  })
+
+  it('scrolls the content with the pointer when dragged left', () => {
+    const next = advanceDrag({ origin, dragging: true }, 170, maxScroll)
+
+    expect(next.scrollLeft).toBe(130)
+  })
+
+  it('clamps at the start of the strip', () => {
+    const next = advanceDrag({ origin, dragging: true }, 400, maxScroll)
+
+    expect(next.scrollLeft).toBe(0)
+  })
+
+  it('clamps at the end of the strip', () => {
+    const next = advanceDrag({ origin, dragging: true }, -400, maxScroll)
+
+    expect(next.scrollLeft).toBe(maxScroll)
+  })
+
+  /**
+   * A drag that wanders back past the threshold is still a drag — otherwise
+   * returning to the origin would hand the gesture back to the click handler
+   * and select whichever tab the pointer happened to end on.
+   */
+  it('stays a drag once it has started, even back within the threshold', () => {
+    const next = advanceDrag({ origin, dragging: true }, 201, maxScroll)
+
+    expect(next).toEqual({ dragging: true, scrollLeft: 99 })
+  })
+})
+
+describe('shouldSuppressClick', () => {
+  it('lets a click through when no drag has happened', () => {
+    expect(shouldSuppressClick(null, 1000)).toBe(false)
+  })
+
+  /** The click the browser synthesises at the end of a drag. */
+  it('suppresses the click that immediately follows a drag', () => {
+    expect(shouldSuppressClick(1000, 1000)).toBe(true)
+  })
+
+  it('suppresses a click just inside the window', () => {
+    expect(shouldSuppressClick(1000, 1000 + CLICK_SUPPRESSION_MS - 1)).toBe(true)
+  })
+
+  /**
+   * The suppression expires on its own rather than waiting to be consumed.
+   * A drag released outside the strip produces no click at all, and a flag
+   * left armed would swallow the reader's next deliberate click on a tab.
+   */
+  it('expires rather than waiting for a click that may never come', () => {
+    expect(shouldSuppressClick(1000, 1000 + CLICK_SUPPRESSION_MS)).toBe(false)
+  })
+
+  it('has long since expired by the time of a deliberate later click', () => {
+    expect(shouldSuppressClick(1000, 3000)).toBe(false)
+  })
+})

package/src/presentation/tab-strip-drag.ts

@@ -0,0 +1,114 @@
+/**
+ * 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
+ */
+
+/**
+ * Pure state for click-and-drag scrolling of the tab strip.
+ *
+ * The DOM plumbing — pointer capture, the click suppression, the cursor —
+ * lives in `tabs.tsx`; the rules it follows are here so they can be tested
+ * without a pointer.
+ */
+
+/**
+ * How far the pointer must travel before the gesture stops being a click and
+ * becomes a drag.
+ *
+ * Without a threshold every click on a tab would nudge the strip by a pixel or
+ * two, and the click suppression that follows a drag would swallow the very
+ * clicks that select tabs.
+ */
+export const DRAG_THRESHOLD_PX = 5
+
+/**
+ * How long after a drag a click is treated as that drag's own click.
+ *
+ * A window rather than a consume-once flag, because the click is not
+ * guaranteed to arrive: a drag released outside the strip produces none, and
+ * a flag left armed would swallow the reader's next deliberate click on a tab.
+ * Far longer than the browser's synthetic click takes to arrive, far shorter
+ * than anyone can release and deliberately click again.
+ */
+export const CLICK_SUPPRESSION_MS = 100
+
+/** Where a gesture began. An internal part of `DragState`, not a public type. */
+interface DragOrigin {
+  /** Pointer x at the moment the button went down. */
+  pointerX: number
+  /** The viewport's scroll offset at that same moment. */
+  scrollLeft: number
+}
+
+export interface DragState {
+  origin: DragOrigin
+  /** Whether the threshold has already been crossed. */
+  dragging: boolean
+}
+
+export interface DragAdvance {
+  dragging: boolean
+  /** The offset to scroll to, or `null` while the gesture is still a click. */
+  scrollLeft: number | null
+}
+
+/**
+ * Whether a `pointerdown` should begin a potential drag.
+ *
+ * Mouse only. Touch and pen already scroll the viewport natively, with
+ * momentum and rubber-banding that a hand-rolled drag does not reproduce, so
+ * taking the gesture over would trade a good interaction for a worse one.
+ */
+export function shouldStartDrag({
+  pointerType,
+  button,
+  overflowing,
+}: {
+  pointerType: string
+  button: number
+  overflowing: boolean
+}): boolean {
+  if (pointerType !== 'mouse') return false
+  // Primary button only: the middle button is paste-scroll on some platforms
+  // and the secondary opens the context menu.
+  if (button !== 0) return false
+  return overflowing
+}
+
+/**
+ * Advance a gesture given the pointer's current x.
+ *
+ * Returns `scrollLeft: null` while the pointer is still within the threshold,
+ * so the caller leaves the viewport alone and lets the click through.
+ */
+export function advanceDrag(
+  { origin, dragging }: DragState,
+  pointerX: number,
+  maxScroll: number
+): DragAdvance {
+  const delta = pointerX - origin.pointerX
+
+  // Once a drag, always a drag: a gesture that wanders back inside the
+  // threshold must not hand itself back to the click handler and select
+  // whichever tab the pointer happens to be over.
+  const isDragging = dragging || Math.abs(delta) >= DRAG_THRESHOLD_PX
+  if (isDragging === false) return { dragging: false, scrollLeft: null }
+
+  // Subtracted, not added: the content follows the pointer, so dragging right
+  // reveals what is to the left and the offset falls.
+  const next = origin.scrollLeft - delta
+
+  return { dragging: true, scrollLeft: Math.min(Math.max(next, 0), maxScroll) }
+}
+
+/**
+ * Whether a click arriving now belongs to a drag that has just ended, and
+ * should therefore not reach the tab underneath.
+ */
+export function shouldSuppressClick(dragEndedAt: number | null, now: number): boolean {
+  if (dragEndedAt == null) return false
+  return now - dragEndedAt < CLICK_SUPPRESSION_MS
+}