react-x11 2.9.1 → 2.9.2

package/package.json

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

package/src/components/Button.js

@@ -7,10 +7,12 @@ import { useAppOrNull } from '../appcontext.js';
 import {
   ABS_FILL,
   Bezel,
+  NATIVE_BAND,
   NATIVE_RING,
   TITLE_BASELINE,
   bezelNatural,
   bezelShadow,
+  nativeFootprintStyle,
   nativeTitleStyle,
   pressWash,
   useNativeControls,
@@ -94,64 +96,73 @@ export function Button({
       'box',
       {
         theme,
-        role: 'button',
-        ...props,
-        ...boxProps,
-        style: [
-          controlStyle,
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: small ? 6 : 8,
-            // AppKit's metrics, not the palette's: a native bezel is
-            // designed at its own height, and stretching it is what this
-            // mode exists to avoid. Width still follows the label.
-            height: nat.height,
-            paddingLeft: small ? 10 : 14,
-            paddingRight: small ? 10 : 14,
-            // The natural box is the bezel's footprint, shadow included;
-            // the body is what the title is placed against — and placed,
-            // not centred (`TITLE_BASELINE`). A label centred by its
-            // capitals sat 1pt low beside a native button.
-            paddingTop: shadow.top,
-            paddingBottom: shadow.bottom + TITLE_BASELINE[controlSize],
-            // The keyboard ring is the renderer's, on this box — shaped by
-            // the bezel's corners and hugging it, as AppKit's is
-            // (`NATIVE_RING`), rather than the palette's offset rectangle.
-            borderRadius: small ? 5 : 6,
-            ':focus-visible': {
-              outlineWidth: NATIVE_RING.width,
-              outlineOffset: NATIVE_RING.offset,
-            },
-            color: disabled
-              ? theme.textMuted
-              : primary
-                ? theme.accentText
-                : theme.text,
-          },
-          style,
-        ],
+        // The footprint the caller's style sizes; the button below keeps
+        // AppKit's height inside it, centred (`nativeFootprintStyle`).
+        style: [nativeFootprintStyle(nat), style],
       },
-      h(Bezel, {
-        kind: 'push',
-        controlSize,
-        enabled: !disabled,
-        // the Return-key accent fill is AppKit's own "default button"
-        isDefault: primary && !disabled,
-        style: ABS_FILL,
-      }),
-      labelContent(children ?? label, nativeTitleStyle(controlSize)),
-      // The press answer. Last child on purpose: `:active` marks the
-      // pressed node and its ancestors, and the topmost child is what the
-      // press lands on. No hover tint — AppKit buttons have none.
-      h('box', {
-        style: [
-          ABS_FILL,
-          { borderRadius: small ? 5 : 6 },
-          !disabled && { ':active': { backgroundColor: pressWash(theme) } },
-        ],
-      }),
+      h(
+        'box',
+        {
+          theme,
+          role: 'button',
+          ...props,
+          ...boxProps,
+          style: [
+            controlStyle,
+            NATIVE_BAND,
+            {
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: small ? 6 : 8,
+              // AppKit's metrics, not the palette's: a native bezel is
+              // designed at its own height, and stretching it is what this
+              // mode exists to avoid. Width still follows the label.
+              height: nat.height,
+              paddingLeft: small ? 10 : 14,
+              paddingRight: small ? 10 : 14,
+              // The natural box is the bezel's footprint, shadow included;
+              // the body is what the title is placed against — and placed,
+              // not centred (`TITLE_BASELINE`). A label centred by its
+              // capitals sat 1pt low beside a native button.
+              paddingTop: shadow.top,
+              paddingBottom: shadow.bottom + TITLE_BASELINE[controlSize],
+              // The keyboard ring is the renderer's, on this box — shaped by
+              // the bezel's corners and hugging it, as AppKit's is
+              // (`NATIVE_RING`), rather than the palette's offset rectangle.
+              borderRadius: small ? 5 : 6,
+              ':focus-visible': {
+                outlineWidth: NATIVE_RING.width,
+                outlineOffset: NATIVE_RING.offset,
+              },
+              color: disabled
+                ? theme.textMuted
+                : primary
+                  ? theme.accentText
+                  : theme.text,
+            },
+          ],
+        },
+        h(Bezel, {
+          kind: 'push',
+          controlSize,
+          enabled: !disabled,
+          // the Return-key accent fill is AppKit's own "default button"
+          isDefault: primary && !disabled,
+          style: ABS_FILL,
+        }),
+        labelContent(children ?? label, nativeTitleStyle(controlSize)),
+        // The press answer. Last child on purpose: `:active` marks the
+        // pressed node and its ancestors, and the topmost child is what the
+        // press lands on. No hover tint — AppKit buttons have none.
+        h('box', {
+          style: [
+            ABS_FILL,
+            { borderRadius: small ? 5 : 6 },
+            !disabled && { ':active': { backgroundColor: pressWash(theme) } },
+          ],
+        }),
+      ),
     );
   }
   const background = !solid

package/src/components/Select.js

@@ -9,11 +9,13 @@ import { Icon } from './Icon.js';
 import {
   ABS_FILL,
   Bezel,
+  NATIVE_BAND,
   NATIVE_MENU,
   NATIVE_RING,
   TITLE_BASELINE,
   bezelNatural,
   bezelShadow,
+  nativeFootprintStyle,
   nativeTitleStyle,
   pressWash,
   useNativeControls,
@@ -438,7 +440,11 @@ export function Select({
     if (open) scrollRef.current?.scrollIntoView(activeRef.current);
   }, [open, activeIndex]);
 
-  return h(
+  // AppKit's own popup metrics, which the trigger below is laid out at —
+  // and only the trigger: the footprint it sits in is the caller's to size.
+  const nat = nativeControls ? bezelNatural(app, 'popup') : null;
+
+  const trigger = h(
     'box',
     {
       theme,
@@ -465,7 +471,8 @@ export function Select({
               flexDirection: 'row',
               alignItems: 'center',
               gap: 8,
-              height: bezelNatural(app, 'popup').height,
+              ...NATIVE_BAND,
+              height: nat.height,
               paddingLeft: TRIGGER_PAD_LEFT,
               paddingRight: 26,
               // The title sits where NSPopUpButtonCell puts it — on the
@@ -515,7 +522,10 @@ export function Select({
             ':hover': { backgroundColor: theme.surfaceHover },
             ':active': { backgroundColor: theme.surfaceActive },
           },
-        style,
+        // The caller's style, on the trigger where the trigger is the whole
+        // control. Under a native bezel it sizes the footprint below instead
+        // and the trigger keeps AppKit's height (`nativeFootprintStyle`).
+        !nativeControls && style,
       ],
     },
     // `pressed` while the menu is down: AppKit's popup answers being open
@@ -635,4 +645,11 @@ export function Select({
         ),
       ),
   );
+
+  // The bezel and its title are one unit at NSPopUpButton's height; the box
+  // around them is what a `height`, a `flexGrow` or a parent's align-stretch
+  // is free to make taller, with the control centred in it (issue #510).
+  return nativeControls
+    ? h('box', { theme, style: [nativeFootprintStyle(nat), style] }, trigger)
+    : trigger;
 }

package/src/components/native.js

@@ -101,6 +101,47 @@ export function nativeTitleStyle(controlSize = 'regular') {
   return { alignSelf: 'flex-end', fontSize: CONTROL_FONT_SIZE[controlSize] };
 }
 
+/**
+ * The **footprint** a native control sits in: the box the caller's style
+ * sizes, with the control — bezel, title and press wash, one unit at
+ * AppKit's own metrics — centred inside it.
+ *
+ * Two boxes rather than one, because the title is *placed* and not centred:
+ * it rides `TITLE_BASELINE` above the bezel body's bottom edge, and that is
+ * only where the cell puts it while the box is exactly `bezelNatural` tall.
+ * The caller's style is applied last and flex stretches a box regardless, so
+ * it was not always: `style={{ height: 44 }}`, a `height: '100%'` in a taller
+ * parent and a bare `flexGrow: 1` each made the box taller, and the two
+ * halves — the bezel absolutely filling it, the title glued to its bottom —
+ * came apart, the label landing below the control it names (issue #510). The
+ * drawn path never had this, because it centres its label: a stretched drawn
+ * control is merely roomy, where a stretched native one was broken.
+ *
+ * So the height a caller can move belongs to a box the control sits in, and
+ * the control keeps AppKit's. The default here is exactly today's box — an
+ * untouched control lays out as it always did, and the explicit height still
+ * resists a row's align-stretch — and the caller's style, applied after it,
+ * moves the footprint alone. The control stretches across it (align-stretch,
+ * the default), so a footprint given a width is a bezel that wide.
+ *
+ * The control, not the footprint, stays the *control*: the role, the
+ * handlers, the focus ring and the ref go on it, so a press in the slack
+ * above a 22pt popup in a 46pt hole does nothing at all — as it does in
+ * AppKit — rather than firing a button with no visible answer to the press.
+ */
+export function nativeFootprintStyle(nat) {
+  return { height: nat.height, justifyContent: 'center' };
+}
+
+/**
+ * The rest of what a native control's own box says about its size: nothing
+ * shrinks it. A squashed bezel is as wrong as a stretched one, and a
+ * footprint shorter than the control is a caller asking for something the
+ * cell's metrics cannot answer — so it overflows, visibly, rather than
+ * quietly drawing a title where the bezel is not.
+ */
+export const NATIVE_BAND = Object.freeze({ flexShrink: 0 });
+
 /**
  * NSMenu's geometry, for the menu a native popup bezel opens — read off
  * `NSMenu.size` on macOS 15 rather than off a screenshot, so it is the