@byline/admin 6.1.0 → 6.2.1

package/dist/presentation/tabs.js

@@ -1,39 +1,270 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
-import { Badge } from "@byline/ui/react";
+import { Badge, Dropdown, EllipsisIcon } from "@byline/ui/react";
 import clsx from "clsx";
+import { advanceDrag, shouldStartDrag, shouldSuppressClick } from "./tab-strip-drag.js";
+import { computeRevealScroll, computeStripState } from "./tab-strip-geometry.js";
 import tabs_module from "./tabs.module.js";
-const AdminTabs = ({ tabs, activeTab, onChange, errorCounts, className })=>{
+const useIsoLayoutEffect = "u" > typeof window ? useLayoutEffect : useEffect;
+const TRIGGER_SIZE_PX = 32;
+const TRIGGER_GAP_PX = 12;
+const INITIAL_STRIP_STATE = {
+    overflowing: false,
+    viewportWidth: 0,
+    atStart: true,
+    atEnd: true
+};
+const tabTriggerId = (idBase, name)=>`${idBase}-tab-${name}`;
+const tabPanelId = (idBase, name)=>`${idBase}-panel-${name}`;
+function prefersReducedMotion() {
+    if ("u" < typeof window || 'function' != typeof window.matchMedia) return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const AdminTabs = ({ tabs, activeTab, onChange, idBase, errorCounts, className })=>{
     const { t } = useTranslation('byline-admin');
-    return /*#__PURE__*/ jsx("div", {
-        role: "tablist",
-        "aria-label": t('presentation.formTabsAriaLabel'),
+    const containerRef = useRef(null);
+    const viewportRef = useRef(null);
+    const rowRef = useRef(null);
+    const tabRefs = useRef(new Map());
+    const focusAfterChange = useRef(null);
+    const [strip, setStrip] = useState(INITIAL_STRIP_STATE);
+    const measure = useCallback(()=>{
+        const container = containerRef.current;
+        const row = rowRef.current;
+        if (null == container || null == row) return;
+        const next = computeStripState({
+            rowWidth: row.scrollWidth,
+            containerWidth: container.clientWidth,
+            triggerWidth: TRIGGER_SIZE_PX,
+            triggerGap: TRIGGER_GAP_PX,
+            scrollLeft: viewportRef.current?.scrollLeft ?? 0
+        });
+        setStrip((prev)=>prev.overflowing === next.overflowing && prev.viewportWidth === next.viewportWidth && prev.atStart === next.atStart && prev.atEnd === next.atEnd ? prev : next);
+    }, []);
+    useIsoLayoutEffect(()=>{
+        measure();
+        const container = containerRef.current;
+        const row = rowRef.current;
+        if (null == container || null == row || "u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(()=>measure());
+        observer.observe(container);
+        observer.observe(row);
+        return ()=>observer.disconnect();
+    }, [
+        measure,
+        tabs
+    ]);
+    const reveal = useCallback((name)=>{
+        const viewport = viewportRef.current;
+        const row = rowRef.current;
+        const tab = tabRefs.current.get(name);
+        if (null == viewport || null == row || null == tab) return;
+        const next = computeRevealScroll({
+            viewportWidth: viewport.clientWidth,
+            scrollLeft: viewport.scrollLeft,
+            tabOffsetLeft: tab.offsetLeft,
+            tabWidth: tab.offsetWidth,
+            rowWidth: row.scrollWidth
+        });
+        if (null == next) return;
+        viewport.scrollTo?.({
+            left: next,
+            behavior: prefersReducedMotion() ? 'auto' : 'smooth'
+        });
+    }, []);
+    useEffect(()=>{
+        const pending = focusAfterChange.current;
+        if (pending === activeTab) {
+            focusAfterChange.current = null;
+            tabRefs.current.get(activeTab)?.focus({
+                preventScroll: true
+            });
+        }
+        reveal(activeTab);
+    }, [
+        activeTab,
+        reveal
+    ]);
+    const select = useCallback((name, moveFocus)=>{
+        if (moveFocus) focusAfterChange.current = name;
+        onChange(name);
+    }, [
+        onChange
+    ]);
+    const dragRef = useRef(null);
+    const dragEndedAtRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const handlePointerDown = (event)=>{
+        const viewport = viewportRef.current;
+        if (null == viewport) return;
+        if (false === shouldStartDrag({
+            pointerType: event.pointerType,
+            button: event.button,
+            overflowing: strip.overflowing
+        })) return;
+        dragRef.current = {
+            origin: {
+                pointerX: event.clientX,
+                scrollLeft: viewport.scrollLeft
+            },
+            dragging: false
+        };
+    };
+    const handlePointerMove = (event)=>{
+        const state = dragRef.current;
+        const viewport = viewportRef.current;
+        const row = rowRef.current;
+        if (null == state || null == viewport || null == row) return;
+        const maxScroll = Math.max(0, row.scrollWidth - viewport.clientWidth);
+        const next = advanceDrag(state, event.clientX, maxScroll);
+        if (null == next.scrollLeft) return;
+        if (false === state.dragging) {
+            state.dragging = true;
+            setDragging(true);
+            viewport.setPointerCapture?.(event.pointerId);
+        }
+        viewport.scrollLeft = next.scrollLeft;
+    };
+    const handlePointerEnd = (event)=>{
+        const state = dragRef.current;
+        if (null == state) return;
+        dragRef.current = null;
+        if (false === state.dragging) return;
+        setDragging(false);
+        viewportRef.current?.releasePointerCapture?.(event.pointerId);
+        dragEndedAtRef.current = performance.now();
+    };
+    const handleClickCapture = (event)=>{
+        if (false === shouldSuppressClick(dragEndedAtRef.current, performance.now())) return;
+        dragEndedAtRef.current = null;
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    const handleKeyDown = (event)=>{
+        const current = tabs.findIndex((tab)=>tab.name === activeTab);
+        if (current < 0 || 0 === tabs.length) return;
+        let nextIndex;
+        switch(event.key){
+            case 'ArrowRight':
+                nextIndex = (current + 1) % tabs.length;
+                break;
+            case 'ArrowLeft':
+                nextIndex = (current - 1 + tabs.length) % tabs.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const next = tabs[nextIndex];
+        if (null == next || next.name === activeTab) return;
+        select(next.name, true);
+    };
+    const sizing = {
+        '--byline-admin-tabs-trigger-size': `${TRIGGER_SIZE_PX}px`,
+        '--byline-admin-tabs-trigger-gap': `${TRIGGER_GAP_PX}px`
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        style: sizing,
         className: clsx('byline-admin-tabs', tabs_module.tabs, className),
-        children: tabs.map((tab)=>{
-            const isActive = tab.name === activeTab;
-            return /*#__PURE__*/ jsx("button", {
-                type: "button",
-                role: "tab",
-                "aria-selected": isActive,
-                onClick: ()=>onChange(tab.name),
-                className: clsx('byline-admin-tab', tabs_module.tab, isActive && [
-                    'byline-admin-tab-active',
-                    tabs_module["tab-active"]
-                ]),
-                children: /*#__PURE__*/ jsxs("span", {
-                    className: clsx('byline-admin-tab-label', tabs_module.label),
-                    children: [
-                        tab.label,
-                        (errorCounts?.[tab.name] ?? 0) > 0 && /*#__PURE__*/ jsx(Badge, {
-                            intent: "danger",
-                            className: clsx('byline-admin-tab-badge', tabs_module.badge),
-                            children: errorCounts?.[tab.name]
-                        })
-                    ]
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: viewportRef,
+                onScroll: measure,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerEnd,
+                onPointerCancel: handlePointerEnd,
+                onClickCapture: handleClickCapture,
+                "data-at-start": strip.atStart,
+                "data-at-end": strip.atEnd,
+                "data-draggable": strip.overflowing,
+                "data-dragging": dragging,
+                className: clsx('byline-admin-tabs-viewport', tabs_module.viewport),
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: rowRef,
+                    role: "tablist",
+                    "aria-label": t('presentation.formTabsAriaLabel'),
+                    onKeyDown: handleKeyDown,
+                    className: clsx('byline-admin-tablist', tabs_module.tablist),
+                    children: tabs.map((tab)=>{
+                        const isActive = tab.name === activeTab;
+                        const errorCount = errorCounts?.[tab.name] ?? 0;
+                        return /*#__PURE__*/ jsx("button", {
+                            ref: (node)=>{
+                                if (null == node) tabRefs.current.delete(tab.name);
+                                else tabRefs.current.set(tab.name, node);
+                            },
+                            type: "button",
+                            role: "tab",
+                            id: tabTriggerId(idBase, tab.name),
+                            "aria-controls": tabPanelId(idBase, tab.name),
+                            "aria-selected": isActive,
+                            tabIndex: isActive ? 0 : -1,
+                            onClick: ()=>select(tab.name, false),
+                            onFocus: ()=>reveal(tab.name),
+                            className: clsx('byline-admin-tab', tabs_module.tab, isActive && [
+                                'byline-admin-tab-active',
+                                tabs_module["tab-active"]
+                            ]),
+                            children: /*#__PURE__*/ jsxs("span", {
+                                className: clsx('byline-admin-tab-label', tabs_module.label),
+                                children: [
+                                    tab.label,
+                                    errorCount > 0 && /*#__PURE__*/ jsx(Badge, {
+                                        intent: "danger",
+                                        className: clsx('byline-admin-tab-badge', tabs_module.badge),
+                                        children: errorCount
+                                    })
+                                ]
+                            })
+                        }, tab.name);
+                    })
                 })
-            }, tab.name);
-        })
+            }),
+            strip.overflowing && /*#__PURE__*/ jsxs(Dropdown.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown.Trigger, {
+                        "aria-label": t('presentation.formTabsAllTabsLabel'),
+                        className: clsx('byline-admin-tabs-overflow-trigger', tabs_module["overflow-trigger"]),
+                        children: /*#__PURE__*/ jsx(EllipsisIcon, {
+                            className: clsx('byline-admin-tabs-overflow-icon', tabs_module["overflow-icon"])
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown.Portal, {
+                        children: /*#__PURE__*/ jsx(Dropdown.Content, {
+                            sideOffset: 6,
+                            align: "end",
+                            className: clsx('byline-admin-tabs-overflow-menu', tabs_module["overflow-menu"]),
+                            children: tabs.map((tab)=>{
+                                const errorCount = errorCounts?.[tab.name] ?? 0;
+                                return /*#__PURE__*/ jsxs(Dropdown.Item, {
+                                    onClick: ()=>select(tab.name, true),
+                                    "data-active": tab.name === activeTab,
+                                    className: clsx('byline-admin-tabs-overflow-item', tabs_module["overflow-item"]),
+                                    children: [
+                                        tab.label,
+                                        errorCount > 0 && /*#__PURE__*/ jsx(Badge, {
+                                            intent: "danger",
+                                            className: clsx('byline-admin-tab-badge', tabs_module.badge),
+                                            children: errorCount
+                                        })
+                                    ]
+                                }, tab.name);
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };
-export { AdminTabs };
+export { AdminTabs, tabPanelId, tabTriggerId };

package/dist/presentation/tabs.module.js

@@ -1,10 +1,20 @@
 import "./tabs_module.css";
 const tabs_module = {
     tabs: "tabs-AUVgW2",
+    viewport: "viewport-Q34w7N",
+    tablist: "tablist-a3JXdm",
     tab: "tab-Tn7xcQ",
     "tab-active": "tab-active-cGf5N5",
     tabActive: "tab-active-cGf5N5",
     label: "label-PvJgbb",
-    badge: "badge-NJVOEv"
+    badge: "badge-NJVOEv",
+    "overflow-trigger": "overflow-trigger-sQPQE8",
+    overflowTrigger: "overflow-trigger-sQPQE8",
+    "overflow-icon": "overflow-icon-E4aR_Z",
+    overflowIcon: "overflow-icon-E4aR_Z",
+    "overflow-menu": "overflow-menu-BkkmwS",
+    overflowMenu: "overflow-menu-BkkmwS",
+    "overflow-item": "overflow-item-ahgTA4",
+    overflowItem: "overflow-item-ahgTA4"
 };
 export default tabs_module;

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.1",
   "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.1",
+    "@byline/auth": "6.2.1",
+    "@byline/ui": "6.2.1",
+    "@byline/core": "6.2.1",
+    "@byline/analytics-agent": "6.2.1",
+    "@byline/i18n": "6.2.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/forms/form-layout-styles.test.node.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { describe, expect, it } from 'vitest'
+
+// jsdom applies no stylesheet, so the one-column guarantee of the stacked
+// variant cannot be asserted by rendering. This reads the stylesheet directly:
+// the class has to exist, and it must not be swept into the two-column grid
+// rule that the split layout gets at >=60rem.
+const css = readFileSync(join(__dirname, 'form-renderer.module.css'), 'utf8')
+
+describe('stacked form layout styles', () => {
+  it('defines the stacked layout class', () => {
+    expect(css).toMatch(/\.layout-stacked\b/)
+    expect(css).toMatch(/:global\(\.byline-form-layout-stacked\)/)
+  })
+
+  it('does not put the stacked class in the two-column grid rule', () => {
+    const desktop = css.slice(css.indexOf('@media (min-width: 60rem)'))
+    const gridRule = desktop.slice(0, desktop.indexOf('}\n}') + 3)
+    expect(gridRule).toContain('grid-template-columns')
+    expect(gridRule).not.toContain('layout-stacked')
+  })
+})