react-x11 2.47.3 → 2.47.4

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/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;