react-x11 2.25.0 → 2.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.25.0",
+  "version": "2.26.1",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/cocoa/fonts.js

@@ -150,6 +150,31 @@ function unpackLines(lineData = NO_GEOMETRY, runData = NO_GEOMETRY) {
   return lines;
 }
 
+/**
+ * The one line of an empty paragraph, placed the way the native places a
+ * line with text in it: a `lineHeight` multiplies the face's natural line,
+ * and the leading is split either side of the glyphs (CSS half-leading,
+ * which ntk and `@windowkit/appkit` >= 0.15 both follow).
+ */
+function blankLine(metrics, lineHeight, x) {
+  const { ascent, descent } = metrics;
+  const natural = metrics.lineHeight ?? ascent + descent;
+  const multiple = lineHeight >= 0 && lineHeight < Infinity ? lineHeight : 1;
+  const height = natural * multiple;
+  return {
+    x,
+    y: 0,
+    width: 0,
+    height,
+    baseline: (height - (ascent + descent)) / 2 + ascent,
+    ascent,
+    descent,
+    start: 0,
+    end: 0,
+    runs: [],
+  };
+}
+
 /** Whether two spans read the same, field for field. */
 function sameSpan(a, b) {
   if (a === b) return true;
@@ -302,6 +327,19 @@ class CocoaTextLayout {
     ctx._drawLayout(this, x, y);
   }
 
+  /**
+   * An empty paragraph as ntk lays it out: one line with no runs, as tall as
+   * a line of the face it would have been set in. CoreText sets no line for
+   * no text, and a layout with no lines has no height and a caret of none —
+   * so an empty field's caret was its three-pixel mark padding either side
+   * of nothing, and grew to the line the moment the first letter arrived.
+   */
+  _setBlank(line) {
+    this.lines = [line];
+    this.height = line.height;
+    this._blank = line;
+  }
+
   /** Code point boundary nearest the point, in layout coordinates. */
   indexAt(x, y) {
     return this._cpOf(this._native.layoutIndexAt(this._handle, x, y));
@@ -309,6 +347,13 @@ class CocoaTextLayout {
 
   /** Caret rect for a code-point index: { x, y, height }. */
   caretPosition(cp) {
+    // the rect the native gives a caret on a line with text in it — the
+    // line's box — so typing the first letter moves the caret and nothing
+    // else
+    const blank = this._blank;
+    if (blank) {
+      return { x: blank.x, y: blank.y, height: blank.height, line: 0 };
+    }
     return this._native.layoutCaret(this._handle, this._cuOf(cp));
   }
 
@@ -1315,6 +1360,24 @@ export class CocoaFontManager {
       minContent ? laid.map((span) => span.text).join('') : text,
     );
     layout._contextInk = contextInk;
+    if (!text) {
+      const first = spans[0] ?? {};
+      const size = first.size ?? base.size ?? 14;
+      const face = first.font ?? base.font;
+      const metrics = (
+        typeof face?.metrics === 'function'
+          ? face
+          : this.match(first.family ?? base.family, {
+              weight: first.weight ?? base.weight,
+              style: first.style ?? base.style,
+            })
+      ).metrics(size);
+      const container =
+        Number.isFinite(maxWidth) && maxWidth > 0 ? maxWidth : 0;
+      layout._setBlank(
+        blankLine(metrics, lineHeight, flushFor(align, direction) * container),
+      );
+    }
     if (!minContent) {
       const runs = new Map();
       layout._hangRuns(sources, (i, rtl) => {

package/src/components/Select.js

@@ -4,6 +4,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { useAppOrNull } from '../appcontext.js';
+import { flattenStyle } from '../styles.js';
 import { capBand, capTrim, rowRadius, useTheme } from './theme.js';
 import { Icon } from './Icon.js';
 import {
@@ -282,6 +283,14 @@ function Option({
  * the active option with wrapping; Home/End jump to the ends; Enter/Space
  * pick the active option (or open the menu when closed); Escape closes.
  * The active option is scrolled into view.
+ *
+ * `labelStyle` and `chevronStyle` are style slots over the caption and the
+ * chevron, each merged over the part's own default, as `<Slider>`'s are over
+ * its parts — so a select that has to wear someone else's look, a toolbar's
+ * or a web page's, is the widget restyled, with `style` on the trigger. The
+ * caption's `fontSize` is read back: the chevron is as tall as the capitals
+ * beside it. Any slot also chooses the drawn trigger over the platform's
+ * popup bezel, whose pixels no style reaches.
  */
 export function Select({
   value,
@@ -291,11 +300,18 @@ export function Select({
   placeholder = 'Select…',
   native,
   style,
+  labelStyle,
+  chevronStyle,
   ...boxProps
 }) {
   const theme = useTheme();
   const app = useAppOrNull();
-  const nativeControls = useNativeControls(native);
+  const styled = Boolean(labelStyle || chevronStyle);
+  const nativeControls = useNativeControls(styled ? false : native);
+  // The size the caption is set in, where its slot names one: the chevron is
+  // measured against those capitals, and an `<Icon>`'s size does not inherit.
+  const ownSize = flattenStyle(labelStyle).fontSize;
+  const captionSize = typeof ownSize === 'number' ? ownSize : theme.fontSize;
   const [open, setOpen] = useState(false);
   const [anchor, setAnchor] = useState(null);
   const [focused, setFocused] = useState(false);
@@ -572,6 +588,7 @@ export function Select({
           ONE_LINE,
           nativeControls && nativeTitleStyle('regular'),
           { color: current ? theme.text : theme.textMuted },
+          labelStyle,
         ],
       },
       current ? current.label : placeholder,
@@ -593,8 +610,11 @@ export function Select({
         })
       : h(Icon, {
           name: 'chevronDown',
-          size: capBand(theme.fontSize),
+          size: capBand(captionSize),
           color: theme.textMuted,
+          // `display: 'none'` leaves it out, for a trigger whose arrow is
+          // drawn by something else
+          style: chevronStyle,
         }),
     open &&
       anchor &&

package/src/types/components.d.ts

@@ -511,6 +511,16 @@ export interface SelectProps<T = unknown>
   onChange?: (ev: WidgetChangeEvent<T>) => void;
   placeholder?: string;
   style?: StyleProp;
+  /**
+   * The caption's style — the value, or the placeholder — over the palette's
+   * `text` (`textMuted` for the placeholder). Its `fontSize`, as a number, is
+   * the one the chevron is sized against. Any slot chooses the drawn trigger
+   * over the platform's popup bezel.
+   */
+  labelStyle?: StyleProp;
+  /** The chevron's style, over `textMuted` at the caption's cap height.
+   *  `display: 'none'` leaves it out. */
+  chevronStyle?: StyleProp;
 }
 export function Select<T = unknown>(props: SelectProps<T>): ReactNode;