@jbrowse/core 4.3.0 → 5.0.0-beta.2

package/esm/ui/LegendSwatchGlyph.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The one place that decides what each `LegendMark` looks like. Returns bare SVG
+// shapes rather than a rooted <svg>, so the floating legend (which wraps them in
+// an inline <svg>) and the SVG export (which drops them into a row <g>) draw the
+// identical glyph — a display's on-screen key and its exported figure disagreeing
+// about which color is a curve would be worse than neither having marks.
+//
+// Every shape fills the `size` box from (x, y) so a caller can lay swatches out
+// on a fixed pitch without knowing which mark it is placing.
+export function LegendSwatchGlyph({ swatch, size, x = 0, y = 0, }) {
+    const { color, mark = 'fill' } = swatch;
+    // Thin enough to read as a stroke next to a solid block, thick enough to
+    // carry a color at 10-12px.
+    const strokeWidth = Math.max(2, Math.round(size / 5));
+    if (mark === 'line') {
+        return (_jsx("line", { x1: x, x2: x + size, y1: y + size / 2, y2: y + size / 2, stroke: color, strokeWidth: strokeWidth }));
+    }
+    if (mark === 'curve') {
+        // An arc bulging up out of the box's lower corners, which is the shape of
+        // the connector itself — a pair of endpoints with the curve between them.
+        const inset = strokeWidth / 2;
+        return (_jsx("path", { d: `M${x},${y + size - inset} Q${x + size / 2},${y - size / 3} ${x + size},${y + size - inset}`, fill: "none", stroke: color, strokeWidth: strokeWidth }));
+    }
+    return _jsx("rect", { x: x, y: y, width: size, height: size, fill: color });
+}

package/esm/ui/LoadingDots.d.ts

@@ -0,0 +1 @@
+export default function LoadingDots(): import("react").JSX.Element;

package/esm/ui/LoadingDots.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '../util/tss-react/index.js';
+import { dot1, dot2, dot3 } from './loadingDotKeyframes.js';
+const useStyles = makeStyles()({
+    dots: {
+        display: 'inline-block',
+        width: '1em',
+        textAlign: 'left',
+        '& span': {
+            display: 'inline-block',
+            opacity: 0,
+            // promote each dot to its own compositor layer so the opacity animation
+            // is offloaded from the main thread and keeps running during jank
+            willChange: 'opacity',
+            '&:nth-of-type(1)': {
+                animation: `${dot1} 1.2s infinite`,
+            },
+            '&:nth-of-type(2)': {
+                animation: `${dot2} 1.2s infinite`,
+            },
+            '&:nth-of-type(3)': {
+                animation: `${dot3} 1.2s infinite`,
+            },
+        },
+    },
+});
+export default function LoadingDots() {
+    const { classes } = useStyles();
+    return (_jsxs("span", { className: classes.dots, children: [_jsx("span", { children: "." }), _jsx("span", { children: "." }), _jsx("span", { children: "." })] }));
+}

package/esm/ui/LoadingEllipses.d.ts

@@ -3,5 +3,21 @@ interface Props extends TypographyProps {
     message?: string;
     children?: never;
 }
-export default function LoadingEllipses({ message, children, variant, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * The label every part of the app shows while it is working, and — through
+ * `data-busy` — the only thing an automated capture has to look at to know that
+ * it is.
+ *
+ * The attribute is the contract that replaces reading the label. A harness
+ * waiting for a page to finish used to scan visible text for /^loading/ and
+ * resolve `getComputedStyle` to decide whether each match was on screen, which
+ * makes a rendering detail load-bearing: a reworded message, a translation, or
+ * an element that animates its opacity all change the answer. `[data-busy]` is
+ * published by the component that knows, so a wait is one selector.
+ *
+ * Anything that renders its own in-flight banner instead of this component
+ * should carry the attribute too — see `isPageBusyInPage` in
+ * `@jbrowse/capture`, which is what reads it.
+ */
+export default function LoadingEllipses({ message, variant, ...rest }: Props): import("react").JSX.Element;
 export {};

package/esm/ui/LoadingEllipses.js

@@ -1,31 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
-import { cx, keyframes, makeStyles } from "../util/tss-react/index.js";
-const useStyles = makeStyles()({
-    dots: {
-        '&::after': {
-            display: 'inline-block',
-            content: '""',
-            width: '1em',
-            textAlign: 'left',
-            animation: `${keyframes `
-      0% {
-        content: '';
-      }
-      25% {
-          content: '.';
-      }
-      50% {
-        content: '..';
-      }
-      75% {
-        content: '...';
-      }
-      `} 1.2s infinite ease-in-out`,
-        },
-    },
-});
-export default function LoadingEllipses({ message, children, variant = 'body2', ...rest }) {
-    const { classes } = useStyles();
-    return (_jsx(Typography, { className: cx(classes.dots, rest.className), ...rest, variant: variant, children: message || 'Loading' }));
+import LoadingDots from './LoadingDots.js';
+/**
+ * The label every part of the app shows while it is working, and — through
+ * `data-busy` — the only thing an automated capture has to look at to know that
+ * it is.
+ *
+ * The attribute is the contract that replaces reading the label. A harness
+ * waiting for a page to finish used to scan visible text for /^loading/ and
+ * resolve `getComputedStyle` to decide whether each match was on screen, which
+ * makes a rendering detail load-bearing: a reworded message, a translation, or
+ * an element that animates its opacity all change the answer. `[data-busy]` is
+ * published by the component that knows, so a wait is one selector.
+ *
+ * Anything that renders its own in-flight banner instead of this component
+ * should carry the attribute too — see `isPageBusyInPage` in
+ * `@jbrowse/capture`, which is what reads it.
+ */
+export default function LoadingEllipses({ message, variant = 'body2', ...rest }) {
+    return (_jsxs(Typography, { ...rest, variant: variant, "data-busy": "true", children: [message || 'Loading', _jsx(LoadingDots, {})] }));
 }

package/esm/ui/LoadingOverlay.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Returns false, then flips true once `active` has stayed true continuously for
+ * `delayMs`. Each activation gets a fresh delay, and the flag drops the moment
+ * `active` does.
+ *
+ * Keyed on a count of RISING edges rather than on `active` itself, so the
+ * falling edge does no work at all. A display refetching through a wheel zoom
+ * flips `active` several times a second — it finishes a fetch, waits out the
+ * debounce, starts the next — and an effect depending on `active` tore its timer
+ * down and built a new one on each of those, twice over, for a scrim that by
+ * construction never appears. Deriving the flag from a comparison instead means
+ * one `setTimeout` per loading pulse, which is the floor for these semantics.
+ */
+export declare function useDelayedFlag(active: boolean, delayMs: number): boolean;
+export default function LoadingOverlay({ statusMessage, progress, isVisible, immediate, canceled, onCancel, onRetry, }: {
+    statusMessage?: string;
+    progress?: number;
+    isVisible?: boolean;
+    immediate?: boolean;
+    canceled?: boolean;
+    onCancel?: () => void;
+    onRetry?: () => void;
+}): import("react").JSX.Element | null;

package/esm/ui/LoadingOverlay.js

@@ -0,0 +1,137 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { IconButton, Tooltip } from '@mui/material';
+import { progressLabel } from '../util/progress.js';
+import { makeStyles } from '../util/tss-react/index.js';
+import LoadingDots from './LoadingDots.js';
+import StatusProgressBar from './StatusProgressBar.js';
+import { alpha } from './palette.js';
+const cancelDelayMs = 5000;
+// suppress the overlay for the first moments of a refetch so quick zoom/pan
+// loads stay silent and only genuinely slow loads ever draw the indicator.
+// Skipped when `immediate` is set (initial load with nothing on screen yet) —
+// there's no content to flash over, so the indicator shows right away.
+const flashDelayMs = 250;
+/**
+ * Returns false, then flips true once `active` has stayed true continuously for
+ * `delayMs`. Each activation gets a fresh delay, and the flag drops the moment
+ * `active` does.
+ *
+ * Keyed on a count of RISING edges rather than on `active` itself, so the
+ * falling edge does no work at all. A display refetching through a wheel zoom
+ * flips `active` several times a second — it finishes a fetch, waits out the
+ * debounce, starts the next — and an effect depending on `active` tore its timer
+ * down and built a new one on each of those, twice over, for a scrim that by
+ * construction never appears. Deriving the flag from a comparison instead means
+ * one `setTimeout` per loading pulse, which is the floor for these semantics.
+ */
+export function useDelayedFlag(active, delayMs) {
+    const [previous, setPrevious] = useState(active);
+    const [activation, setActivation] = useState(0);
+    if (previous !== active) {
+        setPrevious(active);
+        if (active) {
+            setActivation(n => n + 1);
+        }
+    }
+    const [elapsedFor, setElapsedFor] = useState(-1);
+    useEffect(() => {
+        const id = setTimeout(() => {
+            setElapsedFor(activation);
+        }, delayMs);
+        return () => {
+            clearTimeout(id);
+        };
+    }, [activation, delayMs]);
+    return active && elapsedFor === activation;
+}
+const useStyles = makeStyles()(theme => {
+    // derive the stripe + chip tints from the theme so the "something's happening"
+    // signal stays subtle and equally visible in light and dark mode
+    const stripe = alpha(theme.palette.text.primary, 0.05);
+    return {
+        overlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: `repeating-linear-gradient(45deg, transparent, transparent 8px, ${stripe} 8px, ${stripe} 16px)`,
+            pointerEvents: 'none',
+            zIndex: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            paddingTop: '20px',
+        },
+        // the status chip is the only interactive element; the striped backdrop stays
+        // click-through so it never swallows track interactions.
+        //
+        // Mostly-opaque paper (was 0.4, which let dense features and the striping
+        // read straight through the label): the chip sits over a canvas whose colors
+        // aren't known here, so the text needs its own backing to stay legible.
+        // `background.paper` rather than a literal white so dark mode gets the dark
+        // equivalent, and short of fully opaque so it still reads as an overlay.
+        content: {
+            pointerEvents: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 2,
+            background: alpha(theme.palette.background.paper, 0.85),
+            borderRadius: 4,
+            padding: '2px 8px',
+        },
+        row: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+        },
+        text: {
+            fontSize: '0.8rem',
+            fontWeight: 300,
+        },
+        bar: {
+            width: 160,
+        },
+    };
+});
+export default function LoadingOverlay({ statusMessage, progress, isVisible, immediate, canceled, onCancel, onRetry, }) {
+    const { classes } = useStyles();
+    const hasProgress = progress !== undefined;
+    // anti-flash: only render after the load has run long enough to be worth
+    // signaling, so fast loads show nothing at all. `immediate` bypasses this for
+    // initial loads, where nothing is on screen to flash over yet.
+    //
+    // The delay runs off `isVisible` ALONE. Feeding `!immediate` in as well made
+    // `immediate` *restart* the timer rather than merely bypass it, and the chrome
+    // flips `immediate` mid-load: it passes `immediate={!painted}`, so first paint
+    // drops it while the phase is still `loading` — region 1 drawn, regions 2..n
+    // in flight. The scrim then blinked out for a fresh 250 ms in the middle of
+    // one continuous load.
+    const shownAfterDelay = useDelayedFlag(!!isVisible, flashDelayMs);
+    const shown = !!isVisible && (!!immediate || shownAfterDelay);
+    // only offer cancel after the overlay has been continuously visible for a few
+    // seconds, so a quick load can't be canceled by an accidental click.
+    //
+    // Keyed on `shown` rather than `isVisible`, which is what "continuously
+    // visible" means and is also what keeps this timer out of a zoom: a display
+    // refetching per animation frame flips `isVisible` a couple of times a frame,
+    // and each flip was a clearTimeout/setTimeout pair for a five-second delay
+    // that could never elapse — 368 timer installs over a ten-second gesture,
+    // half of them these.
+    const cancelableAfterDelay = useDelayedFlag(shown, cancelDelayMs);
+    const cancelable = shown && cancelableAfterDelay;
+    // Rendered only while shown. The content chip is `pointerEvents:auto`, so
+    // leaving it mounted (merely transparent) in the idle state would silently
+    // swallow clicks/hovers over the top-center of every track it overlays. There
+    // is no fade transition, so mount/unmount is visually identical to toggling
+    // opacity anyway.
+    return shown ? (_jsx("span", { className: classes.overlay, "data-testid": "loading-overlay", children: _jsx("span", { className: classes.content, children: canceled ? (_jsxs("span", { className: classes.row, children: [_jsx("span", { className: classes.text, children: "Loading canceled" }), onRetry ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { size: "small", "data-testid": "loading-overlay-retry", onClick: () => {
+                                onRetry();
+                            }, children: _jsx(RefreshIcon, { fontSize: "inherit" }) }) })) : null] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: classes.row, children: [_jsxs("span", { className: classes.text, children: [progressLabel(statusMessage || 'Loading', progress), hasProgress ? null : _jsx(LoadingDots, {})] }), onCancel && cancelable ? (_jsx(Tooltip, { title: "Cancel", children: _jsx(IconButton, { size: "small", "data-testid": "loading-overlay-cancel", onClick: () => {
+                                        onCancel();
+                                    }, children: _jsx(CloseIcon, { fontSize: "inherit" }) }) })) : null] }), hasProgress ? (_jsx(StatusProgressBar, { className: classes.bar, fraction: progress })) : null] })) }) })) : null;
+}

package/esm/ui/LoadingProgress.d.ts

@@ -0,0 +1,16 @@
+import type { TypographyProps } from '@mui/material';
+/**
+ * The shared "labelled ellipses + optional determinate bar" body used by the
+ * loading/refetch indicators. Renders a {@link LoadingEllipses} label — with the
+ * rounded percent appended via {@link progressLabel} when `fraction` is
+ * determinate — and a determinate {@link StatusProgressBar} only when a
+ * `fraction` is present (an indeterminate phase shows just the animated label,
+ * no bar). Callers own the surrounding layout and supply `barClassName` for the
+ * bar width.
+ */
+export default function LoadingProgress({ message, fraction, variant, barClassName, }: {
+    message?: string;
+    fraction?: number;
+    variant?: TypographyProps['variant'];
+    barClassName?: string;
+}): import("react").JSX.Element;

package/esm/ui/LoadingProgress.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { progressLabel } from '../util/progress.js';
+import LoadingEllipses from './LoadingEllipses.js';
+import StatusProgressBar from './StatusProgressBar.js';
+/**
+ * The shared "labelled ellipses + optional determinate bar" body used by the
+ * loading/refetch indicators. Renders a {@link LoadingEllipses} label — with the
+ * rounded percent appended via {@link progressLabel} when `fraction` is
+ * determinate — and a determinate {@link StatusProgressBar} only when a
+ * `fraction` is present (an indeterminate phase shows just the animated label,
+ * no bar). Callers own the surrounding layout and supply `barClassName` for the
+ * bar width.
+ */
+export default function LoadingProgress({ message, fraction, variant, barClassName, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(LoadingEllipses, { variant: variant, message: progressLabel(message || 'Loading', fraction) }), fraction === undefined ? null : (_jsx(StatusProgressBar, { className: barClassName, fraction: fraction }))] }));
+}

package/esm/ui/Logo.d.ts

@@ -2,6 +2,6 @@ type LogoVariant = 'color' | 'black' | 'white';
 interface LogoProps {
     variant?: LogoVariant;
 }
-export declare function Logomark({ variant }: LogoProps): import("react/jsx-runtime").JSX.Element;
-export declare function LogoFull({ variant }: LogoProps): import("react/jsx-runtime").JSX.Element;
+export declare function Logomark({ variant }: LogoProps): import("react").JSX.Element;
+export declare function LogoFull({ variant }: LogoProps): import("react").JSX.Element;
 export {};

package/esm/ui/Logo.js

@@ -1,30 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function getColors(variant) {
-    if (variant === 'black') {
-        return {
-            midnight: '#808080',
-            forrest: '#666666',
-            grape: '#4d4d4d',
-            mandarin: '#333333',
-            gray: '#1a1a1a',
-        };
-    }
-    if (variant === 'white') {
-        return {
-            midnight: '#ffffff',
-            forrest: '#e6e6e6',
-            grape: '#cccccc',
-            mandarin: '#b3b3b3',
-            gray: '#999999',
-        };
-    }
-    return {
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const colorSets = {
+    black: {
+        midnight: '#808080',
+        forest: '#666666',
+        grape: '#4d4d4d',
+        mandarin: '#333333',
+        gray: '#1a1a1a',
+    },
+    white: {
+        midnight: '#ffffff',
+        forest: '#e6e6e6',
+        grape: '#cccccc',
+        mandarin: '#b3b3b3',
+        gray: '#999999',
+    },
+    color: {
         midnight: '#0d233f',
-        forrest: '#135560',
+        forest: '#135560',
         grape: '#721e63',
         mandarin: '#ffb11d',
         gray: '#dadada',
-    };
+    },
+};
+function getColors(variant = 'color') {
+    return colorSets[variant];
 }
 export function Logomark({ variant }) {
     return (_jsx("svg", { viewBox: "0 0 175 175", children: _jsx(Icon, { variant: variant }) }));
@@ -34,7 +33,7 @@ export function LogoFull({ variant }) {
 }
 function Icon({ variant }) {
     const colors = getColors(variant);
-    return (_jsxs(_Fragment, { children: [_jsx("path", { style: { fill: colors.midnight }, d: "M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z" }), _jsx("path", { style: { fill: colors.forrest }, d: "M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z" }), _jsx("path", { style: { fill: colors.grape }, d: "M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z" }), _jsx("path", { style: { fill: colors.mandarin }, d: "M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z" }), _jsx("path", { style: { fill: colors.gray }, d: "M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("path", { style: { fill: colors.midnight }, d: "M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z" }), _jsx("path", { style: { fill: colors.forest }, d: "M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z" }), _jsx("path", { style: { fill: colors.grape }, d: "M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z" }), _jsx("path", { style: { fill: colors.mandarin }, d: "M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z" }), _jsx("path", { style: { fill: colors.gray }, d: "M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z" })] }));
 }
 function Text({ variant }) {
     const colors = getColors(variant);

package/esm/ui/Menu.js

@@ -1 +1 @@
-export { default } from "./CascadingMenu.js";
+export { default } from './CascadingMenu.js';

package/esm/ui/MenuItemChevron.d.ts

@@ -0,0 +1,3 @@
+export declare function MenuItemChevron({ hidden }: {
+    hidden?: boolean;
+}): import("react").JSX.Element;

package/esm/ui/MenuItemChevron.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ChevronRight from '@mui/icons-material/ChevronRight';
+// The chevron a submenu row ends in, and — `hidden` — an invisible copy
+// reserving the identical footprint on a clickable row that has none, so a menu
+// carrying help on both kinds lands every "?" in one column.
+//
+// ONE COMPONENT, because "identical footprint" is the whole contract and two
+// bodies can drift: a `fontSize` added to one and not the other reintroduces
+// exactly the misalignment this exists to remove.
+//
+// A COPY, not a width. The column was a hard-coded 24, the px an MUI
+// `fontSize="medium"` icon is at MUI's own defaults. This theme sets
+// `typography.fontSize: 12`, which scales `pxToRem` by 12/14, so the chevron
+// actually draws at ~20.6px and every clickable row's "?" sat ~3.4px inboard of
+// the submenu rows'. Rendering the icon itself cannot be off by a scale factor
+// nothing here gets to see.
+export function MenuItemChevron({ hidden }) {
+    return _jsx(ChevronRight, { style: hidden ? { visibility: 'hidden' } : undefined });
+}

package/esm/ui/MenuItemEndDecoration.d.ts

@@ -0,0 +1,4 @@
+export declare function MenuItemEndDecoration({ type, checked, }: {
+    type: 'checkbox' | 'radio';
+    checked: boolean;
+}): import("react").JSX.Element;

package/esm/ui/MenuItemEndDecoration.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import { makeStyles } from '../util/tss-react/index.js';
+const useStyles = makeStyles()({
+    menuItemEndDecoration: {
+        padding: 0,
+        margin: 0,
+        height: 16,
+    },
+});
+export function MenuItemEndDecoration({ type, checked, }) {
+    const { classes } = useStyles();
+    let icon;
+    switch (type) {
+        case 'checkbox': {
+            icon = checked ? (_jsx(CheckBoxIcon, {})) : (_jsx(CheckBoxOutlineBlankIcon, { color: "action" }));
+            break;
+        }
+        case 'radio': {
+            icon = checked ? (_jsx(RadioButtonCheckedIcon, {})) : (_jsx(RadioButtonUncheckedIcon, { color: "action" }));
+            break;
+        }
+    }
+    return _jsx("div", { className: classes.menuItemEndDecoration, children: icon });
+}

package/esm/ui/MenuItemTrailing.d.ts

@@ -0,0 +1,12 @@
+import type { ClickableMenuItem, SubMenuItem } from './MenuTypes.ts';
+export type DecoratedMenuItem = ClickableMenuItem | SubMenuItem;
+export interface MenuColumnFlags {
+    hasCheckboxOrRadioWithHelp: boolean;
+    hasEndAdornment: boolean;
+    hasSubmenuWithHelp: boolean;
+    sharedActionColumn: boolean;
+}
+export declare function MenuItemTrailing({ item, columns: { hasCheckboxOrRadioWithHelp, hasEndAdornment, hasSubmenuWithHelp, sharedActionColumn, }, }: {
+    item: DecoratedMenuItem;
+    columns: MenuColumnFlags;
+}): import("react").JSX.Element;

package/esm/ui/MenuItemTrailing.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CascadingMenuHelpIconButton, { CascadingMenuHelpIconSpacer, } from './CascadingMenuHelpIconButton.js';
+import { MenuItemChevron } from './MenuItemChevron.js';
+import { MenuItemEndDecoration } from './MenuItemEndDecoration.js';
+import { menuItemAdornment } from './menuItemAdornment.js';
+// gap that sets the value glyph (row state) apart from the trailing help/pin
+// action column, so a busy row reads as "value | actions" not one dense cluster
+const valueActionGap = 8;
+// fixed footprint reserved for the endAdornment column so pins right-align
+const endAdornmentColumnWidth = 28;
+// The checkbox/radio glyph reflecting a row's value. Held slightly apart from
+// the action column when the menu has one, so state and actions don't blur.
+function MenuItemValueGlyph({ type, checked, separated, }) {
+    return (_jsx("div", { style: { marginRight: separated ? valueActionGap : 0 }, children: _jsx(MenuItemEndDecoration, { type: type, checked: checked }) }));
+}
+// Fixed-width column holding an item's endAdornment (e.g. the "default for all"
+// pin). Reserved on every row of a menu that has any adornment so they
+// right-align into their own column.
+function MenuItemEndAdornmentSlot({ children }) {
+    return (_jsx("div", { style: {
+            width: endAdornmentColumnWidth,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+        }, children: children }));
+}
+// Everything trailing a menu row's label, for a clickable row and a submenu row
+// alike: a flex spacer that right-aligns the decorations, then the value glyph,
+// help affordance, endAdornment column, and the chevron column. When
+// `sharedActionColumn` is set, no row in the menu combines help with an
+// adornment, so the two share one trailing column (whichever this row has)
+// rather than each claiming its own.
+export function MenuItemTrailing({ item, columns: { hasCheckboxOrRadioWithHelp, hasEndAdornment, hasSubmenuWithHelp, sharedActionColumn, }, }) {
+    const isSubmenu = 'subMenu' in item;
+    const isCheckOrRadio = item.type === 'checkbox' || item.type === 'radio';
+    const hasActionColumn = hasCheckboxOrRadioWithHelp || hasEndAdornment;
+    // a disabled row can't open the help popover (pointer-events:none), so its
+    // helpText is surfaced as a hover tooltip by the row instead
+    const helpButton = item.helpText && !item.disabled ? (_jsx(CascadingMenuHelpIconButton, { helpText: item.helpText, label: item.label })) : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { flexGrow: 1, minWidth: 10 } }), isCheckOrRadio ? (_jsx(MenuItemValueGlyph, { type: item.type, checked: item.checked, separated: hasActionColumn })) : null, sharedActionColumn ? (_jsx(MenuItemEndAdornmentSlot, { children: helpButton ?? menuItemAdornment(item) })) : (_jsxs(_Fragment, { children: [helpButton ??
+                        (isCheckOrRadio && hasCheckboxOrRadioWithHelp ? (_jsx(CascadingMenuHelpIconSpacer, {})) : null), hasEndAdornment ? (_jsx(MenuItemEndAdornmentSlot, { children: menuItemAdornment(item) })) : null] })), isSubmenu ? (_jsx(MenuItemChevron, {})) : hasSubmenuWithHelp ? (_jsx(MenuItemChevron, { hidden: true })) : null] }));
+}