react-x11 2.47.3 → 2.47.5

package/src/nodes/window/anchoring.js

@@ -1,7 +1,13 @@
 // A window anchored to a rect in another (#255, #280): where it goes, and
 // following the anchor as it moves.
 
-import { anchorOffscreen, anchorRect, anchorScreenRect } from '../../anchor.js';
+import {
+  anchorOffscreen,
+  anchorRect,
+  anchorScreenRect,
+  deviceAnchorArea,
+} from '../../anchor.js';
+import { availableArea } from '../../screens.js';
 
 /** Anchoring, installed onto `WindowNode.prototype` by window.js. */
 export class WindowAnchoring {
@@ -109,7 +115,10 @@ export class WindowAnchoring {
       }
     }
     if (lost || !size) return;
-    const rect = this._anchorPlacement(size);
+    let rect = this._anchorPlacement(size);
+    if (!rect) return;
+    if (rect.placement === 'center') rect = this._keepCentredTop(rect, size);
+    this._placedSize = { width: size.width, height: size.height };
     if (!rect) return;
     if (this._placedAt?.x === rect.x && this._placedAt?.y === rect.y) return;
     this._placedAt = { x: rect.x, y: rect.y };
@@ -120,6 +129,82 @@ export class WindowAnchoring {
     }
   }
 
+  /**
+   * Where a **centred** window goes when it is placed again: centred
+   * afresh when what it is centred over has moved, and otherwise — its own
+   * size changed, nothing else did — grown from where it already is.
+   *
+   * A centred popup is a dialog, and a dialog that grows is one the user is
+   * reading: an error line under a field, a "details" section opening. Re-
+   * centring it moves its top edge by half the growth, so the title, the
+   * field and the button that was just pressed all jump up under the
+   * pointer. So it keeps its top edge and its horizontal centre, grows down
+   * (and sideways about the middle), and is pulled back only as far as it
+   * takes to stay on its monitor — which is where the actions row of a
+   * dialog that grew past the bottom of the screen would otherwise go.
+   *
+   * A window the window manager frames is the manager's and the user's to
+   * move once it is up — they may have dragged it — so it grows from where
+   * the server says it is, and is moved only when it would leave the
+   * monitor. Never to where it opened: that would undo the drag.
+   *
+   * Returns the rect to place at, or null for "stay put".
+   */
+  _keepCentredTop(rect, size) {
+    const was = this._centredFor;
+    const at = this._placedAt;
+    if (was && at) {
+      const again = this._anchorPlacement(was.size);
+      if (again && again.x === was.x && again.y === was.y) {
+        return this._growInPlace(size);
+      }
+    }
+    this._centredFor = { size: { ...size }, x: rect.x, y: rect.y };
+    return rect;
+  }
+
+  /** `_keepCentredTop`'s other half: this window at `size`, its top edge and
+   *  its middle where they are, clamped into the monitor. */
+  _growInPlace(size) {
+    const managed = this.attributes.overrideRedirect === false;
+    // An override-redirect window is wherever it was last put, and the
+    // record of that is ours; a managed one may have been moved since.
+    const from = managed
+      ? (this.window._screenOrigin ?? this._placedAt)
+      : this._placedAt;
+    const old = this._placedSize ?? size;
+    let x = from.x + Math.round((old.width - size.width) / 2);
+    let y = from.y;
+    const area = this._anchorArea();
+    if (area) {
+      x = Math.max(area.x, Math.min(x, area.x + area.width - size.width));
+      y = Math.max(area.y, Math.min(y, area.y + area.height - size.height));
+    }
+    // Nothing to send. For a managed window that matters beyond the round
+    // trip: a position handed back to an X window manager is read as the
+    // frame's, and would push the window down by its titlebar.
+    if (managed && x === from.x && y === from.y) return null;
+    return { x, y };
+  }
+
+  /** The monitor area this window is kept inside, in device pixels — the
+   *  one its anchor picks (`anchorRect`, `anchorScreenRect`). */
+  _anchorArea() {
+    const anchor = this.props.anchor;
+    if (anchor.rect) {
+      const s = this.scale;
+      const r = anchor.rect;
+      return availableArea(this.app, {
+        x: r.x * s,
+        y: r.y * s,
+        width: (r.width ?? 0) * s,
+        height: (r.height ?? 0) * s,
+      });
+    }
+    const node = this._anchorTarget(anchor.to);
+    return node ? deviceAnchorArea(node) : null;
+  }
+
   /**
    * Whether there is nothing for this window to point at: the anchor's node
    * has scrolled out of view, or is a ref that has not attached yet — which

package/src/nodes/window/floors.js

@@ -333,7 +333,8 @@ export function dirtyOutside(node, boundaries, paths) {
  * Undefined where it cannot be summed: a child with no extent on hand, a
  * negative margin (the boxes would overlap, and the last would not have to
  * be the lowest), or nothing in flow at all — a leaf's answer, which is
- * `contentSpan`'s to give.
+ * `contentSpan`'s to give. All but the first are the column's own, and a
+ * spine never sums a column that has them (`columnSums`).
  */
 export function columnHeightSpan(node) {
   const yoga = node.yoga;
@@ -363,6 +364,30 @@ export function columnHeightSpan(node) {
   );
 }
 
+/**
+ * Whether `columnHeightSpan` has an answer for this column once its children
+ * carry extents: everything else it asks — something in flow, margins down
+ * that are lengths and pull no box over the one before it, a gap that is a
+ * length — asked ahead of the measurement, from the same readings.
+ *
+ * A spine asks it before it sums a column (`isSummableColumn`), because once
+ * the measurement is under way a sum with no answer has nowhere to go: it is
+ * written as the column's extent, an extent of none writes the style's own
+ * minimum, and the column — and every column summed above it — lost its
+ * floor to a label that changed beside a block with `marginTop: -4`.
+ */
+export function columnSums(node) {
+  if (columnGap(node) === undefined) return false;
+  let count = 0;
+  for (const child of node.children) {
+    if (!inFlow(child)) continue;
+    const { top, bottom } = marginsDown(child);
+    if (!(top >= 0 && bottom >= 0)) return false;
+    count += 1;
+  }
+  return count !== 0;
+}
+
 /**
  * `marginDown` for both edges of a box, kept on the box with the style object
  * it was read under. A margin reaches yoga only from the style

package/src/nodes/window/spine.js

@@ -36,6 +36,7 @@
 // length — is not a spine, and the tree is measured whole.
 
 import {
+  columnSums,
   declaresOwnMinimum,
   inFlow,
   mainAxisOf,
@@ -74,7 +75,9 @@ const PADDINGS = [
  * main axis without wrapping, and with a height that is its content's —
  * nothing named on the height axis (`declaresOwnMinimum`), so neither a
  * size, a floor, a ceiling nor a clip stands between its children and its
- * extent.
+ * extent. And one the sum has an answer for (`columnSums`): a column with a
+ * block pulled up over the one before it is measured, as a root, rather
+ * than summed into no extent and no floor.
  */
 export function isSummableColumn(node) {
   const style = node.style;
@@ -86,7 +89,8 @@ export function isSummableColumn(node) {
     mainAxisOf(node) === 'height' &&
     style.flexDirection !== 'column-reverse' &&
     (style.flexWrap == null || style.flexWrap === 'nowrap') &&
-    !declaresOwnMinimum(node, 'height')
+    !declaresOwnMinimum(node, 'height') &&
+    columnSums(node)
   );
 }
 
@@ -129,6 +133,17 @@ export function spineScope(root, sources, listOnly) {
   const spine = new Set();
   const stops = new Set();
   const offered = new OfferedWidths(root);
+  // asked once a column: a dozen rows that arrive in one column of a
+  // thousand ask it of that column a dozen times (`columnSums`)
+  const summable = new Map();
+  const sums = (column) => {
+    let answer = summable.get(column);
+    if (answer === undefined) {
+      answer = isSummableColumn(column);
+      summable.set(column, answer);
+    }
+    return answer;
+  };
   for (const source of sources) {
     const list = listOnly(source);
     // the way up to where the change stops mattering
@@ -148,7 +163,7 @@ export function spineScope(root, sources, listOnly) {
     let top = -1;
     for (let i = path.length - 1; i >= 0; i--) {
       const summed = i > 0 || list;
-      if (!summed || !isSummableColumn(path[i])) {
+      if (!summed || !sums(path[i])) {
         top = i;
         break;
       }
@@ -379,6 +394,9 @@ function rootWidths(node, offered, stop) {
   if (!stretched(node)) return null;
   if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
   if (PADDINGS.some((key) => typeof style[key] === 'string')) return null;
+  // …nor a gap that is a share of something: laid out alone, it is a share
+  // of something else
+  if (typeof (style.rowGap ?? style.gap) === 'string') return null;
   return offered.in(parent, stop);
 }
 

package/src/nodes/window/window.js

@@ -343,6 +343,13 @@ export class WindowNode extends Scrollable(Node) {
       attributes.x = placed.x;
       attributes.y = placed.y;
       this._placedAt = { x: placed.x, y: placed.y };
+      this._placedSize = { width: natural.width, height: natural.height };
+      // what a centred window was centred at, so a later change of its own
+      // size grows it from here rather than centring it again
+      // (`_keepCentredTop`)
+      if (placed.placement === 'center') {
+        this._centredFor = { size: this._placedSize, x: placed.x, y: placed.y };
+      }
     }
     // A bound the content decides is a number by now, and the window manager
     // reads `WM_NORMAL_HINTS` when it frames the window — so it goes in with
@@ -923,6 +930,8 @@ export class WindowNode extends Scrollable(Node) {
       this._followAnchor();
     } else if (before.anchor) {
       this._placedAt = null;
+      this._placedSize = null;
+      this._centredFor = null;
       // A popup that gives up its anchor gives up being hidden by one: it
       // is an ordinary `x`/`y` popup from here, and the configure above
       // has already put it where the app asked.

package/src/types/components.d.ts

@@ -495,8 +495,22 @@ export interface DialogProps extends WidgetProps {
   managed?: boolean;
   onClose?: () => void;
   actions?: ReactNode;
-  width?: number;
-  height?: number;
+  /**
+   * The dialog's width, 360 by default — a number, because a body of prose
+   * wraps to it, where a natural width would be as wide as its longest
+   * sentence. `'auto'` sizes it to its content, capped at the monitor.
+   */
+  width?: number | 'auto';
+  /**
+   * `'auto'` (the default) is the content's height: the dialog is measured,
+   * centred over its owner at that size and only then opened, and it keeps
+   * following its content while open, growing from its top edge rather than
+   * being centred again. Capped at the usable height of the monitor; past
+   * that the body scrolls and the `actions` row stays pinned at the bottom
+   * of the window. A number is that height exactly, with the same scrolling
+   * body when the content needs more.
+   */
+  height?: number | 'auto';
   style?: StyleProp;
 }
 export const Dialog: ComponentType<DialogProps>;
@@ -672,7 +686,14 @@ export const MenuBar: ComponentType<MenuBarProps>;
 export interface TabItem {
   id: string;
   label: string;
-  content?: ReactNode;
+  /**
+   * The panel shown while this tab is selected. A function is the lazy form:
+   * it is called with no arguments, only while its tab is selected, and again
+   * on each render of `Tabs` while it stays selected — nothing is memoised, so
+   * a hidden tab's panel is never built. Leave it out to use `Tabs` as a pure
+   * navigator whose panel lives elsewhere.
+   */
+  content?: ReactNode | (() => ReactNode);
   disabled?: boolean;
 }
 
@@ -748,12 +769,17 @@ export const SplitPane: ComponentType<SplitPaneProps>;
 /**
  * The side a popup is asked for. `'start'`/`'end'` are the **logical** ones
  * and mirror with the anchor's direction, which is what a submenu wants;
- * `'left'`/`'right'` stay physical.
+ * `'left'`/`'right'` stay physical. `'center'` is no side: the popup goes
+ * over the anchor, middle on middle, and is only clamped into the monitor —
+ * what `Dialog` uses over its owner window. On a `<popup anchor>` a centred
+ * popup is centred when it opens and grows from its top edge when its own
+ * size changes afterwards.
  */
-export type AnchorPlacement = Placement | 'start' | 'end';
+export type AnchorPlacement = Placement | 'start' | 'end' | 'center';
 
 export interface AnchorOptions {
-  /** Preferred side, flipped at a screen edge (default `'bottom'`). */
+  /** Preferred side, flipped at a screen edge (default `'bottom'`);
+   *  `'center'` goes over the anchor instead, and ignores `align`/`offset`. */
   placement?: AnchorPlacement;
   /** Which edges line up on the cross axis (default `'start'`). */
   align?: 'start' | 'center' | 'end';
@@ -786,7 +812,7 @@ export interface AnchorOptions {
 
 /** An anchored rect, and the side it actually ended up on. */
 export interface AnchorRect extends Rect {
-  placement: Placement;
+  placement: Placement | 'center';
 }
 
 /**
@@ -820,7 +846,8 @@ export interface ScreenAnchorRect {
   height?: number;
 }
 
-/** Centre a popup of this size on the node's screen. */
+/** Centre a popup of this size over the window the node is in, clamped
+ *  into the monitor — `placement: 'center'` against the window's rect. */
 export function centerRect(
   node: DrawnNode,
   size: { width: number; height: number },

package/src/types/elements.d.ts

@@ -739,7 +739,11 @@ export interface TextInputProps extends DrawnProps<TextInputNode> {
    * both read naturally.
    */
   onChange?: (ev: ChangeEvent<TextInputNode>) => void;
-  /** Enter — or Ctrl+Enter in a `<textarea>` (⌘↩ on the Cocoa backend). */
+  /**
+   * Enter or Shift+Enter — or Ctrl+Enter in a `<textarea>` (⌘↩ on the Cocoa
+   * backend). Any other chord on Enter is left to the shortcuts, and so is
+   * Enter itself in a field with no `onSubmit`.
+   */
   onSubmit?: (ev: SubmitEvent<TextInputNode>) => void;
   placeholder?: string;
   placeholderColor?: Color;

package/src/types/system.d.ts

@@ -169,7 +169,9 @@ export function useWindowState(
  *
  * Costs no timer where the X server carries an `IDLETIME` counter (Xorg
  * does): a SYNC alarm fires on each crossing. Falls back to polling
- * MIT-SCREEN-SAVER, and stays `false` on a display with neither.
+ * MIT-SCREEN-SAVER, and stays `false` on an X display with neither. On win32
+ * and macOS it polls the session's own idle time on the same adaptive
+ * schedule.
  */
 export function useIdle(timeout: number): boolean;