@uniflowed/ui 0.0.0-alpha.8 → 0.1.0

package/radio-group.js

@@ -76,8 +76,13 @@
 import * as React from "@uniflowed/react";
 import { createContext, useCallback, useContext, useId, useMemo, useRef } from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
-import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
+import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
+import {
+  composeHandlers,
+  composeRefs,
+  withoutComposed,
+  withProps,
+} from "./internal/merge-props.js";
 import { moveOnKey, useFirstItem } from "./internal/roving-focus.js";
 import type { Orientation, RovingSet } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
@@ -146,6 +151,7 @@ export component RadioGroupRoot(
   onValueChange?: (value: string) => void,
   orientation?: Orientation = "vertical",
   name?: string,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   // `onValueChange` promises a `string` while the group's *state* is
@@ -171,44 +177,48 @@ export component RadioGroupRoot(
 
   const state = useMemo(() => ({ selected, select, firstId }), [selected, select, firstId]);
   const passed = withoutComposed(rest, ["onKeyDown", "ref"]);
+  const content = (
+    <>
+      {children}
+      {/*
+        A form submits `<input>` elements, and none of the parts above is one.
+        Without this the group is a control a reader can operate and a form
+        cannot read, which is the same hole `Combobox` still has.
+
+        `type="hidden"` rather than a visually hidden real radio, because the
+        buttons above already carry the whole of the accessible semantics: a
+        second set of native radios would be announced as a second set of
+        answers, and hiding them from the accessibility tree to stop that
+        leaves elements a form's own validation would then point its
+        "please choose one" at.
+      */}
+      {name == null ? null : <input name={name} type="hidden" value={selected ?? ""} />}
+    </>
+  );
+  const props = withProps(passed, {
+    "aria-orientation": orientation,
+    children: content,
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      const group: $FlowFixMe = event.currentTarget;
+      const next = moveOnKey(event, group, radioSet(orientation));
+      if (next != null) {
+        // Checking in the same key press is not a shortcut, it is the
+        // pattern: a radio group whose arrows moved focus without checking
+        // leaves a reader believing they have answered when they have not.
+        select(next.getAttribute("data-value") ?? "");
+      }
+    }),
+    // React calls callback refs during commit; keyboard handlers read it later.
+    // uf-lint-disable-next-line react-compiler/refs
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      rootRef.current = element;
+    }),
+    role: "radiogroup",
+  });
 
   return (
     <RadioGroupContext.Provider value={state}>
-      <div
-        {...passed}
-        // A reader is told which axis this runs along, and it is also what says
-        // which pair of arrow keys is live.
-        aria-orientation={orientation}
-        onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-          const group: $FlowFixMe = event.currentTarget;
-          const next = moveOnKey(event, group, radioSet(orientation));
-          if (next != null) {
-            // Checking in the same key press is not a shortcut, it is the
-            // pattern: a radio group whose arrows moved focus without checking
-            // leaves a reader believing they have answered when they have not.
-            select(next.getAttribute("data-value") ?? "");
-          }
-        })}
-        ref={composeRefs(rest.ref, (element) => {
-          rootRef.current = element;
-        })}
-        role="radiogroup"
-      >
-        {children}
-        {/*
-          A form submits `<input>` elements, and none of the parts above is one.
-          Without this the group is a control a reader can operate and a form
-          cannot read, which is the same hole `Combobox` still has.
-
-          `type="hidden"` rather than a visually hidden real radio, because the
-          buttons above already carry the whole of the accessible semantics: a
-          second set of native radios would be announced as a second set of
-          answers, and hiding them from the accessibility tree to stop that
-          leaves elements a form's own validation would then point its
-          "please choose one" at.
-        */}
-        {name == null ? null : <input name={name} type="hidden" value={selected ?? ""} />}
-      </div>
+      {render == null ? <div {...props} /> : render(props)}
     </RadioGroupContext.Provider>
   );
 }
@@ -226,6 +236,7 @@ export component RadioGroupItem(
   value: string,
   children?: React.Node,
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const group = useRadioGroup("RadioGroup.Item");
@@ -233,41 +244,39 @@ export component RadioGroupItem(
   const checked = group.selected === value;
   const item = useMemo(() => ({ checked }), [checked]);
   const passed = withoutComposed(rest, ["onClick", "onKeyDown"]);
+  const props = withProps(passed, {
+    "aria-checked": checked ? "true" : "false",
+    "aria-disabled": disabled ? "true" : undefined,
+    // Read by the group's key handler, which finds items in the document
+    // rather than in a registry and so needs each one to carry its value.
+    "data-value": value,
+    children,
+    id,
+    onClick: composeHandlers(rest.onClick, (_event: PartEvent) => {
+      if (!disabled) {
+        group.select(value);
+      }
+    }),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      if (disabled || event.key !== " ") {
+        return;
+      }
+      // Stops `Space` scrolling the page — which is what makes a
+      // hand-written radio feel broken even when it works — and stops the
+      // browser's own click arriving afterwards to check this again.
+      event.preventDefault();
+      group.select(value);
+    }),
+    role: "radio",
+    // The roving tab stop: the chosen answer, or the first one while there
+    // is no answer, so `Tab` reaches the group in either state and leaves
+    // it in one press.
+    tabIndex: checked || (group.selected == null && group.firstId === id) ? 0 : -1,
+  });
 
   return (
     <RadioItemContext.Provider value={item}>
-      <button
-        {...passed}
-        aria-checked={checked ? "true" : "false"}
-        aria-disabled={disabled ? "true" : undefined}
-        // Read by the group's key handler, which finds items in the document
-        // rather than in a registry and so needs each one to carry its value.
-        data-value={value}
-        id={id}
-        onClick={composeHandlers(rest.onClick, () => {
-          if (!disabled) {
-            group.select(value);
-          }
-        })}
-        onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-          if (disabled || event.key !== " ") {
-            return;
-          }
-          // Stops `Space` scrolling the page — which is what makes a
-          // hand-written radio feel broken even when it works — and stops the
-          // browser's own click arriving afterwards to check this again.
-          event.preventDefault();
-          group.select(value);
-        })}
-        role="radio"
-        // The roving tab stop: the chosen answer, or the first one while there
-        // is no answer, so `Tab` reaches the group in either state and leaves
-        // it in one press.
-        tabIndex={checked || (group.selected == null && group.firstId === id) ? 0 : -1}
-        type="button"
-      >
-        {children}
-      </button>
+      {render == null ? <button {...props} type="button" /> : render(props)}
     </RadioItemContext.Provider>
   );
 }
@@ -282,7 +291,7 @@ export component RadioGroupItem(
  * `[aria-checked="true"] > *`, and so the "only while chosen" part is not
  * something each caller reimplements.
  */
-export component RadioGroupIndicator(children?: React.Node, ...rest: Rest) {
+export component RadioGroupIndicator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const item = useContext(RadioItemContext);
   if (item == null) {
     throw new Error("RadioGroup.Indicator must be rendered inside a RadioGroup.Item");
@@ -290,9 +299,6 @@ export component RadioGroupIndicator(children?: React.Node, ...rest: Rest) {
   if (!item.checked) {
     return null;
   }
-  return (
-    <span {...rest} aria-hidden="true">
-      {children}
-    </span>
-  );
+  const props = withProps(rest, { "aria-hidden": "true", children });
+  return render == null ? <span {...props} /> : render(props);
 }

package/range-calendar.js

@@ -0,0 +1,78 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { useState } from "@uniflowed/react";
+import type { PlainDate } from "@uniflowed/core/temporal";
+import { useControlled } from "./internal/controlled-state.js";
+import type { Rest } from "./internal/merge-props.js";
+import type { DateRange } from "./internal/date-range.js";
+import { validateRange, unavailableInRange } from "./internal/date-range.js";
+import { CalendarRoot, CalendarMonth } from "./calendar.js";
+export type { DateRange } from "./internal/date-range.js";
+
+export component RangeCalendarRoot(
+  children?: React.Node = <CalendarMonth />,
+  value?: DateRange | null,
+  defaultValue?: DateRange | null = null,
+  onValueChange?: (value: DateRange | null) => void,
+  minValue?: string,
+  maxValue?: string,
+  isDateDisabled?: (date: PlainDate) => boolean,
+  defaultFocused?: string,
+  today?: string,
+  locale?: string,
+  focusedDayRef?: { current: HTMLElement | null },
+  ...rest: Rest
+) {
+  const [range, setRange] = useControlled(value, defaultValue, onValueChange);
+  const [anchor, setAnchor] = useState<string | null>(null);
+  const [announcement, announce] = useState("");
+  validateRange(range);
+  const disabled = (date: PlainDate) =>
+    (minValue != null && date.toString() < minValue) ||
+    (maxValue != null && date.toString() > maxValue) ||
+    isDateDisabled?.(date) === true;
+  const choose = (date: PlainDate) => {
+    const iso = date.toString();
+    if (disabled(date)) return;
+    if (anchor == null) {
+      setAnchor(iso);
+      announce(`Start ${iso}. Choose an end date.`);
+      return;
+    }
+    const start = anchor < iso ? anchor : iso,
+      end = anchor < iso ? iso : anchor;
+    if (unavailableInRange(start, end, isDateDisabled)) {
+      announce("The range contains an unavailable date");
+      return;
+    }
+    setRange({ start, end });
+    setAnchor(null);
+    announce(`Selected ${start} to ${end}`);
+  };
+  const selected = (date: PlainDate) => {
+    const iso = date.toString();
+    return anchor != null
+      ? iso === anchor
+      : range != null && iso >= range.start && iso <= range.end;
+  };
+  return (
+    <div {...rest}>
+      <CalendarRoot
+        value={anchor ?? range?.start ?? null}
+        defaultFocused={defaultFocused}
+        today={today}
+        locale={locale}
+        focusedDayRef={focusedDayRef}
+        isDateDisabled={disabled}
+        isDateSelected={selected}
+        onValueChange={choose}
+      >
+        {children}
+      </CalendarRoot>
+      <span role="status" aria-live="polite">
+        {announcement}
+      </span>
+    </div>
+  );
+}

package/resizable.js

@@ -10,8 +10,42 @@
 //
 // Almost every resizable panel on the web is pointer-only, which is a WCAG
 // 2.1.1 failure — no keyboard operation at all — and a 2.5.7 one on top of it.
-// If uf ships one, the keyboard is the feature, so the keyboard is what this
-// module is: there is no drag here yet, and there is a complete key map.
+// If uf ships one the keyboard is the feature, so the keyboard was written
+// first and shipped on its own: a keyboard-only splitter is a working
+// splitter, where a pointer-only one is not.
+//
+// It was not the finished control. A bar between two panes is a bar that
+// approximately everybody takes hold of first, and this one could not be
+// moved that way at all. Both halves are here now, and the key map is exactly
+// what it was — a drag that had quietly replaced it would be the first failure
+// in the other direction.
+//
+// # The drag, and the step it does not use
+//
+// It is `slider.js`'s `Slider.Track` arithmetic measured against the *group's*
+// box rather than a track's. `pointerdown` captures the pointer, so a drag
+// that wanders off a bar four pixels wide — which every drag does — keeps
+// arriving at the handle instead of being lost to whatever it wandered over;
+// `pointermove` turns the position into a percentage from
+// `getBoundingClientRect`; and the percentage goes through `internal/range.js`
+// like every other value here, so a drag cannot leave the pane anywhere an
+// arrow key could not put it, and `aria-valuenow` is true about it while it
+// moves.
+//
+// Pressing the handle does not move it. A press on a *track* means "put the
+// value here", which is what `Slider.Track` does with one and why it is half
+// of WCAG 2.5.7 there; a press on a handle means "take hold of this". A
+// splitter that also jumped by the distance between the pointer and its own
+// centre would move a little every time it was clicked, which is the one thing
+// a person who clicked it did not ask for.
+//
+// `step` stays the keyboard's, and the pointer has one of its own. `step`
+// defaults to 10 because ten presses of an arrow key ought to cross the pane,
+// and 10 is an absurd granularity for a bar being dragged under a pointer that
+// moves smoothly. The pointer's is one percent, and it is a constant rather
+// than a second prop because the value is already a percentage of the group:
+// one is the smallest move that means anything, and a splitter announcing
+// 47.382 would be reading out its arithmetic rather than its size.
 //
 // # The two separators in this package are not the same thing
 //
@@ -53,9 +87,9 @@
 //
 // Each pane carries its share as `--uf-resizable-size`, a percentage, and the
 // caller's stylesheet decides whether that is a width, a height, a `flex-basis`
-// or nothing at all. There is no drag: the pointer half is tracked work, and a
-// keyboard-only splitter is a working splitter, where a pointer-only one is
-// not.
+// or nothing at all. The group is measured rather than drawn — the drag reads
+// its box and never writes to it — so a caller whose panes are flex children,
+// grid tracks or absolutely positioned gets the same splitter.
 
 "use client";
 
@@ -71,11 +105,21 @@ import {
 } from "@uniflowed/react";
 
 import type { Rest } from "./internal/merge-props.js";
-import { composeHandlers, withoutComposed } from "./internal/merge-props.js";
+import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
 import type { Orientation } from "./internal/roving-focus.js";
-import { clamp, isReversed } from "./internal/range.js";
+import { clamp, isReversed, snap } from "./internal/range.js";
 import { useControlled } from "./internal/controlled-state.js";
 
+/**
+ * How finely a drag may move the splitter, in percentage points.
+ *
+ * Not `step`, which is the keyboard's and defaults to ten; the module header
+ * says why the two cannot be the same number. One is a constant rather than a
+ * prop because the value is already a percentage of the group, so one is the
+ * smallest move that means anything.
+ */
+const POINTER_STEP = 1;
+
 type ResizableState = {|
   readonly base: string,
   /** The primary pane's share of the group, as a percentage. */
@@ -89,6 +133,14 @@ type ResizableState = {|
   readonly disabled: boolean,
   readonly hasPrimary: boolean,
   readonly registerPrimary: (present: boolean) => void,
+  /**
+   * The element a drag is measured against.
+   *
+   * The group rather than the handle, because the value is the primary pane's
+   * share *of the group* — the handle is a few pixels wide and has no idea how
+   * much space there is to divide.
+   */
+  readonly groupRef: { current: HTMLElement | null },
 |};
 
 const ResizableContext: React.Context<ResizableState | null> = createContext(null);
@@ -128,6 +180,7 @@ export component ResizablePanelGroup(
   const base = useId();
   const [share, setShare] = useControlled(value, defaultValue, onValueChange);
   const [hasPrimary, setHasPrimary] = useState(false);
+  const groupRef = useRef<HTMLElement | null>(null);
 
   const state = useMemo(
     () => ({
@@ -141,13 +194,23 @@ export component ResizablePanelGroup(
       disabled,
       hasPrimary,
       registerPrimary: setHasPrimary,
+      groupRef,
     }),
     [base, share, setShare, min, max, step, orientation, disabled, hasPrimary],
   );
 
+  const passed = withoutComposed(rest, ["ref"]);
+
   return (
     <ResizableContext.Provider value={state}>
-      <div {...rest}>{children}</div>
+      <div
+        {...passed}
+        ref={composeRefs(rest.ref, (element) => {
+          groupRef.current = element;
+        })}
+      >
+        {children}
+      </div>
     </ResizableContext.Provider>
   );
 }
@@ -199,16 +262,61 @@ export component ResizablePanel(children: React.Node, primary?: boolean = false,
  */
 export component ResizableHandle(label?: string = "Resize", ...rest: Rest) {
   const group = useResizable("Resizable.Handle");
-  const passed = withoutComposed(rest, ["onKeyDown"]);
+  const passed = withoutComposed(rest, [
+    "onKeyDown",
+    "onPointerCancel",
+    "onPointerDown",
+    "onPointerMove",
+    "onPointerUp",
+  ]);
   // Where the pane was before `Enter` collapsed it. A ref because nothing
   // renders it: it is a fact about the last keystroke, not about the layout.
   const restoreTo = useRef<number | null>(null);
+  // Whether the pointer is down on this handle. Also a ref, and for the same
+  // reason: it changes between renders and no render depends on it.
+  const dragging = useRef(false);
 
   const moveBy = (amount: number) => {
     restoreTo.current = null;
     group.setValue(clamp(group.value + amount, group.min, group.max));
   };
 
+  /** The primary pane's share at the pointer, or null with no box to read. */
+  const shareAt = (event: $FlowFixMe): number | null => {
+    const element = group.groupRef.current;
+    if (element == null) {
+      return null;
+    }
+    const box = element.getBoundingClientRect();
+    const vertical = group.orientation === "vertical";
+    const size = vertical ? box.height : box.width;
+    if (size <= 0) {
+      // A group with no box has no percentages in it, and dividing by its
+      // width would put `Infinity` into `aria-valuenow`.
+      return null;
+    }
+    // From the top for stacked panes, where `Slider.Track` reads from the
+    // bottom: a slider's minimum is at the bottom of its track, and a group's
+    // primary pane is the one *before* the handle, which is the top one.
+    const along = vertical ? event.clientY - box.top : event.clientX - box.left;
+    const part = clamp(along / size, 0, 1);
+    // In a right-to-left page the pane before the handle is the one on the
+    // right, so the reading runs the other way. `isReversed` mirrors nothing on
+    // a stacked group, because writing direction does not flip the vertical
+    // axis.
+    const forward = isReversed(element, group.orientation) ? 1 - part : part;
+    // The value *is* the percentage, so the position becomes one directly
+    // rather than being mapped across `min`–`max` the way a slider's is: those
+    // two are bounds on how far the pane may be dragged, not the ends of a
+    // scale. Mapping them would put the handle somewhere the pointer is not.
+    return snap(forward * 100, group.min, group.max, POINTER_STEP);
+  };
+
+  const endDrag = (event: $FlowFixMe) => {
+    dragging.current = false;
+    event.currentTarget?.releasePointerCapture?.(event.pointerId);
+  };
+
   return (
     <div
       {...passed}
@@ -224,6 +332,8 @@ export component ResizableHandle(label?: string = "Resize", ...rest: Rest) {
       aria-valuemax={group.max}
       aria-valuemin={group.min}
       aria-valuenow={group.value}
+      // Key and pointer handlers keep gesture state in refs between events.
+      // uf-lint-disable-next-line react-compiler/refs
       onKeyDown={composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
         if (group.disabled) {
           return;
@@ -265,6 +375,42 @@ export component ResizableHandle(label?: string = "Resize", ...rest: Rest) {
           moveBy(amount);
         }
       })}
+      // uf-lint-disable-next-line react-compiler/refs
+      onPointerCancel={composeHandlers(rest.onPointerCancel, endDrag)}
+      // uf-lint-disable-next-line react-compiler/refs
+      onPointerDown={composeHandlers(rest.onPointerDown, (event: $FlowFixMe) => {
+        if (group.disabled) {
+          return;
+        }
+        // Otherwise the press selects the text in the panes either side on the
+        // way past, so a drag paints half the page blue.
+        event.preventDefault();
+        // Which also means the browser will not focus this element, and a
+        // reader who has just dragged the splitter is the reader most likely to
+        // want an arrow key next.
+        event.currentTarget?.focus?.();
+        event.currentTarget?.setPointerCapture?.(event.pointerId);
+        dragging.current = true;
+        // A drag is a move, so the pane `Enter` would put back is no longer
+        // where it was. Leaving it would make the next `Enter` restore a size
+        // from before the drag.
+        restoreTo.current = null;
+        // Deliberately no value change: taking hold of the handle is not asking
+        // it to move. The module header says what a press does on a track
+        // instead, and why the two are not the same gesture.
+      })}
+      // uf-lint-disable-next-line react-compiler/refs
+      onPointerMove={composeHandlers(rest.onPointerMove, (event: $FlowFixMe) => {
+        if (!dragging.current) {
+          return;
+        }
+        const share = shareAt(event);
+        if (share != null) {
+          group.setValue(share);
+        }
+      })}
+      // uf-lint-disable-next-line react-compiler/refs
+      onPointerUp={composeHandlers(rest.onPointerUp, endDrag)}
       role="separator"
       // A separator that is not in the tab sequence is the WCAG 2.1.1 failure
       // this module exists to avoid.