react-x11 1.2.0 → 2.0.0

package/src/components/Slider.js

@@ -4,6 +4,7 @@
 
 import React, { useRef, useState } from 'react';
 import { useTheme } from './theme.js';
+import { changeEvent } from './change.js';
 import {
   XK_DOWN,
   XK_END,
@@ -18,6 +19,7 @@ import {
 const h = React.createElement;
 
 const SLIDER_THUMB = 16;
+const SLIDER_SLOP = (24 - SLIDER_THUMB) / 2;
 
 /**
  * <Slider value min max step onChange disabled …boxProps> — draggable
@@ -37,9 +39,10 @@ export function Slider({
   max = 100,
   step = 1,
   onChange,
+  name,
   disabled = false,
-  width,
   height = 4,
+  style,
   ...boxProps
 }) {
   const theme = useTheme();
@@ -60,25 +63,45 @@ export function Slider({
   const fraction = (clamp(value) - min) / span;
 
   const emit = (next) => {
-    if (next !== value) onChange?.(next);
+    if (next !== value) onChange?.(changeEvent('range', name, next));
   };
 
-  /** Pointer x -> value, using the track's laid-out rect. */
+  /**
+   * Pointer x -> value, using the track's laid-out rect.
+   *
+   * The direction is read off the **node** rather than the theme: it is the
+   * one the track was actually laid out in, which is what the pointer
+   * coordinate has to be measured against — a slider inside a `<box
+   * style={{ direction: 'rtl' }}>` mirrors without a provider anywhere.
+   */
   const valueAt = (ev) => {
     const node = trackRef.current;
-    if (!node?.abs?.width) return value;
+    // getClientRects rather than raw `abs`: the event, the thumb constant
+    // and this rect must share a unit, and the public rect is logical like
+    // they are — `abs` is device (src/scale.js)
+    const rect = node?.getClientRects?.()[0];
+    if (!rect?.width) return value;
     // the thumb is centred on the value, so the usable travel is the track
     // minus one thumb width — otherwise min/max are unreachable at the ends
-    const travel = Math.max(1, node.abs.width - SLIDER_THUMB);
-    const x = ev.x - node.abs.x - SLIDER_THUMB / 2;
+    const travel = Math.max(1, rect.width - SLIDER_THUMB);
+    const x =
+      node.direction === 'rtl'
+        ? rect.x + rect.width - ev.x - SLIDER_THUMB / 2
+        : ev.x - rect.x - SLIDER_THUMB / 2;
     return quantize(min + (Math.min(travel, Math.max(0, x)) / travel) * span);
   };
 
   const controlProps = disabled
-    ? {}
+    ? { disabled: true }
     : {
         focusable: true,
-        cursor: 'pointer',
+        // the AT-SPI Value interface writes land here (Orca adjusting the
+        // slider): same clamp/quantize/emit as every other input route
+        onAccessibilityAction: ({ action, value: next }) => {
+          if (action === 'setValue' && typeof next === 'number') {
+            emit(quantize(clamp(next)));
+          }
+        },
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false),
         onMouseDown: (ev) => {
@@ -92,12 +115,22 @@ export function Slider({
         onMouseUp: () => setDragging(false),
         onKeyDown: (ev) => {
           const big = (step || 1) * 10;
+          // Left and Right name what the *thumb* should do on the screen, so
+          // in a mirrored slider Left is the one that raises the value —
+          // WAI-ARIA's rule for a horizontal slider, and the only one that
+          // matches what the hand sees. Up and Down never mirror, which is
+          // why they are not folded in with them.
+          const along = trackRef.current?.direction === 'rtl' ? -1 : 1;
           switch (ev.keysym) {
             case XK_LEFT:
+              emit(quantize(clamp(value - along * (step || 1))));
+              return;
+            case XK_RIGHT:
+              emit(quantize(clamp(value + along * (step || 1))));
+              return;
             case XK_DOWN:
               emit(quantize(clamp(value - (step || 1))));
               return;
-            case XK_RIGHT:
             case XK_UP:
               emit(quantize(clamp(value + (step || 1))));
               return;
@@ -122,24 +155,43 @@ export function Slider({
   return h(
     'box',
     {
+      theme,
+      role: 'slider',
+      'aria-valuenow': clamp(value),
+      'aria-valuemin': min,
+      'aria-valuemax': max,
+      'aria-orientation': 'horizontal',
       ref: trackRef,
-      width,
-      height: SLIDER_THUMB,
-      minWidth: 0,
-      justifyContent: 'center',
       ...controlProps,
       ...boxProps,
+      style: [
+        disabled || { cursor: 'pointer' },
+        {
+          height: SLIDER_THUMB,
+          minWidth: 0,
+          justifyContent: 'center',
+          // the control is as tall as its thumb and the track inside it sets
+          // `pointerEvents: 'none'`, so 16px was the whole target. Grown to
+          // WCAG 2.2 SC 2.5.8's 24 on the axis that is short, without moving
+          // a pixel of the drawing — a taller slider would misalign every row
+          // it sits in.
+          hitSlop: { top: SLIDER_SLOP, bottom: SLIDER_SLOP },
+        },
+        style,
+      ],
     },
     // track
     h(
       'box',
       {
-        height,
-        borderRadius: height / 2,
-        backgroundColor: theme.track,
-        flexDirection: 'row',
-        alignItems: 'center',
-        pointerEvents: 'none',
+        style: {
+          height: height,
+          borderRadius: height / 2,
+          backgroundColor: theme.track,
+          flexDirection: 'row',
+          alignItems: 'center',
+          pointerEvents: 'none',
+        },
       },
       // flex ratios, not a percentage width: a percentage child resolves
       // against the space available while the track is still being
@@ -147,31 +199,40 @@ export function Slider({
       // at value = max the control grew, which moved the handle, which
       // changed the value, and a drag turned into an oscillation
       h('box', {
-        flexGrow: fraction,
-        flexShrink: 0,
-        flexBasis: 0,
-        height,
-        borderRadius: height / 2,
-        backgroundColor: disabled ? theme.dim : theme.accent,
+        style: {
+          flexGrow: fraction,
+          flexShrink: 0,
+          flexBasis: 0,
+          height: height,
+          borderRadius: height / 2,
+          backgroundColor: disabled ? theme.textMuted : theme.accent,
+        },
+      }),
+      h('box', {
+        style: { flexGrow: 1 - fraction, flexShrink: 0, flexBasis: 0 },
       }),
-      h('box', { flexGrow: 1 - fraction, flexShrink: 0, flexBasis: 0 }),
     ),
-    // thumb, centred on the value within the same travel the math uses
+    // thumb, centred on the value within the same travel the math uses.
+    // Logical inset and logical margin: the track's two flex ratios already
+    // mirror on their own — a `row` runs the other way under `direction:
+    // 'rtl'` — and these are what keep the thumb on top of the join.
     h('box', {
-      position: 'absolute',
-      left: `${fraction * 100}%`,
-      marginLeft: -SLIDER_THUMB * fraction,
-      width: SLIDER_THUMB,
-      height: SLIDER_THUMB,
-      borderRadius: SLIDER_THUMB / 2,
-      borderWidth: 1,
-      borderColor: disabled
-        ? theme.border
-        : focused || dragging
-          ? theme.accentHover
-          : theme.border,
-      backgroundColor: disabled ? theme.surfaceHover : theme.background,
-      pointerEvents: 'none',
+      style: {
+        position: 'absolute',
+        start: `${fraction * 100}%`,
+        marginStart: -SLIDER_THUMB * fraction,
+        width: SLIDER_THUMB,
+        height: SLIDER_THUMB,
+        borderRadius: SLIDER_THUMB / 2,
+        borderWidth: 1,
+        borderColor: disabled
+          ? theme.border
+          : focused || dragging
+            ? theme.accentHover
+            : theme.border,
+        backgroundColor: disabled ? theme.surfaceHover : theme.surface,
+        pointerEvents: 'none',
+      },
     }),
   );
 }

package/src/components/SplitPane.js

@@ -0,0 +1,206 @@
+// Widget components built purely on the host primitives — no reconciler
+// support needed. Plain createElement (no JSX) so the library stays
+// build-step-free for consumers.
+
+import React, { useRef, useState } from 'react';
+import { createStyles } from '../styles.js';
+import { useDirection, useTheme } from './theme.js';
+import { XK_DOWN, XK_END, XK_HOME, XK_LEFT, XK_RIGHT, XK_UP } from './keys.js';
+
+const h = React.createElement;
+
+const DIVIDER = 6;
+const KEY_STEP = 16;
+
+const s = createStyles({
+  root: { flexGrow: 1, minHeight: 0, minWidth: 0 },
+  pane: { minHeight: 0, minWidth: 0 },
+  // `flex: 1` is load-bearing, not tidying: the zero basis in it is what
+  // makes this pane "whatever is left" rather than "as much as my content
+  // wants, shrunk as far as it will go". With a content basis the pane still
+  // could not go below the content's own floor, so a second pane holding a
+  // wrapping row would lay out at its unwrapped width and overflow. The
+  // `min-*: 0` on top says this one may go below even that.
+  grow: { flex: 1, minHeight: 0, minWidth: 0 },
+  divider: {
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: { backgroundColor: 100 },
+  },
+  // the grab handle is a hairline; the *target* is the whole divider
+  grip: { borderRadius: 1 },
+});
+
+/**
+ * <SplitPane> — two panes with a divider you can drag.
+ *
+ *   <SplitPane direction="row" defaultSize={220}>
+ *     <Sidebar />
+ *     <Editor />
+ *   </SplitPane>
+ *
+ * `size` is the first pane's width (or height, when `direction="column"`)
+ * in pixels: controlled with `size` + `onResize`, uncontrolled with
+ * `defaultSize`. The second pane takes what is left, so only one number is
+ * ever stored and a window resize cannot leave a gap.
+ *
+ * `min` and `minSecond` keep either pane from collapsing; the drag clamps
+ * against the container's laid-out size, so it stays honest when the window
+ * changes underneath it.
+ *
+ * The divider is focusable: arrows move it by 16px, Home/End drive it to
+ * either limit. Dragging captures the pointer, so it keeps tracking after
+ * the pointer leaves the six pixels it started on.
+ */
+export function SplitPane({
+  direction = 'row',
+  size,
+  defaultSize = 200,
+  min = 40,
+  minSecond = 40,
+  onResize,
+  children,
+  style,
+  ...boxProps
+}) {
+  const theme = useTheme();
+  const rtl = useDirection() === 'rtl';
+  const [first, second] = React.Children.toArray(children);
+  const [uncontrolled, setUncontrolled] = useState(defaultSize);
+  const [dragging, setDragging] = useState(false);
+  const rootRef = useRef(null);
+  const grab = useRef(0);
+  const vertical = direction === 'column';
+  const current = size ?? uncontrolled;
+
+  // the live size and drag flag, mirrored in refs: a press and the moves
+  // that follow can all land before React re-renders, and a handler closing
+  // over the last rendered value would drop everything after the first
+  const sizeRef = useRef(current);
+  sizeRef.current = current;
+  const draggingRef = useRef(false);
+
+  /** Clamp against the container as laid out right now. */
+  const commit = (next) => {
+    // logical throughout: `next` becomes a style width/height, and the
+    // container rect has to be in the same unit (`abs` is device)
+    const box = rootRef.current?.getClientRects?.()[0];
+    const total = (vertical ? box?.height : box?.width) ?? 0;
+    const room = Math.max(min, total - DIVIDER - minSecond);
+    const clamped = Math.min(Math.max(min, next), total > 0 ? room : next);
+    if (clamped === sizeRef.current) return;
+    sizeRef.current = clamped;
+    if (size === undefined) setUncontrolled(clamped);
+    onResize?.(clamped);
+  };
+
+  /**
+   * How far along the split the pointer is, measured from the first pane's
+   * own edge — the top in a column, and in a row the side the panes start
+   * at, which is the right-hand one when the layout is mirrored. Everything
+   * else here is already a distance rather than a coordinate, so this is the
+   * only place the direction gets read.
+   */
+  const alongSplit = (ev, box) => {
+    if (vertical) return ev.y - box.y;
+    return rtl ? box.x + box.width - ev.x : ev.x - box.x;
+  };
+
+  const dividerProps = {
+    focusable: true,
+    onMouseDown: (ev) => {
+      const box = rootRef.current?.getClientRects?.()[0];
+      if (!box) return;
+      // where in the divider it was taken, so it does not jump on press
+      grab.current = alongSplit(ev, box) - sizeRef.current;
+      ev.capturePointer();
+      draggingRef.current = true;
+      setDragging(true);
+    },
+    onMouseMove: (ev) => {
+      if (!draggingRef.current) return;
+      const box = rootRef.current?.getClientRects?.()[0];
+      if (!box) return;
+      commit(alongSplit(ev, box) - grab.current);
+    },
+    onMouseUp: () => {
+      draggingRef.current = false;
+      setDragging(false);
+    },
+    onKeyDown: (ev) => {
+      // the key that *shrinks* the first pane is the one pointing back at
+      // its own edge, which swaps with the layout
+      const swap = !vertical && rtl;
+      const back = vertical ? XK_UP : swap ? XK_RIGHT : XK_LEFT;
+      const forward = vertical ? XK_DOWN : swap ? XK_LEFT : XK_RIGHT;
+      switch (ev.keysym) {
+        case back:
+          commit(sizeRef.current - KEY_STEP);
+          return;
+        case forward:
+          commit(sizeRef.current + KEY_STEP);
+          return;
+        case XK_HOME:
+          commit(min);
+          return;
+        case XK_END:
+          commit(Number.MAX_SAFE_INTEGER);
+          return;
+        default:
+      }
+    },
+  };
+
+  return h(
+    'box',
+    {
+      theme,
+      ref: rootRef,
+      ...boxProps,
+      style: [s.root, { flexDirection: vertical ? 'column' : 'row' }, style],
+    },
+    h(
+      'box',
+      {
+        style: [
+          s.pane,
+          vertical
+            ? { height: current, flexShrink: 0 }
+            : { width: current, flexShrink: 0 },
+        ],
+      },
+      first ?? null,
+    ),
+    h(
+      'box',
+      {
+        // the ARIA window-splitter pattern: a separator whose value is the
+        // primary pane's size
+        role: 'separator',
+        'aria-orientation': vertical ? 'vertical' : 'horizontal',
+        'aria-valuenow': current,
+        'aria-valuemin': min,
+        ...dividerProps,
+        style: [
+          s.divider,
+          vertical
+            ? { height: DIVIDER, cursor: 'row-resize' }
+            : { width: DIVIDER, cursor: 'col-resize' },
+          { backgroundColor: dragging ? theme.surfaceHover : 'transparent' },
+          { ':hover': { backgroundColor: theme.surfaceHover } },
+        ],
+      },
+      h('box', {
+        style: [
+          s.grip,
+          vertical
+            ? { height: 2, alignSelf: 'stretch' }
+            : { width: 2, alignSelf: 'stretch' },
+          { backgroundColor: theme.border },
+        ],
+      }),
+    ),
+    h('box', { style: s.grow }, second ?? null),
+  );
+}

package/src/components/Switch.js

@@ -3,47 +3,125 @@
 // build-step-free for consumers.
 
 import React from 'react';
+import { createStyles } from '../styles.js';
+import { changeEvent } from './change.js';
 import { useControl, useTheme } from './theme.js';
 
 const h = React.createElement;
 
+const TRACK_WIDTH = 36;
+const THUMB = 16;
+const INSET = 2;
+
+const TRACK_HEIGHT = 20;
+// WCAG 2.2 SC 2.5.8 wants 24px in both directions and the pill is 20 tall.
+// Growing the pill would be a redesign of a control whose proportions are
+// the point, so the *target* grows instead: `hitSlop` is hit testing only,
+// so nothing about the drawing or the layout moves.
+const TRACK_SLOP = (24 - TRACK_HEIGHT) / 2;
+
+const s = createStyles({
+  track: {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: 10,
+    justifyContent: 'center',
+    hitSlop: TRACK_SLOP,
+    transition: { backgroundColor: 120 },
+  },
+  // absolutely positioned so the thumb slides on `start`: `justifyContent`
+  // would flip it between the ends with nothing in between to animate. The
+  // *logical* inset, so an off switch has its thumb on the side its label
+  // starts at and the slide runs the way the text does.
+  thumb: {
+    position: 'absolute',
+    width: THUMB,
+    height: THUMB,
+    borderRadius: THUMB / 2,
+    transition: { start: 120 },
+  },
+});
+
+const THUMB_OFF = INSET;
+const THUMB_ON = TRACK_WIDTH - THUMB - INSET;
+
 /**
- * <Switch checked onChange disabled/> — Checkbox semantics in a sliding
- * pill; the thumb sits at the end matching the state.
+ * <Switch checked onChange disabled style/> — Checkbox semantics in a
+ * sliding pill; the thumb slides to the end matching the state.
+ * `onChange(ev)`, as `Checkbox`.
+ *
+ * The hover, press and focus tints are `:hover`/`:active`/`:focus` blocks
+ * rather than React state: the renderer already knows which node the pointer
+ * is over, which one is held and which one has focus, so lighting the track
+ * up is a repaint of one node instead of a re-render of this component and
+ * everything under it.
+ *
+ * The thumb only slides once the switch has actually flipped, which is on
+ * the release — so the press is the whole of the feedback in between, and a
+ * click held for half a second is half a second of a control that has not
+ * answered without it. `:active` marks the press chain rather than the one
+ * node under the pointer, which is what lets the track answer a press that
+ * landed on the thumb.
+ *
+ * The slide is a `transition` on `start`, so the animation is the renderer's
+ * frame clock rather than a requestAnimationFrame loop written here — and
+ * the same declaration animates the track colour with it. It runs on the
+ * press tint too: 120ms of fade that *starts* on the press frame, which is
+ * the part perception is actually measuring.
  */
 export function Switch({
   checked = false,
   onChange,
+  name,
   disabled = false,
+  style,
   ...boxProps
 }) {
   const theme = useTheme();
-  const { focused, props } = useControl(disabled, () => onChange?.(!checked));
+  const control = useControl(
+    disabled,
+    () => onChange?.(changeEvent('checkbox', name, !checked)),
+    { styled: true },
+  );
   return h(
     'box',
     {
-      width: 36,
-      height: 20,
-      borderRadius: 10,
-      padding: 2,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: checked ? 'flex-end' : 'flex-start',
-      backgroundColor: disabled
-        ? theme.track
-        : checked
-          ? theme.accent
-          : focused
-            ? theme.dim
-            : theme.border,
-      ...props,
+      theme,
+      role: 'switch',
+      'aria-checked': checked,
+      ...control.props,
       ...boxProps,
+      style: [
+        control.style,
+        s.track,
+        {
+          backgroundColor: disabled
+            ? theme.track
+            : checked
+              ? theme.accent
+              : theme.border,
+        },
+        !disabled && {
+          ':hover': {
+            backgroundColor: checked ? theme.accentHover : theme.textMuted,
+          },
+          ':active': {
+            backgroundColor: checked
+              ? theme.accentActive
+              : theme.textMutedActive,
+          },
+        },
+        style,
+      ],
     },
     h('box', {
-      width: 16,
-      height: 16,
-      borderRadius: 8,
-      backgroundColor: theme.background,
+      style: [
+        s.thumb,
+        {
+          start: checked ? THUMB_ON : THUMB_OFF,
+          backgroundColor: theme.surface,
+        },
+      ],
     }),
   );
 }