@react-x11/components 0.10.0 → 0.12.0

package/src/html/css/values.ts

@@ -102,7 +102,7 @@ export interface UnitContext {
   em: number;
   /** The root element's `font-size`. */
   rem: number;
-  /** Viewport, for `vw`/`vh`/`vmin`/`vmax`. */
+  /** Viewport, for `vw`/`vh`/`vmin`/`vmax` and their kin (`viewportUnit`). */
   vw: number;
   vh: number;
   /** Device pixels per CSS pixel — the display scale. */
@@ -131,9 +131,37 @@ export interface UnitContext {
 const NUMBER_SRC = '[+-]?(?:\\d*\\.\\d+|\\d+)(?:e[+-]?\\d+)?';
 
 const LENGTH_RE = new RegExp(
-  `^(${NUMBER_SRC})(px|em|rem|pt|pc|in|cm|mm|ex|ch|lh|rlh|vw|vh|vmin|vmax|q|%)?$`,
+  `^(${NUMBER_SRC})(px|em|rem|pt|pc|in|cm|mm|ex|ch|lh|rlh|[sld]?v(?:w|h|i|b|min|max)|q|%)?$`,
 );
 
+/**
+ * The viewport unit a viewport-percentage length is (CSS Values 4, 6.1.2),
+ * or null for another unit. The small, large and dynamic viewports —
+ * `svh`, `lvh`, `dvh` and their kin — are the one viewport here, as they
+ * are on a desktop, where no toolbar comes and goes over the page; and the
+ * inline and block axes, `vi` and `vb`, are the width and the height of
+ * the horizontal writing mode every document here is laid out in.
+ */
+export function viewportUnit(
+  unit: string,
+): 'vw' | 'vh' | 'vmin' | 'vmax' | null {
+  const u = unit.toLowerCase();
+  const bare = /^[sld]v/.test(u) ? u.slice(1) : u;
+  switch (bare) {
+    case 'vw':
+    case 'vi':
+      return 'vw';
+    case 'vh':
+    case 'vb':
+      return 'vh';
+    case 'vmin':
+    case 'vmax':
+      return bare;
+    default:
+      return null;
+  }
+}
+
 const NUMBER_RE = new RegExp(`^${NUMBER_SRC}$`, 'i');
 
 /** A math function: `calc()`, `min()`, `max()` or `clamp()`. */
@@ -166,7 +194,7 @@ export function parseLength(
     });
   }
   const n = Number(m[1]);
-  const unit = m[2];
+  const unit = m[2] && (viewportUnit(m[2]) ?? m[2]);
   // a zero needs no unit however it is written — `-0`, `+0`, `0.0`
   if (!unit) return n === 0 ? 0 : bareIsPx ? n * ctx.scale : null;
   if (unit === '%') return { pct: n };

package/src/html/css/vars.ts

@@ -245,7 +245,7 @@ function findVar(value: string, from: number): number {
 
 /** The `)` that closes a bracket opened just before `from`, strings and
  *  brackets inside it passed over; -1 where none does. */
-function closingParen(value: string, from: number): number {
+export function closingParen(value: string, from: number): number {
   let depth = 0;
   for (let i = from; i < value.length; i += 1) {
     const c = value[i];
@@ -326,7 +326,7 @@ function topLevel(value: string, ch: string): number {
 }
 
 /** The first comma not inside a bracket or a string, or -1. */
-function topLevelComma(value: string): number {
+export function topLevelComma(value: string): number {
   let depth = 0;
   for (let i = 0; i < value.length; i += 1) {
     const c = value[i];

package/src/html/dom.ts

@@ -572,15 +572,51 @@ function createParser(): { parser: Parser; handler: DomHandler } {
     withStartIndices: false,
     withEndIndices: false,
   });
-  const parser = new Parser(handler, {
+  const parser = new DocumentParser(handler, {
     lowerCaseTags: true,
     lowerCaseAttributeNames: true,
-    recognizeSelfClosing: true,
+    // HTML closes an element written `<x/>` only where it is void, and so
+    // closed anyway, or in SVG or MathML (HTML 13.2.6.5, "acknowledge the
+    // self-closing flag"). A `<div/>` or an `<a href="" /*target="_blank"*/>`
+    // — melbcss.com's, a comment that is no comment in a tag — opens an
+    // element like any other, and closing it left the link's text outside
+    // the link.
+    recognizeSelfClosing: false,
     decodeEntities: true,
   });
   return { parser, handler };
 }
 
+/**
+ * htmlparser2's parser, deciding a `/>` from the context its tag was read
+ * in, as HTML's does. htmlparser2 decides from the context the tag opens,
+ * and an integration point — SVG's `<title>`, `<desc>` and
+ * `<foreignObject>`, MathML's `<mi>` and its kin — opens an HTML one, so
+ * an `<svg><title/><path/>` took its path into the title.
+ */
+class DocumentParser extends Parser {
+  private _foreignTag = false;
+  private _acknowledging = false;
+
+  override isInForeignContext(): boolean {
+    return this._acknowledging || super.isInForeignContext();
+  }
+
+  override onopentagname(start: number, endIndex: number): void {
+    this._foreignTag = this.isInForeignContext();
+    super.onopentagname(start, endIndex);
+  }
+
+  override onselfclosingtag(endIndex: number): void {
+    this._acknowledging = this._foreignTag;
+    try {
+      super.onselfclosingtag(endIndex);
+    } finally {
+      this._acknowledging = false;
+    }
+  }
+}
+
 /**
  * Whether a `media` attribute is one a screen honours. Deliberately not a
  * media-query engine: `screen`, `all` and an empty list apply, `print` and

package/src/html/index.ts

@@ -505,6 +505,9 @@ function renderControl(
     top: Math.round(at.y),
     width: Math.round(at.width),
     height: Math.round(at.height),
+    // core's `opacity` is CSS's: the widget faded as a group, and at 0 not
+    // drawn and still hit
+    ...(rect.opacity !== undefined && { opacity: rect.opacity }),
   };
   const field = rect.bare ? bareField(rect.bare) : fieldChrome(look);
   const report = (value: string | boolean): void => {
@@ -528,6 +531,9 @@ function renderControl(
       widget = h(Checkbox, {
         checked: attr(el, 'checked') !== undefined,
         disabled,
+        // the element's whole box takes the press, as it does in a browser:
+        // a page that sizes one over its label, invisible, means the label
+        style: { width: '100%', height: '100%' },
         onChange: (ev) => {
           const next = ev.value;
           if (next) el.attribs.checked = '';
@@ -570,7 +576,21 @@ function renderControl(
         options: options.map((o) => ({ value: o.value, label: o.label })),
         value: selectedOption(el) ?? undefined,
         disabled,
-        style: { width: '100%', height: '100%' },
+        style: rect.bare
+          ? [BARE_TRIGGER, { width: '100%', height: '100%' }]
+          : { width: '100%', height: '100%' },
+        // the slots choose the drawn trigger on every backend, and put the
+        // caption and the arrow in the page's ink
+        ...(rect.bare && {
+          labelStyle: {
+            color: rect.bare.color,
+            fontFamily: rect.bare.fontFamily,
+            fontSize: rect.bare.fontSize,
+          },
+          chevronStyle: rect.bare.chevron
+            ? { color: rect.bare.color }
+            : { display: 'none' },
+        }),
         onChange: (ev) => {
           const next = String(ev.value ?? '');
           setSelectedOption(el, next);
@@ -655,6 +675,24 @@ function bareField(bare: BareField): Style {
   };
 }
 
+/**
+ * The trigger of a `<select>` whose box the page styled: no frame, no fill
+ * and none of its own insets, and no wash under the pointer, since the box
+ * it would tint is the document's. Core's focus ring still marks it for the
+ * keyboard.
+ */
+const BARE_TRIGGER: Style = {
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  borderWidth: 0,
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  ':hover': { backgroundColor: 'transparent' },
+  ':active': { backgroundColor: 'transparent' },
+};
+
 function clearRadioGroup(el: Element): void {
   const name = attr(el, 'name');
   if (!name) return;