@adecore/ui 0.33.3 → 0.34.0

package/src/command-palette/parts.tsx

@@ -0,0 +1,145 @@
+import { createContext, useContext, useRef, type ComponentProps, type ReactNode, type RefObject } from 'react';
+import clsx from 'clsx';
+import { Search } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { useRender } from '@base-ui/react/use-render';
+import { withClass } from '../class-name.ts';
+import { DialogPopup, DialogRoot, type DialogPopupProps } from '../dialog/parts.tsx';
+import { Icon } from '../Icon.tsx';
+import { Kbd } from '../Kbd.tsx';
+import { mergeRefs } from '../merge-refs.ts';
+import { KEY_SHORTCUTS } from '../shortcut.ts';
+
+/* The field, for the popup to put the focus in when it opens: a control before it would take it otherwise. */
+const InputRefContext = createContext<RefObject<HTMLInputElement | null> | null>(null);
+
+/* A palette asks for a few words and shows rows of one line; a search whose rows are lines of source needs the wider one. */
+const SIZE = {
+    md: 'w-[576px]',
+    lg: 'w-[760px]'
+} as const;
+
+type AutocompleteProps<ItemValue> = Omit<
+    Autocomplete.Root.Props<ItemValue>,
+    'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete' | 'inline' | 'openOnInputClick' | 'modal' | 'actionsRef' | 'items'
+> & {
+    /* A flat list, or groups of `{ value, items }`. Any object with `items` is a group, as Base UI's overloads take it. */
+    items?: readonly ItemValue[] | readonly { readonly items: readonly ItemValue[] }[];
+};
+
+type DialogProps = Pick<ComponentProps<typeof DialogRoot>, 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete'>;
+
+export type CommandPaletteRootProps<ItemValue> = AutocompleteProps<ItemValue> & DialogProps;
+
+/*
+ * A dialog around a list that is always open. `open` and its handlers are the dialog's; the rest
+ * is Base UI's autocomplete, so the query, the items and their filter work as in a combobox. The
+ * first row is highlighted and stays so while the pointer leaves the list, which is what Enter runs.
+ */
+export function CommandPaletteRoot<ItemValue>({
+    open,
+    defaultOpen,
+    onOpenChange,
+    onOpenChangeComplete,
+    autoHighlight = 'always',
+    keepHighlight = true,
+    items,
+    children,
+    ...props
+}: CommandPaletteRootProps<ItemValue>) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    return (
+        <DialogRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} onOpenChangeComplete={onOpenChangeComplete}>
+            <InputRefContext value={inputRef}>
+                {/* Its props take a flat list or groups; only its overloads split the two, which a generic caller cannot pick between. */}
+                <Autocomplete.Root<ItemValue>
+                    {...props}
+                    items={items as readonly ItemValue[] | undefined}
+                    inline
+                    open
+                    autoHighlight={autoHighlight}
+                    keepHighlight={keepHighlight}
+                >
+                    {children}
+                </Autocomplete.Root>
+            </InputRefContext>
+        </DialogRoot>
+    );
+}
+
+export type CommandPalettePopupProps = Omit<DialogPopupProps, 'size'> & {
+    size?: keyof typeof SIZE;
+};
+
+/*
+ * The dialog's surface. It hangs from a fixed line near the top instead of the middle: the list
+ * changes height with every key, and a centered popup would walk up and down the screen.
+ */
+export function CommandPalettePopup({ size = 'md', initialFocus, className, ...props }: CommandPalettePopupProps) {
+    const { t } = useTranslation('ui');
+    const inputRef = useContext(InputRefContext);
+    return (
+        <DialogPopup
+            aria-label={t('palette.label')}
+            initialFocus={initialFocus ?? inputRef ?? undefined}
+            className={withClass(clsx('top-[18vh] flex flex-col [translate:-50%_0]', SIZE[size]), className)}
+            {...props}
+        />
+    );
+}
+
+export type CommandPaletteInputProps = Omit<ComponentProps<typeof Autocomplete.Input>, 'className'> & {
+    /* In front of the text instead of the magnifier: the mark of a mode, a button back. */
+    leading?: ReactNode;
+    /* After the text, before the Escape hint: toggles of a search, a button that uses the text. */
+    trailing?: ReactNode;
+    /* The Escape key at the end of the field. Off where Escape does something else first. */
+    escapeHint?: boolean;
+    /* A pattern or a path read back letter by letter. */
+    mono?: boolean;
+    /* Goes to the row around the field; `ref` stays on the input. */
+    className?: string;
+};
+
+/* The field across the top. It keeps the keys while the arrows move the highlight; a control beside it should not take the focus on a click. */
+export function CommandPaletteInput({ leading, trailing, escapeHint = true, mono = false, className, ref, ...props }: CommandPaletteInputProps) {
+    const inputRef = useContext(InputRefContext);
+    return (
+        <div className={clsx('relative flex shrink-0 items-center gap-2 border-b border-border px-3', className)}>
+            {leading ?? <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />}
+            <Autocomplete.Input
+                ref={mergeRefs(ref, inputRef ?? undefined)}
+                spellCheck={false}
+                className={clsx('h-11 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint', mono && 'font-mono text-code')}
+                {...props}
+            />
+            {trailing}
+            {escapeHint && <Kbd shortcut={KEY_SHORTCUTS.escape} variant="inline" className="shrink-0" />}
+        </div>
+    );
+}
+
+/* The rows. It scrolls on its own, so the field and the footer stay put. */
+export function CommandPaletteList({ className, ...props }: ComponentProps<typeof Autocomplete.List>) {
+    const { t } = useTranslation('ui');
+    return (
+        <Autocomplete.List
+            aria-label={t('palette.results')}
+            className={withClass('max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5', className)}
+            {...props}
+        />
+    );
+}
+
+export type CommandPaletteFooterProps = useRender.ComponentProps<'div'>;
+
+/* Under the list: the keys that work here, a count, an action that leaves the palette. */
+export function CommandPaletteFooter({ render, className, ref, ...props }: CommandPaletteFooterProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: { ...props, className: clsx('flex shrink-0 items-center gap-3 border-t border-border px-3 py-2 text-xs text-text-faint', className) }
+    });
+}

package/src/format/datetime.ts

@@ -26,6 +26,8 @@ export const formatDateTime = (at: Date | number, options: Intl.DateTimeFormatOp
 const CLOCK: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };
 const WEEKDAY_CLOCK: Intl.DateTimeFormatOptions = { weekday: 'short', hour: '2-digit', minute: '2-digit' };
 const HOUR: Intl.DateTimeFormatOptions = { hour: 'numeric' };
+const WEEKDAY: Intl.DateTimeFormatOptions = { weekday: 'short' };
+const WEEKDAY_LONG: Intl.DateTimeFormatOptions = { weekday: 'long' };
 const DAY: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' };
 const DAY_WITH_YEAR: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' };
 const WEEKDAY_DAY: Intl.DateTimeFormatOptions = { weekday: 'short', month: 'short', day: 'numeric' };
@@ -45,6 +47,9 @@ export const formatWeekdayClock = (at: Date | number): string => formatDateTime(
 /* An hour of the day on its own, for the foot of a chart: `08`, or `8 AM` where that is the clock. */
 export const formatHour = (at: Date | number): string => formatDateTime(at, HOUR);
 
+/* The day of the week on its own, for the side of a grid by weekday: `Sat`, or `Saturday` when `long`. */
+export const formatWeekday = (at: Date | number, width: 'short' | 'long' = 'short'): string => formatDateTime(at, width === 'long' ? WEEKDAY_LONG : WEEKDAY);
+
 /* `19 Sep`, the short date a row falls back to once "days ago" stops meaning anything. */
 export const formatDay = (at: Date | number, timeZone?: string): string => formatDateTime(at, timeZone === undefined ? DAY : { ...DAY, timeZone });
 

package/src/format/duration.ts

@@ -1,5 +1,5 @@
 import { relativeFormatter } from './locale.ts';
-import { formatDecimal, formatNumber } from './number.ts';
+import { formatDecimal, formatNumber, formatRounded } from './number.ts';
 
 const SECOND = 1000;
 const MINUTE = 60 * SECOND;
@@ -23,6 +23,30 @@ export const formatDuration = (ms: number): string => {
     return `${formatDecimal(minutes / 60)} h`;
 };
 
+/*
+ * How long a short measurement took, below a second too: `0.4 ms`, `123 ms`, `1.42 s`, and as `formatDuration` from a
+ * minute. Each unit rounds before it is chosen, so 999.6 ms reads as `1 s` and not as `1,000 ms`.
+ */
+export const formatPreciseDuration = (ms: number): string => {
+    const value = Math.max(0, ms);
+    const tenths = Math.round(value * 10) / 10;
+    if (tenths < 10) {
+        return `${formatRounded(tenths, 1)} ms`;
+    }
+    if (Math.round(value) < SECOND) {
+        return `${formatNumber(Math.round(value))} ms`;
+    }
+    const hundredths = Math.round(value / 10) / 100;
+    if (hundredths < 10) {
+        return `${formatRounded(hundredths, 2)} s`;
+    }
+    const seconds = Math.round(value / 100) / 10;
+    if (seconds < 60) {
+        return `${formatRounded(seconds, 1)} s`;
+    }
+    return formatDuration(value);
+};
+
 /* How long a window still has, tight enough for the end of a bar: `4d 3h`, `12h 8m`, `9m`. */
 export const formatCountdown = (ms: number): string => {
     const left = Math.max(0, ms);

package/src/format/index.ts

@@ -11,11 +11,12 @@ export {
     formatHour,
     formatMoment,
     formatNumericDate,
+    formatWeekday,
     formatWeekdayClock,
     formatWeekdayDay,
     isSameDay
 } from './datetime.ts';
-export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort } from './duration.ts';
+export { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort, formatPreciseDuration } from './duration.ts';
 export { formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale, type FormatSource } from './locale.ts';
 export {
     formatBytes,

package/src/index.ts

@@ -3,6 +3,8 @@
  * `exports.test.ts` turns any change to this list into a diff someone has to accept.
  */
 
+export * as Combobox from './combobox/index.parts.ts';
+export * as CommandPalette from './command-palette/index.parts.ts';
 export * as ContextMenu from './context-menu/index.parts.ts';
 export * as FileTree from './file-tree/index.parts.ts';
 export * as Tree from './tree/index.parts.ts';
@@ -13,6 +15,8 @@ export * as Popover from './popover/index.parts.ts';
 export * as PreviewCard from './preview-card/index.parts.ts';
 export * as Tabs from './tabs/index.parts.ts';
 
+export type { ComboboxInputProps, ComboboxItemProps, ComboboxPopupProps } from './combobox/parts.tsx';
+export type { CommandPaletteFooterProps, CommandPaletteInputProps, CommandPalettePopupProps, CommandPaletteRootProps } from './command-palette/parts.tsx';
 export type { DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogTextProps, DialogTitleProps } from './dialog/parts.tsx';
 export type {
     MenuCheckProps,
@@ -35,6 +39,7 @@ export { Checkbox, type CheckboxProps } from './Checkbox.tsx';
 export { ChoiceCards, type Choice, type ChoiceCardsProps } from './ChoiceCards.tsx';
 export { CloseButton, type CloseButtonProps } from './CloseButton.tsx';
 export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch.tsx';
+export { CopyButton, type CopyButtonProps } from './CopyButton.tsx';
 export { ColorWheelPicker, type ColorWheelPickerProps } from './ColorWheelPicker.tsx';
 export { ColumnResizeHandle, type ColumnResizeHandleProps } from './ColumnResizeHandle.tsx';
 export { DisabledReason, type DisabledReasonProps } from './DisabledReason.tsx';
@@ -55,6 +60,7 @@ export { PanelEmpty, type PanelEmptyProps } from './PanelEmpty.tsx';
 export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';
 export { Pill, type PillProps } from './Pill.tsx';
 export { PromptDialog, type PromptDialogProps } from './PromptDialog.tsx';
+export { RelativeTime, type RelativeTimeProps } from './RelativeTime.tsx';
 export { ProjectSwitcher, ProjectSwitcherGroups, type ProjectSwitcherItem, type ProjectSwitcherProps } from './ProjectSwitcher.tsx';
 export { SectionLabel, type SectionLabelProps } from './SectionLabel.tsx';
 export { SegmentBar, type SegmentBarPart, type SegmentBarProps } from './SegmentBar.tsx';
@@ -88,6 +94,7 @@ export type { LazyComponent } from './lazy.tsx';
 export { LazyBoundary } from './LazyBoundary.tsx';
 export type { LazyBoundaryProps } from './LazyBoundary.tsx';
 export { UI_NAMESPACE, UI_RESOURCES } from './locales.ts';
+export { matchScore } from './match.ts';
 export { isApplePlatform } from './platform.ts';
 export { prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
 export { selectAllWithin, selectionWithin } from './selection.ts';

package/src/locales/en.ts

@@ -2,6 +2,7 @@ export default {
     action: {
         cancel: 'Cancel',
         copy: 'Copy',
+        copied: 'Copied',
         copyError: 'Copy error',
         dismiss: 'Dismiss',
         reload: 'Reload',
@@ -38,6 +39,13 @@ export default {
         search: 'Search',
         noMatch: 'No match for “{{query}}”'
     },
+    combobox: {
+        suggestions: 'Suggestions'
+    },
+    palette: {
+        label: 'Command palette',
+        results: 'Results'
+    },
     iconPicker: {
         label: 'Icon',
         none: 'No icon',

package/src/locales/nl.ts

@@ -2,6 +2,7 @@ export default {
     action: {
         cancel: 'Annuleren',
         copy: 'Kopiëren',
+        copied: 'Gekopieerd',
         copyError: 'Fout kopiëren',
         dismiss: 'Sluiten',
         reload: 'Herladen',
@@ -38,6 +39,13 @@ export default {
         search: 'Zoeken',
         noMatch: 'Geen resultaat voor “{{query}}”'
     },
+    combobox: {
+        suggestions: 'Suggesties'
+    },
+    palette: {
+        label: 'Opdrachtenpalet',
+        results: 'Resultaten'
+    },
     iconPicker: {
         label: 'Icoon',
         none: 'Geen icoon',

package/src/match.ts

@@ -0,0 +1,50 @@
+const WORD_START = /[\s\-_./:]/;
+
+/* Whether `query` starts the text or one of its words. */
+const startsWord = (text: string, query: string): boolean => {
+    let at = text.indexOf(query);
+    while (at !== -1) {
+        if (at === 0 || WORD_START.test(text[at - 1]!)) {
+            return true;
+        }
+        at = text.indexOf(query, at + 1);
+    }
+    return false;
+};
+
+const lettersInOrder = (text: string, query: string): boolean => {
+    let at = 0;
+    for (const letter of query.replace(/\s+/g, '')) {
+        at = text.indexOf(letter, at);
+        if (at === -1) {
+            return false;
+        }
+        at += 1;
+    }
+    return true;
+};
+
+/*
+ * How well `text` answers to what a person typed, ignoring case: 5 when it starts with the query,
+ * 4 when one of its words does, 3 when every typed word is in it and it starts with the first,
+ * 2 when every typed word is in it in any order, 1 when the letters are in it in order, and `null`
+ * when it does not match. An empty query matches everything with 0.
+ */
+export function matchScore(text: string, query: string): number | null {
+    const wanted = query.trim().toLowerCase();
+    if (wanted === '') {
+        return 0;
+    }
+    const haystack = text.toLowerCase();
+    if (haystack.startsWith(wanted)) {
+        return 5;
+    }
+    if (startsWord(haystack, wanted)) {
+        return 4;
+    }
+    const words = wanted.split(/\s+/);
+    if (words.every((word) => haystack.includes(word))) {
+        return haystack.startsWith(words[0]!) ? 3 : 2;
+    }
+    return lettersInOrder(haystack, wanted) ? 1 : null;
+}

package/src/segmented-keys.ts

@@ -0,0 +1,33 @@
+import type { SegmentedOption } from './Segmented.tsx';
+
+const STEPS: Readonly<Record<string, number>> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+// The index of the one tab stop: the picked option, or the first that can be picked when that one is missing or disabled.
+export function segmentedStop<T extends string>(options: readonly SegmentedOption<T>[], value: T): number {
+    const picked = options.findIndex((option) => option.id === value);
+    return picked !== -1 && !options[picked]!.disabled ? picked : options.findIndex((option) => !option.disabled);
+}
+
+// The index a key moves to from `index`, passing over disabled options and around the ends; `null` when the key moves nothing.
+export function segmentedTarget(options: readonly SegmentedOption<string>[], index: number, key: string): number | null {
+    const nearest = (from: number, step: number): number | null => {
+        for (let offset = 0; offset < options.length; offset++) {
+            const candidate = (((from + step * offset) % options.length) + options.length) % options.length;
+            if (!options[candidate]!.disabled) {
+                return candidate;
+            }
+        }
+        return null;
+    };
+
+    if (key in STEPS) {
+        return nearest(index + STEPS[key]!, STEPS[key]!);
+    }
+    if (key === 'Home') {
+        return nearest(0, 1);
+    }
+    if (key === 'End') {
+        return nearest(options.length - 1, -1);
+    }
+    return null;
+}

package/src/theme.css

@@ -58,6 +58,14 @@
     --status-error: #dc2626;
     --positive: #15803d;
     --positive-text: #ffffff;
+    /* The series of a chart, in order: the accent, then a categorical order checked for color vision
+       deficiency on both grounds: orange, aqua, yellow, magenta, green. */
+    --chart-1: var(--accent);
+    --chart-2: #eb6834;
+    --chart-3: #1baf7a;
+    --chart-4: #eda100;
+    --chart-5: #e87ba4;
+    --chart-6: #008300;
     /* A control drawn over a picture rather than over the interface, the handle of a wipe, so it
        stays the same in both themes. */
     --media-handle: #ffffff;
@@ -122,6 +130,13 @@
     /* Dark on light green: the dark theme's positive is a foreground color, so text sits on it the
        other way round from the light theme, where the same token is a fill deep enough for white. */
     --positive-text: #052e16;
+    /* Repeated so a dark theme nested under a light one resolves its own accent. */
+    --chart-1: var(--accent);
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
+    --chart-6: #008300;
     --file-icon-gray: #adadb1;
     --file-icon-red: #ff6762;
     --file-icon-vermilion: #d5512f;

package/src/toast-store.ts

@@ -7,6 +7,9 @@ export const SUCCESS_MS = 4000;
 // How long a deletion can still be taken back.
 export const UNDO_MS = 8000;
 
+// `setTimeout` fires at once past this, so a longer lifetime, `Infinity` too, is a toast that stays.
+const LONGEST_TIMER_MS = 2 ** 31 - 1;
+
 /* `deleted` says something went that can still come back, which is what its action is for. */
 export type ToastKind = 'progress' | 'success' | 'error' | 'deleted';
 
@@ -38,6 +41,8 @@ export interface Toast {
     actions?: ToastAction[];
     /* A success that waits to be dismissed, for news that lands while nobody is looking yet. */
     persist?: boolean;
+    /* Milliseconds until the toast takes itself away, whatever its kind; over the kind's own lifetime and `persist`. Zero or less is ignored. */
+    lifetime?: number;
     /* Runs once the toast is gone, whether it ran out or was dismissed. */
     onClose?: () => void;
     /* Set by the store from the timer that takes the toast away, so what counts down on screen is that timer. */
@@ -72,11 +77,16 @@ export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> =
             timers.delete(id);
         };
 
-        /* A toast that went well takes itself away, and so does the offer to undo; a failure and a running action stay. */
-        const schedule = (id: string, kind: ToastKind, persist: boolean): ToastDeadline | undefined => {
+        /*
+         * A toast that went well takes itself away, and so does the offer to undo; a failure and a running
+         * action stay, unless the toast names a lifetime of its own.
+         */
+        const schedule = (id: string, toast: Pick<Toast, 'kind' | 'persist' | 'lifetime'>): ToastDeadline | undefined => {
             stop(id);
-            const lifetime = kind === 'deleted' ? UNDO_MS : kind === 'success' && !persist ? SUCCESS_MS : null;
-            if (lifetime === null) {
+            const { kind, persist } = toast;
+            const own = toast.lifetime !== undefined && toast.lifetime > 0 ? toast.lifetime : undefined;
+            const lifetime = own ?? (kind === 'deleted' ? UNDO_MS : kind === 'success' && persist !== true ? SUCCESS_MS : null);
+            if (lifetime === null || lifetime > LONGEST_TIMER_MS) {
                 return undefined;
             }
             timers.set(
@@ -95,7 +105,7 @@ export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> =
             show(toast) {
                 counter += 1;
                 const id = toast.id ?? `toast-${counter}`;
-                const next = { ...toast, id, deadline: schedule(id, toast.kind, toast.persist === true) } as T;
+                const next = { ...toast, id, deadline: schedule(id, toast) } as T;
                 const toasts = get().toasts;
                 set({ toasts: toasts.some((entry) => entry.id === id) ? toasts.map((entry) => (entry.id === id ? next : entry)) : [...toasts, next] });
                 return id;
@@ -106,7 +116,7 @@ export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> =
                     return;
                 }
                 const merged: T = { ...current, ...patch };
-                const next: T = { ...merged, deadline: schedule(id, merged.kind, merged.persist === true) };
+                const next: T = { ...merged, deadline: schedule(id, merged) };
                 set({ toasts: get().toasts.map((entry) => (entry.id === id ? next : entry)) });
             },
             dismiss(id) {

package/src/workspace/TabStrip.tsx

@@ -58,6 +58,7 @@ export interface TabStripProps extends Omit<useRender.ComponentProps<'div'>, 'ch
     renderTab?(item: TabStripItem): ReactNode;
     focused?: boolean;
     insertAt?: number | null;
+    pressToClose?: boolean;
     onClose?(id: string): void;
     onDoubleClick?(id: string, event: MouseEvent<HTMLButtonElement>): void;
     onContextMenu?(id: string, event: MouseEvent<HTMLSpanElement>): void;
@@ -74,6 +75,7 @@ export function TabStrip({
     renderTab,
     focused = true,
     insertAt,
+    pressToClose = false,
     onClose,
     onDoubleClick,
     onContextMenu,
@@ -169,6 +171,7 @@ export function TabStrip({
         items,
         value,
         onValueChange,
+        pressToClose,
         onClose,
         onDoubleClick,
         onContextMenu,
@@ -238,7 +241,7 @@ export function TabStrip({
 
 interface TabContextValue extends Pick<
     TabStripProps,
-    'items' | 'value' | 'onValueChange' | 'onClose' | 'onDoubleClick' | 'onContextMenu' | 'onDragStart' | 'onDragEnd'
+    'items' | 'value' | 'onValueChange' | 'pressToClose' | 'onClose' | 'onDoubleClick' | 'onContextMenu' | 'onDragStart' | 'onDragEnd'
 > {
     close(id: string, action?: () => void): void;
     focus(index: number): void;
@@ -265,6 +268,12 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
     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,
@@ -279,6 +288,20 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                 props.onContextMenu?.(event);
                 context.onContextMenu?.(item.id, event);
             },
+            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();
+                }
+            },
+            onAuxClick: (event: MouseEvent<HTMLSpanElement>) => {
+                props.onAuxClick?.(event);
+                if (event.button === 1 && closesOnPress(event)) {
+                    event.preventDefault();
+                    close();
+                }
+            },
             children: (
                 <>
                     <Tooltip label={item.hint ?? item.label}>
@@ -291,7 +314,13 @@ export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDra
                             tabIndex={item.id === value || (value === null && index === 0) ? 0 : -1}
                             className="ade-document-tab-open"
                             draggable={!!(onDragStart ?? context.onDragStart)}
-                            onClick={() => onValueChange(item.id)}
+                            onClick={(event) => {
+                                if (closesOnPress(event)) {
+                                    close();
+                                    return;
+                                }
+                                onValueChange(item.id);
+                            }}
                             onDoubleClick={(event) => (onDoubleClick ?? context.onDoubleClick)?.(item.id, event)}
                             onDragStart={(event) => {
                                 event.stopPropagation();