@adecore/ui 0.21.1 → 0.21.2

package/src/popover/parts.tsx

@@ -2,6 +2,7 @@ import type { ComponentProps } from 'react';
 import { Popover as BasePopover } from '@base-ui-components/react/popover';
 import { PreviewCard as BasePreviewCard } from '@base-ui-components/react/preview-card';
 import { withClass } from '../class-name.ts';
+import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
 
 /*
@@ -16,10 +17,7 @@ const POPUP_VARIANT = {
 
 export type PopupVariant = keyof typeof POPUP_VARIANT;
 
-type Placement = Pick<
-    ComponentProps<typeof BasePopover.Positioner>,
-    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionBoundary' | 'collisionAvoidance' | 'anchor' | 'sticky' | 'positionMethod'
->;
+type Placement = Pick<ComponentProps<typeof BasePopover.Positioner>, PlacementKey>;
 
 export const PopoverRoot = BasePopover.Root;
 
@@ -37,38 +35,12 @@ export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> &
     };
 
 /* The portal, the positioner and the popup of a popover: under its trigger and lined up with its start unless it says otherwise. */
-export function PopoverPopup({
-    variant = 'menu',
-    side = 'bottom',
-    align = 'start',
-    sideOffset = 8,
-    alignOffset,
-    collisionPadding,
-    collisionBoundary,
-    collisionAvoidance,
-    anchor,
-    sticky,
-    positionMethod,
-    className,
-    ...props
-}: PopoverPopupProps) {
+export function PopoverPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }: PopoverPopupProps) {
+    const [placement, popupProps] = splitPlacement(props);
     return (
         <BasePopover.Portal>
-            <BasePopover.Positioner
-                className="popup-positioner"
-                render={renderPositioner}
-                side={side}
-                align={align}
-                sideOffset={sideOffset}
-                alignOffset={alignOffset}
-                collisionPadding={collisionPadding}
-                collisionBoundary={collisionBoundary}
-                collisionAvoidance={collisionAvoidance}
-                anchor={anchor}
-                sticky={sticky}
-                positionMethod={positionMethod}
-            >
-                <BasePopover.Popup className={withClass(POPUP_VARIANT[variant], className)} {...props} />
+            <BasePopover.Positioner className="popup-positioner" render={renderPositioner} {...placement} side={side} align={align} sideOffset={sideOffset}>
+                <BasePopover.Popup className={withClass(POPUP_VARIANT[variant], className)} {...popupProps} />
             </BasePopover.Positioner>
         </BasePopover.Portal>
     );
@@ -84,37 +56,12 @@ export type PreviewCardPopupProps = ComponentProps<typeof BasePreviewCard.Popup>
     };
 
 /* A card that opens while the pointer rests on its trigger, drawn like a popover. */
-export function PreviewCardPopup({
-    variant = 'menu',
-    side = 'bottom',
-    align = 'start',
-    sideOffset = 8,
-    alignOffset,
-    collisionPadding,
-    collisionBoundary,
-    collisionAvoidance,
-    anchor,
-    sticky,
-    positionMethod,
-    className,
-    ...props
-}: PreviewCardPopupProps) {
+export function PreviewCardPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }: PreviewCardPopupProps) {
+    const [placement, popupProps] = splitPlacement(props);
     return (
         <BasePreviewCard.Portal>
-            <BasePreviewCard.Positioner
-                className="z-(--z-popup)"
-                side={side}
-                align={align}
-                sideOffset={sideOffset}
-                alignOffset={alignOffset}
-                collisionPadding={collisionPadding}
-                collisionBoundary={collisionBoundary}
-                collisionAvoidance={collisionAvoidance}
-                anchor={anchor}
-                sticky={sticky}
-                positionMethod={positionMethod}
-            >
-                <BasePreviewCard.Popup className={withClass(POPUP_VARIANT[variant], className)} {...props} />
+            <BasePreviewCard.Positioner className="z-(--z-popup)" {...placement} side={side} align={align} sideOffset={sideOffset}>
+                <BasePreviewCard.Popup className={withClass(POPUP_VARIANT[variant], className)} {...popupProps} />
             </BasePreviewCard.Positioner>
         </BasePreviewCard.Portal>
     );

package/src/settings/SettingsDialog.tsx

@@ -277,7 +277,7 @@ export function SettingsDialog({
                         </div>
                     </div>
                     {/* The header sits outside the panels: inside one it remounts on every section
-                            change, which throws the keyboard's focus away mid-arrow-key. */}
+                        change, which throws the keyboard's focus away mid-arrow-key. */}
                     <div className="relative flex min-h-0 min-w-0 grow flex-col">
                         <div
                             className={clsx('flex min-w-0 items-start gap-4 px-8 pt-5.5 pb-4.5 max-[960px]:px-4', floating && 'absolute inset-x-0 top-0 z-10')}

package/src/shortcut.ts

@@ -37,7 +37,13 @@ const NAMED_KEYS = new Set(['Enter', 'Escape', 'Backspace', 'Delete', 'Tab', 'Sp
 
 const FUNCTION_KEY = /^F([1-9]|1[0-2])$/;
 
-const MODIFIER_WORDS = ['Mod', 'Ctrl', 'Meta', 'Alt', 'Shift'] as const;
+const MODIFIER_FIELDS: Readonly<Record<string, 'mod' | 'ctrl' | 'meta' | 'alt' | 'shift'>> = {
+    Mod: 'mod',
+    Ctrl: 'ctrl',
+    Meta: 'meta',
+    Alt: 'alt',
+    Shift: 'shift'
+};
 
 const isKey = (word: string): boolean =>
     /^[A-Za-z0-9]$/.test(word) || word in PUNCTUATION_CODES || CHARACTER_KEYS.has(word) || NAMED_KEYS.has(word) || FUNCTION_KEY.test(word);
@@ -51,9 +57,8 @@ export const shortcut = (text: string): Shortcut => {
     const words = text === '+' ? ['+'] : text.endsWith('++') ? [...text.slice(0, -2).split('+'), '+'] : text.split('+');
     const result: Shortcut = { mod: false, ctrl: false, meta: false, alt: false, shift: false, key: '' };
     for (const word of words) {
-        const modifier = MODIFIER_WORDS.find((candidate) => candidate === word);
-        if (modifier) {
-            result[modifier === 'Mod' ? 'mod' : modifier === 'Ctrl' ? 'ctrl' : modifier === 'Meta' ? 'meta' : modifier === 'Alt' ? 'alt' : 'shift'] = true;
+        if (Object.hasOwn(MODIFIER_FIELDS, word)) {
+            result[MODIFIER_FIELDS[word]!] = true;
             continue;
         }
         if (!isKey(word)) {

package/src/tabs/parts.tsx

@@ -124,6 +124,12 @@ export function TabsList({ className, children, start, end, ...props }: TabsList
 
     const visible = shown === null ? tabs : shown.map((index) => tabs[index]!);
     const hidden = shown === null ? [] : tabs.filter((_, index) => !shown.includes(index));
+    const more = (
+        <>
+            {t('tabs.more')}
+            <Icon icon={ChevronDown} size={14} />
+        </>
+    );
 
     return (
         <div ref={strip} className={clsx('relative flex items-center gap-4 border-b border-border', className)}>
@@ -137,10 +143,7 @@ export function TabsList({ className, children, start, end, ...props }: TabsList
             </BaseTabs.List>
             {hidden.length > 0 && (
                 <MenuRoot>
-                    <MenuTrigger className={MORE}>
-                        {t('tabs.more')}
-                        <Icon icon={ChevronDown} size={14} />
-                    </MenuTrigger>
+                    <MenuTrigger className={MORE}>{more}</MenuTrigger>
                     <MenuPopup align="end" className="min-w-48">
                         <InMenuContext value>
                             {hidden.map((tab) => (
@@ -164,10 +167,7 @@ export function TabsList({ className, children, start, end, ...props }: TabsList
                         {tab.props.onClose !== undefined && <span className="size-5 shrink-0" />}
                     </span>
                 ))}
-                <span className={MORE}>
-                    {t('tabs.more')}
-                    <Icon icon={ChevronDown} size={14} />
-                </span>
+                <span className={MORE}>{more}</span>
             </div>
         </div>
     );

package/src/tree/parts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type MouseEvent, type KeyboardEvent, type PointerEvent } from 'react';
+import { useCallback, type MouseEvent } from 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui-components/react/use-render';
 import { ChevronRight } from 'lucide-react';
@@ -9,6 +9,14 @@ import { mergeRefs } from '../merge-refs.ts';
 import { treeRowStyle } from './style.ts';
 import { TREE_ROWS, useTreeShift } from './use-tree-shift.tsx';
 
+/* A handler that keeps the event to the control, so the row under it never sees the press. */
+const stopped =
+    <Event extends { stopPropagation(): void }>(handler?: (event: Event) => void) =>
+    (event: Event): void => {
+        event.stopPropagation();
+        handler?.(event);
+    };
+
 export type TreeRootProps = useRender.ComponentProps<'div'> & {
     /* What a row wider than the tree does: cut its name off at the end, or keep the row whole and let every row slide sideways together, as a file tree does. */
     overflow?: 'truncate' | 'scroll';
@@ -127,10 +135,7 @@ export function TreeChevron({ expanded, onExpandedChange, render, className, ref
                     onExpandedChange?.(!expanded);
                 }
             },
-            onDoubleClick: (event: MouseEvent<HTMLButtonElement>) => {
-                event.stopPropagation();
-                onDoubleClick?.(event);
-            },
+            onDoubleClick: stopped(onDoubleClick),
             children: <Icon icon={ChevronRight} size={12} className={expanded ? 'rotate-90' : undefined} />
         }
     });
@@ -156,22 +161,10 @@ export function TreeControl({ render, className, ref, onClick, onDoubleClick, on
             ...props,
             'data-tree-control': true,
             className: clsx('adecore-tree-control', className),
-            onClick: (event: MouseEvent<HTMLSpanElement>) => {
-                event.stopPropagation();
-                onClick?.(event);
-            },
-            onDoubleClick: (event: MouseEvent<HTMLSpanElement>) => {
-                event.stopPropagation();
-                onDoubleClick?.(event);
-            },
-            onKeyDown: (event: KeyboardEvent<HTMLSpanElement>) => {
-                event.stopPropagation();
-                onKeyDown?.(event);
-            },
-            onPointerDown: (event: PointerEvent<HTMLSpanElement>) => {
-                event.stopPropagation();
-                onPointerDown?.(event);
-            }
+            onClick: stopped(onClick),
+            onDoubleClick: stopped(onDoubleClick),
+            onKeyDown: stopped(onKeyDown),
+            onPointerDown: stopped(onPointerDown)
         }
     });
 }

package/src/tree/use-tree-shift.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, type ReactElement } from 'react';
-import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from '../file-tree/shift.ts';
+import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.ts';
 
 const HIDE_AFTER = 900;
 

package/src/workspace/SplitView.tsx

@@ -8,6 +8,7 @@ import {
     useState,
     type CSSProperties,
     type DragEvent,
+    type FocusEvent,
     type KeyboardEvent,
     type ReactNode
 } from 'react';
@@ -90,6 +91,12 @@ interface Measurement {
 const ZERO: Measurement = { width: 0, height: 0, left: 0, top: 0, scaleX: 1, scaleY: 1 };
 const MINIMUM: SplitMinimum = { width: 120, height: 80 };
 
+/* The pane's section or header under `container`, found by its data attribute rather than a selector, so no id needs escaping. */
+function paneElement(container: ParentNode | null | undefined, attribute: 'splitPane' | 'splitHeader', paneId: string): HTMLElement | undefined {
+    const selector = attribute === 'splitPane' ? '[data-split-pane]' : '[data-split-header]';
+    return Array.from(container?.querySelectorAll<HTMLElement>(selector) ?? []).find((element) => element.dataset[attribute] === paneId);
+}
+
 function Divider({
     divider,
     minimumResizeShare,
@@ -227,7 +234,7 @@ export function SplitView({
             (!previous.isConnected || previous.closest('[hidden]')) &&
             (!active || active === element.ownerDocument.body || active === previous)
         ) {
-            const pane = Array.from(element.querySelectorAll<HTMLElement>('[data-split-pane]')).find((item) => item.dataset.splitPane === value.focused);
+            const pane = paneElement(element, 'splitPane', value.focused);
             const target = pane?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]') ?? pane;
             target?.focus({ preventScroll: true });
         }
@@ -312,6 +319,14 @@ export function SplitView({
         .sort((left, right) => (left.viewId < right.viewId ? -1 : left.viewId > right.viewId ? 1 : 0));
     const visible = new Map(geometry.panes.map((pane) => [pane.pane.id, pane]));
     const radius = (rect: SplitRect): string => paneRadius(rect, measurement.width, measurement.height, edges, layout === 'roomy' ? 8 : 0);
+    // A header squares off the top corners of the body under it.
+    const bodyRadius = (rect: SplitRect, header: number): string => {
+        const corners = radius(rect).split(' ');
+        if (header > 0) {
+            corners[0] = corners[1] = '0px';
+        }
+        return corners.join(' ');
+    };
     const bounds: SplitViewBounds[] = panes.flatMap((pane) => {
         const rect = visible.get(pane.id);
         const header = Math.min(barHeight, rect?.height ?? 0);
@@ -323,11 +338,8 @@ export function SplitView({
                   height: Math.max(0, rect.height - header) * measurement.scaleY
               }
             : { x: 0, y: 0, width: 0, height: 0 };
-        const corners = rect ? radius(rect).split(' ') : ['0px', '0px', '0px', '0px'];
-        if (header > 0) {
-            corners[0] = corners[1] = '0px';
-        }
-        return pane.views.map((viewId) => ({ viewId, paneId: pane.id, active: !!rect && pane.active === viewId, rect: body, borderRadius: corners.join(' ') }));
+        const borderRadius = rect ? bodyRadius(rect, header) : '0px 0px 0px 0px';
+        return pane.views.map((viewId) => ({ viewId, paneId: pane.id, active: !!rect && pane.active === viewId, rect: body, borderRadius }));
     });
     const boundsKey = JSON.stringify(bounds);
     const reportedBounds = useRef('');
@@ -379,9 +391,7 @@ export function SplitView({
             return null;
         }
         const header = Math.min(barHeight, rect.height);
-        const strip = Array.from(root.current?.querySelectorAll<HTMLElement>('[data-split-header]') ?? []).find(
-            (element) => element.dataset.splitHeader === rect.pane.id
-        );
+        const strip = paneElement(root.current, 'splitHeader', rect.pane.id);
         const tabRects = Array.from(strip?.querySelectorAll('[data-document-tab]') ?? [], (element) => element.getBoundingClientRect());
         const inHeader = y < rect.y + header;
         const side = inHeader ? undefined : (splitSideAt(rect, x, y) ?? 'center');
@@ -446,9 +456,7 @@ export function SplitView({
         const next = options[0];
         if (next) {
             dispatch({ type: 'focus', paneId: next.pane.id });
-            const element = Array.from(root.current?.querySelectorAll<HTMLElement>('[data-split-pane]') ?? []).find(
-                (pane) => pane.dataset.splitPane === next.pane.id
-            );
+            const element = paneElement(root.current, 'splitPane', next.pane.id);
             element?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')?.focus();
             if (!showTabs) {
                 element?.focus();
@@ -465,7 +473,7 @@ export function SplitView({
             style,
             'data-layout': layout,
             'data-dragging': dragging || undefined,
-            onFocusCapture: (event: React.FocusEvent<HTMLDivElement>) => {
+            onFocusCapture: (event: FocusEvent<HTMLDivElement>) => {
                 props.onFocusCapture?.(event);
                 lastFocus.current = event.target;
             },
@@ -591,17 +599,13 @@ export function SplitView({
                         const rect = visible.get(pane.id);
                         const active = !!rect && pane.active === viewId;
                         const header = Math.min(barHeight, rect?.height ?? 0);
-                        const corners = rect ? radius(rect).split(' ') : [];
-                        if (header > 0) {
-                            corners[0] = corners[1] = '0px';
-                        }
                         const position: CSSProperties = rect
                             ? {
                                   left: rect.x,
                                   top: rect.y + header,
                                   width: rect.width,
                                   height: Math.max(0, rect.height - header),
-                                  borderRadius: corners.join(' ')
+                                  borderRadius: bodyRadius(rect, header)
                               }
                             : {};
                         return (
@@ -637,7 +641,7 @@ export function SplitView({
                                               type: 'equalizeAxis',
                                               axis: divider.axis,
                                               length: divider.axis === 'horizontal' ? measurement.width : measurement.height,
-                                              gap: layout === 'roomy' ? 8 : 1
+                                              gap
                                           }
                                         : { type: 'equalize', splitId: divider.splitId, index: divider.index }
                                 )

package/src/workspace/TabStrip.tsx

@@ -21,6 +21,22 @@ import { IconButton, type IconButtonProps } from '../IconButton.tsx';
 import { Tooltip } from '../Tooltip.tsx';
 import { tabGapAt } 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 {
+    switch (key) {
+        case 'ArrowRight':
+            return (index + 1) % count;
+        case 'ArrowLeft':
+            return (index + count - 1) % count;
+        case 'Home':
+            return 0;
+        case 'End':
+            return count - 1;
+        default:
+            return null;
+    }
+}
+
 export interface TabStripItem {
     id: string;
     label: string;
@@ -213,6 +229,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
     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;
     return useRender({
         render,
         ref,
@@ -247,21 +264,12 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                             }}
                             onDragEnd={onDragEnd ?? context.onDragEnd}
                             onKeyDown={(event) => {
-                                const next =
-                                    event.key === 'ArrowRight'
-                                        ? (index + 1) % items.length
-                                        : event.key === 'ArrowLeft'
-                                          ? (index + items.length - 1) % items.length
-                                          : event.key === 'Home'
-                                            ? 0
-                                            : event.key === 'End'
-                                              ? items.length - 1
-                                              : null;
+                                const next = tabIndexForKey(event.key, index, items.length);
                                 if (next !== null) {
                                     event.preventDefault();
                                     onValueChange(items[next]!.id);
                                     context.focus(next);
-                                } else if (event.key === 'Delete' && item.closable !== false && (onClose || context.onClose)) {
+                                } else if (event.key === 'Delete' && closable) {
                                     event.preventDefault();
                                     close();
                                 }
@@ -279,7 +287,7 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                         </button>
                     </Tooltip>
                     {item.pinned && <Icon icon={Pin} size={12} className="shrink-0 text-text-muted" />}
-                    {item.closable !== false && (onClose || context.onClose) && (
+                    {closable && (
                         <IconButton
                             icon={X}
                             size="2xs"

package/src/workspace/Workspace.tsx

@@ -15,6 +15,8 @@ export interface WorkspaceProps extends useRender.ComponentProps<'div'> {
     sidePanelOpen?: boolean;
 }
 
+const isPresent = (node: ReactNode): boolean => node !== undefined && node !== null && node !== false;
+
 export function Workspace({
     layout = 'standard',
     toolbar,
@@ -31,11 +33,11 @@ export function Workspace({
     style,
     ...props
 }: WorkspaceProps) {
-    const hasSidebar = sidebar !== undefined && sidebar !== null && sidebar !== false;
-    const hasPanel = sidePanel !== undefined && sidePanel !== null && sidePanel !== false;
+    const hasSidebar = isPresent(sidebar);
+    const hasPanel = isPresent(sidePanel);
     const leftOpen = hasSidebar && (sidebarOpen ?? true);
     const rightOpen = hasPanel && (sidePanelOpen ?? true);
-    const hasToolbar = toolbar !== undefined && toolbar !== null && toolbar !== false;
+    const hasToolbar = isPresent(toolbar);
     const element = useRender({
         render,
         ref,