@adecore/ui 0.24.0 → 0.24.1

package/dist/theme.css

@@ -501,12 +501,13 @@
     /* A strip that scrolls sideways fades out at the edge that still hides something, and only there,
        so a strip that fits keeps its first and last item sharp. The edges are set by whoever scrolls. */
     .scroll-fade-x {
+        --fade-size: 24px;
         --fade-start: 0px;
         --fade-end: 0px;
         mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
     }
-    .scroll-fade-x[data-fade-start] { --fade-start: 24px; }
-    .scroll-fade-x[data-fade-end] { --fade-end: 24px; }
+    .scroll-fade-x[data-fade-start] { --fade-start: var(--fade-size); }
+    .scroll-fade-x[data-fade-end] { --fade-end: var(--fade-size); }
     /* The same for a column under a fixed header: its top fades once something has scrolled under it. */
     .scroll-fade-top {
         --fade-start: 0px;

package/dist/workspace/TabStrip.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Icon } from '../Icon.js';
 import { IconButton } from '../IconButton.js';
 import { Tooltip } from '../Tooltip.js';
-import { tabGapAt } from './geometry.js';
+import { tabGapAt, tabRevealScrollLeft } from './geometry.js';
 /* Where an arrow, Home or End moves the selection from `index`, wrapping at either end; null for any other key. */
 function tabIndexForKey(key, index, count) {
     switch (key) {
@@ -62,20 +62,44 @@ export function TabStrip({ items, value, onValueChange, renderTab, focused = tru
             setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
         }
     }, [insertAt]);
-    useLayoutEffect(measure);
+    // Stays set after the active tab changes, as its width can settle frames later; a person's own scroll ends it.
+    const revealing = useRef(false);
+    const reveal = () => {
+        const element = strip.current;
+        const selected = element?.querySelector('[aria-selected="true"]');
+        if (!revealing.current || !element || !selected) {
+            return;
+        }
+        const container = selected.closest('[data-document-tab]');
+        const tab = container && element.contains(container) ? container : selected;
+        const fade = parseFloat(getComputedStyle(element).getPropertyValue('--fade-size')) || 0;
+        const bounds = element.getBoundingClientRect();
+        const rect = tab.getBoundingClientRect();
+        const left = tabRevealScrollLeft(element, rect.left - bounds.left - element.clientLeft + element.scrollLeft, rect.width, fade);
+        if (left !== element.scrollLeft) {
+            element.scrollLeft = left;
+        }
+    };
+    useLayoutEffect(() => {
+        revealing.current = true;
+    }, [value]);
+    useLayoutEffect(() => {
+        reveal();
+        measure();
+    });
     useEffect(() => {
         const element = strip.current;
         if (!element || typeof ResizeObserver === 'undefined') {
             return;
         }
-        const observer = new ResizeObserver(measure);
+        const observer = new ResizeObserver(() => {
+            reveal();
+            measure();
+        });
         observer.observe(element);
         element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
         return () => observer.disconnect();
     });
-    useEffect(() => {
-        strip.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
-    }, [value]);
     const gap = (event) => {
         const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
         return tabGapAt(rects, event.clientX);
@@ -110,10 +134,21 @@ export function TabStrip({ items, value, onValueChange, renderTab, focused = tru
             },
             onWheel: (event) => {
                 props.onWheel?.(event);
-                if (!event.defaultPrevented && !event.deltaX && event.deltaY) {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                revealing.current = false;
+                if (!event.deltaX && event.deltaY) {
                     event.currentTarget.scrollLeft += event.deltaY;
                 }
             },
+            onPointerDown: (event) => {
+                props.onPointerDown?.(event);
+                // A press on the strip itself grabs its scrollbar, and a touch may pan it.
+                if (event.target === event.currentTarget || event.pointerType === 'touch') {
+                    revealing.current = false;
+                }
+            },
             onDragOver: (event) => {
                 props.onDragOver?.(event);
                 if (!event.defaultPrevented) {

package/dist/workspace/geometry.d.ts

@@ -37,3 +37,14 @@ export declare function tabGapAt(rects: readonly {
     left: number;
     right: number;
 }[], x: number): number;
+export interface TabScrollView {
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+}
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export declare function tabRevealScrollLeft(view: TabScrollView, start: number, width: number, fade: number): number;

package/dist/workspace/geometry.js

@@ -151,3 +151,22 @@ export function tabGapAt(rects, x) {
     const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
     return index < 0 ? rects.length : index;
 }
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export function tabRevealScrollLeft(view, start, width, fade) {
+    const max = Math.max(0, view.scrollWidth - view.clientWidth);
+    const end = start + width;
+    const visibleStart = (left) => left + (left > 0 ? fade : 0);
+    const visibleEnd = (left) => left + view.clientWidth - (left < max - 1 ? fade : 0);
+    const clamp = (left) => Math.round(Math.min(max, Math.max(0, left)));
+    if (start >= visibleStart(view.scrollLeft) && end <= visibleEnd(view.scrollLeft)) {
+        return view.scrollLeft;
+    }
+    if (start < visibleStart(view.scrollLeft) || width > view.clientWidth - 2 * fade) {
+        return clamp(start - fade);
+    }
+    return clamp(end + fade - view.clientWidth);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/theme.css

@@ -501,12 +501,13 @@
     /* A strip that scrolls sideways fades out at the edge that still hides something, and only there,
        so a strip that fits keeps its first and last item sharp. The edges are set by whoever scrolls. */
     .scroll-fade-x {
+        --fade-size: 24px;
         --fade-start: 0px;
         --fade-end: 0px;
         mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
     }
-    .scroll-fade-x[data-fade-start] { --fade-start: 24px; }
-    .scroll-fade-x[data-fade-end] { --fade-end: 24px; }
+    .scroll-fade-x[data-fade-start] { --fade-start: var(--fade-size); }
+    .scroll-fade-x[data-fade-end] { --fade-end: var(--fade-size); }
     /* The same for a column under a fixed header: its top fades once something has scrolled under it. */
     .scroll-fade-top {
         --fade-start: 0px;

package/src/workspace/TabStrip.tsx

@@ -8,6 +8,7 @@ import {
     useState,
     type DragEvent,
     type MouseEvent,
+    type PointerEvent,
     type ReactNode,
     type UIEvent,
     type WheelEvent
@@ -19,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { Icon } from '../Icon.tsx';
 import { IconButton, type IconButtonProps } from '../IconButton.tsx';
 import { Tooltip } from '../Tooltip.tsx';
-import { tabGapAt } from './geometry.ts';
+import { tabGapAt, tabRevealScrollLeft } from './geometry.ts';
 
 /* Where an arrow, Home or End moves the selection from `index`, wrapping at either end; null for any other key. */
 function tabIndexForKey(key: string, index: number, count: number): number | null {
@@ -123,20 +124,44 @@ export function TabStrip({
             setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
         }
     }, [insertAt]);
-    useLayoutEffect(measure);
+    // Stays set after the active tab changes, as its width can settle frames later; a person's own scroll ends it.
+    const revealing = useRef(false);
+    const reveal = (): void => {
+        const element = strip.current;
+        const selected = element?.querySelector<HTMLElement>('[aria-selected="true"]');
+        if (!revealing.current || !element || !selected) {
+            return;
+        }
+        const container = selected.closest<HTMLElement>('[data-document-tab]');
+        const tab = container && element.contains(container) ? container : selected;
+        const fade = parseFloat(getComputedStyle(element).getPropertyValue('--fade-size')) || 0;
+        const bounds = element.getBoundingClientRect();
+        const rect = tab.getBoundingClientRect();
+        const left = tabRevealScrollLeft(element, rect.left - bounds.left - element.clientLeft + element.scrollLeft, rect.width, fade);
+        if (left !== element.scrollLeft) {
+            element.scrollLeft = left;
+        }
+    };
+    useLayoutEffect(() => {
+        revealing.current = true;
+    }, [value]);
+    useLayoutEffect(() => {
+        reveal();
+        measure();
+    });
     useEffect(() => {
         const element = strip.current;
         if (!element || typeof ResizeObserver === 'undefined') {
             return;
         }
-        const observer = new ResizeObserver(measure);
+        const observer = new ResizeObserver(() => {
+            reveal();
+            measure();
+        });
         observer.observe(element);
         element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
         return () => observer.disconnect();
     });
-    useEffect(() => {
-        strip.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
-    }, [value]);
     const gap = (event: DragEvent<HTMLDivElement>): number => {
         const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
         return tabGapAt(rects, event.clientX);
@@ -171,10 +196,21 @@ export function TabStrip({
             },
             onWheel: (event: WheelEvent<HTMLDivElement>) => {
                 props.onWheel?.(event);
-                if (!event.defaultPrevented && !event.deltaX && event.deltaY) {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                revealing.current = false;
+                if (!event.deltaX && event.deltaY) {
                     event.currentTarget.scrollLeft += event.deltaY;
                 }
             },
+            onPointerDown: (event: PointerEvent<HTMLDivElement>) => {
+                props.onPointerDown?.(event);
+                // A press on the strip itself grabs its scrollbar, and a touch may pan it.
+                if (event.target === event.currentTarget || event.pointerType === 'touch') {
+                    revealing.current = false;
+                }
+            },
             onDragOver: (event: DragEvent<HTMLDivElement>) => {
                 props.onDragOver?.(event);
                 if (!event.defaultPrevented) {

package/src/workspace/geometry.ts

@@ -188,3 +188,29 @@ export function tabGapAt(rects: readonly { left: number; right: number }[], x: n
     const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
     return index < 0 ? rects.length : index;
 }
+
+export interface TabScrollView {
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+}
+
+/**
+ * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
+ * when it already is. The strip only fades an edge it can still scroll toward, so a fade is counted
+ * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
+ */
+export function tabRevealScrollLeft(view: TabScrollView, start: number, width: number, fade: number): number {
+    const max = Math.max(0, view.scrollWidth - view.clientWidth);
+    const end = start + width;
+    const visibleStart = (left: number): number => left + (left > 0 ? fade : 0);
+    const visibleEnd = (left: number): number => left + view.clientWidth - (left < max - 1 ? fade : 0);
+    const clamp = (left: number): number => Math.round(Math.min(max, Math.max(0, left)));
+    if (start >= visibleStart(view.scrollLeft) && end <= visibleEnd(view.scrollLeft)) {
+        return view.scrollLeft;
+    }
+    if (start < visibleStart(view.scrollLeft) || width > view.clientWidth - 2 * fade) {
+        return clamp(start - fade);
+    }
+    return clamp(end + fade - view.clientWidth);
+}