@adecore/ui 0.38.0 → 0.40.0

package/src/workspace/TabStrip.tsx

@@ -91,6 +91,7 @@ export function TabStrip({
     const { t } = useTranslation('ui');
     const strip = useRef<HTMLDivElement>(null);
     const closingFocus = useRef<string | null>(null);
+
     useLayoutEffect(() => {
         if (closingFocus.current && !items.some((item) => item.id === closingFocus.current)) {
             closingFocus.current = null;
@@ -98,26 +99,33 @@ export function TabStrip({
             target?.focus({ preventScroll: true });
         }
     });
+
     const close = (id: string, action?: () => void): void => {
         if (strip.current?.contains(strip.current.ownerDocument.activeElement)) {
             closingFocus.current = id;
         }
+
         if (action) {
             action();
         } else {
             onClose?.(id);
         }
     };
+
     const [edges, setEdges] = useState({ start: false, end: false });
     const [insertion, setInsertion] = useState(0);
+
     const measure = (): void => {
         const element = strip.current;
+
         if (!element) {
             return;
         }
+
         const start = element.scrollLeft > 0;
         const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
         setEdges((current) => (current.start === start && current.end === end ? current : { start, end }));
+
         if (insertAt !== undefined && insertAt !== null) {
             const tabs = Array.from(element.querySelectorAll<HTMLElement>('[data-document-tab]'));
             const after = tabs[insertAt];
@@ -125,48 +133,63 @@ export function TabStrip({
             setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
         }
     };
+
     // 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(() => {
             reveal();
             measure();
         });
+
         observer.observe(element);
         element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
+
         return () => observer.disconnect();
     });
+
     const gap = (event: DragEvent<HTMLDivElement>): number => {
         const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
+
         return tabGapAt(rects, event.clientX);
     };
+
     const context: TabContextValue = {
         items,
         value,
@@ -180,6 +203,7 @@ export function TabStrip({
         close,
         focus: (index) => strip.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[index]?.focus()
     };
+
     return useRender({
         render,
         ref: [strip, ref ?? null],
@@ -198,16 +222,20 @@ export function TabStrip({
             },
             onWheel: (event: WheelEvent<HTMLDivElement>) => {
                 props.onWheel?.(event);
+
                 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;
@@ -215,12 +243,14 @@ export function TabStrip({
             },
             onDragOver: (event: DragEvent<HTMLDivElement>) => {
                 props.onDragOver?.(event);
+
                 if (!event.defaultPrevented) {
                     onTabDragOver?.(gap(event), event);
                 }
             },
             onDrop: (event: DragEvent<HTMLDivElement>) => {
                 props.onDrop?.(event);
+
                 if (!event.defaultPrevented) {
                     onTabDrop?.(gap(event), event);
                 }
@@ -246,6 +276,7 @@ interface TabContextValue extends Pick<
     close(id: string, action?: () => void): void;
     focus(index: number): void;
 }
+
 const TabContext = createContext<TabContextValue | null>(null);
 
 export interface DocumentTabProps extends Omit<useRender.ComponentProps<'span'>, 'children' | 'onDoubleClick' | 'onDragStart' | 'onDragEnd'> {
@@ -260,20 +291,26 @@ export interface DocumentTabProps extends Omit<useRender.ComponentProps<'span'>,
 /** A tab with application-owned metadata and menus, rendered inside TabStrip's renderTab slot. */
 export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDragStart, onDragEnd, className, render, ref, ...props }: DocumentTabProps) {
     const context = useContext(TabContext);
+
     if (!context) {
         throw new Error('DocumentTab must be rendered inside TabStrip.');
     }
+
     const { t } = useTranslation('ui');
     const { items, value, onValueChange } = context;
     const index = items.findIndex((candidate) => candidate.id === item.id);
+
     const close = (): void => context.close(item.id, onClose);
+
     const closable = item.closable !== false && (onClose ?? context.onClose) !== undefined;
+
     // Shift with Cmd, Ctrl or Alt stays the app's to give a meaning.
     const closesOnPress = (event: MouseEvent): boolean =>
         !!context.pressToClose &&
         closable &&
         !item.pinned &&
         (event.button === 1 || (event.button === 0 && event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey));
+
     return useRender({
         render,
         ref,
@@ -290,6 +327,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
             },
             onMouseDown: (event: MouseEvent<HTMLSpanElement>) => {
                 props.onMouseDown?.(event);
+
                 // A press that closes starts no text selection, takes no focus and no middle-button scroll.
                 if (closesOnPress(event)) {
                     event.preventDefault();
@@ -297,6 +335,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
             },
             onAuxClick: (event: MouseEvent<HTMLSpanElement>) => {
                 props.onAuxClick?.(event);
+
                 if (event.button === 1 && closesOnPress(event)) {
                     event.preventDefault();
                     close();
@@ -317,8 +356,10 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                             onClick={(event) => {
                                 if (closesOnPress(event)) {
                                     close();
+
                                     return;
                                 }
+
                                 onValueChange(item.id);
                             }}
                             onDoubleClick={(event) => (onDoubleClick ?? context.onDoubleClick)?.(item.id, event)}
@@ -329,6 +370,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                             onDragEnd={onDragEnd ?? context.onDragEnd}
                             onKeyDown={(event) => {
                                 const next = tabIndexForKey(event.key, index, items.length);
+
                                 if (next !== null) {
                                     event.preventDefault();
                                     onValueChange(items[next]!.id);

package/src/workspace/Workspace.tsx

@@ -8,8 +8,10 @@ export interface WorkspaceProps extends useRender.ComponentProps<'div'> {
     toolbar?: ReactNode;
     sidebar?: ReactNode;
     sidePanel?: ReactNode;
+
     /** Auto-sized regions keep their own width, separators and opening animation. */
     sidebarWidth?: number | 'auto';
+
     sidePanelWidth?: number | 'auto';
     sidebarOpen?: boolean;
     sidePanelOpen?: boolean;
@@ -38,6 +40,7 @@ export function Workspace({
     const leftOpen = hasSidebar && (sidebarOpen ?? true);
     const rightOpen = hasPanel && (sidePanelOpen ?? true);
     const hasToolbar = isPresent(toolbar);
+
     const element = useRender({
         render,
         ref,
@@ -70,6 +73,8 @@ export function Workspace({
             )
         }
     });
+
     const context = { layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } };
+
     return <WorkspaceContext value={context}>{element}</WorkspaceContext>;
 }

package/src/workspace/context.ts

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 import type { SplitEdges } from './geometry.ts';
 
 export type WorkspaceLayout = 'standard' | 'roomy';
+
 export const WorkspaceContext = createContext<{ layout: WorkspaceLayout; edges: SplitEdges }>({
     layout: 'standard',
     edges: { top: true, right: true, bottom: true, left: true }

package/src/workspace/geometry.ts

@@ -6,19 +6,23 @@ export interface SplitRect {
     width: number;
     height: number;
 }
+
 export interface SplitEdges {
     top?: boolean;
     right?: boolean;
     bottom?: boolean;
     left?: boolean;
 }
+
 export interface SplitMinimum {
     width: number;
     height: number;
 }
+
 export interface SplitPaneRect extends SplitRect {
     pane: SplitPane;
 }
+
 export interface SplitDivider extends SplitRect {
     splitId: string;
     index: number;
@@ -26,6 +30,7 @@ export interface SplitDivider extends SplitRect {
     lengths: number[];
     minimums: number[];
 }
+
 export interface SplitGeometry {
     panes: SplitPaneRect[];
     dividers: SplitDivider[];
@@ -33,45 +38,58 @@ export interface SplitGeometry {
 
 function distribute(total: number, weights: number[], minimums: number[]): number[] {
     const floor = minimums.reduce((sum, size) => sum + size, 0);
+
     if (floor >= total) {
         return minimums.map((size) => (floor ? (size * total) / floor : total / minimums.length));
     }
+
     const result = weights.map(() => 0);
     const pending = new Set(weights.map((_, i) => i));
     let remaining = total;
+
     while (pending.size) {
         const sum = [...pending].reduce((value, i) => value + weights[i]!, 0);
         const small = [...pending].filter((i) => (remaining * weights[i]!) / sum < minimums[i]!);
+
         if (!small.length) {
             pending.forEach((i) => {
                 result[i] = (remaining * weights[i]!) / sum;
             });
+
             break;
         }
+
         small.forEach((i) => {
             result[i] = minimums[i]!;
             remaining -= minimums[i]!;
             pending.delete(i);
         });
     }
+
     return result;
 }
 
 export function splitGeometry(layout: SplitLayout, width: number, height: number, gap: number, minimum: (pane: SplitPane) => SplitMinimum): SplitGeometry {
     const result: SplitGeometry = { panes: [], dividers: [] };
     const minimums = new Map<string, SplitMinimum>();
+
     const measure = (node: SplitNode): SplitMinimum => {
         if (node.type === 'pane') {
             const value = minimum(node);
+
             const safe = {
                 width: Math.max(0, Number.isFinite(value.width) ? value.width : 0),
                 height: Math.max(0, Number.isFinite(value.height) ? value.height : 0)
             };
+
             minimums.set(node.id, safe);
+
             return safe;
         }
+
         const children = node.children.map(measure);
         const horizontal = node.axis === 'horizontal';
+
         const value = {
             width: horizontal
                 ? children.reduce((sum, item) => sum + item.width, 0) + gap * (children.length - 1)
@@ -80,14 +98,19 @@ export function splitGeometry(layout: SplitLayout, width: number, height: number
                 ? Math.max(...children.map((item) => item.height))
                 : children.reduce((sum, item) => sum + item.height, 0) + gap * (children.length - 1)
         };
+
         minimums.set(node.id, value);
+
         return value;
     };
+
     const walk = (node: SplitNode, rect: SplitRect): void => {
         if (node.type === 'pane') {
             result.panes.push({ ...rect, pane: node });
+
             return;
         }
+
         const horizontal = node.axis === 'horizontal';
         const axisLength = horizontal ? rect.width : rect.height;
         const spacing = Math.min(gap, axisLength / (node.children.length - 1));
@@ -95,10 +118,12 @@ export function splitGeometry(layout: SplitLayout, width: number, height: number
         const limits = node.children.map((child) => minimums.get(child.id)![horizontal ? 'width' : 'height']);
         const lengths = distribute(available, node.sizes, limits);
         let offset = 0;
+
         node.children.forEach((child, i) => {
             const end = Math.round(offset + lengths[i]!);
             const start = Math.round(offset);
             walk(child, horizontal ? { ...rect, x: rect.x + start, width: end - start } : { ...rect, y: rect.y + start, height: end - start });
+
             if (i < node.children.length - 1) {
                 result.dividers.push({
                     ...rect,
@@ -110,12 +135,15 @@ export function splitGeometry(layout: SplitLayout, width: number, height: number
                     minimums: limits
                 });
             }
+
             offset += lengths[i]! + spacing;
         });
     };
+
     const root = layout.maximized ? (findSplitNode(layout.root, layout.maximized) ?? layout.root) : layout.root;
     measure(root);
     walk(root, { x: 0, y: 0, width: Math.max(0, width), height: Math.max(0, height) });
+
     return result;
 }
 
@@ -123,14 +151,17 @@ export function resizeSplit(divider: SplitDivider, delta: number, symmetric = fa
     const lengths = [...divider.lengths];
     const { index } = divider;
     const total = lengths.reduce((sum, size) => sum + size, 0);
+
     if (total <= 0 || lengths.some((size) => size <= 0)) {
         return lengths.map(() => 1 / lengths.length);
     }
+
     const mirror = lengths.length - divider.index - 2;
     const affected = new Set([index, index + 1, ...(symmetric ? [mirror, mirror + 1] : [])]);
     const span = [...affected].reduce((sum, i) => sum + lengths[i]!, 0);
     const share = Number.isFinite(minimumShare) ? Math.max(0, Math.min(1 / affected.size, minimumShare)) : 0;
     const min = divider.minimums.map((size, i) => Math.min(lengths[i]!, Math.max(size, affected.has(i) ? span * share : 0)));
+
     if (symmetric && mirror !== index) {
         const changes = lengths.map(() => 0);
         changes[index]!++;
@@ -139,17 +170,22 @@ export function resizeSplit(divider: SplitDivider, delta: number, symmetric = fa
         changes[mirror + 1]!++;
         let lower = -Infinity;
         let upper = Infinity;
+
         changes.forEach((coefficient, i) => {
             if (coefficient > 0) {
                 lower = Math.max(lower, (min[i]! - lengths[i]!) / coefficient);
             }
+
             if (coefficient < 0) {
                 upper = Math.min(upper, (lengths[i]! - min[i]!) / -coefficient);
             }
         });
+
         const change = Math.max(lower, Math.min(delta, upper));
+
         return lengths.map((size, i) => Math.max(Number.EPSILON, (size + changes[i]! * change) / total));
     }
+
     const change = Math.max(min[index]! - lengths[index]!, Math.min(delta, lengths[index + 1]! - min[index + 1]!));
     const pair = lengths[index]! + lengths[index + 1]!;
     const middle = pair / 2;
@@ -157,6 +193,7 @@ export function resizeSplit(divider: SplitDivider, delta: number, symmetric = fa
     // A snap must not cross either pane's minimum, including minimums inherited from nested splits.
     lengths[index] = Math.abs(next - middle) <= snapDistance && middle >= min[index]! && middle >= min[index + 1]! ? middle : next;
     lengths[index + 1] = pair - lengths[index]!;
+
     return lengths.map((size) => Math.max(Number.EPSILON, size / total));
 }
 
@@ -165,6 +202,7 @@ export function paneRadius(rect: SplitRect, width: number, height: number, edges
     const top = rect.y === 0 && edges.top;
     const right = rect.x + rect.width >= width && edges.right;
     const bottom = rect.y + rect.height >= height && edges.bottom;
+
     return [top || left, top || right, bottom || right, bottom || left].map((flush) => `${flush ? 0 : radius}px`).join(' ');
 }
 
@@ -172,20 +210,25 @@ export function splitSideAt(rect: SplitRect, x: number, y: number): SplitSide |
     const horizontal = (x - rect.x) / rect.width;
     const vertical = (y - rect.y) / rect.height;
     const nearest = Math.min(horizontal, 1 - horizontal, vertical, 1 - vertical);
+
     if (nearest > 0.25) {
         return undefined;
     }
+
     if (nearest === horizontal) {
         return 'left';
     }
+
     if (nearest === 1 - horizontal) {
         return 'right';
     }
+
     return nearest === vertical ? 'top' : 'bottom';
 }
 
 export function tabGapAt(rects: readonly { left: number; right: number }[], x: number): number {
     const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
+
     return index < 0 ? rects.length : index;
 }
 
@@ -203,14 +246,20 @@ export interface TabScrollView {
 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);
 }