@uniflowed/ui 0.0.0-alpha.18 → 0.0.0-alpha.37

package/drawer.js

@@ -53,11 +53,12 @@ import { createContext, useContext, useEffect, useMemo, useRef, useState } from
 import { usePrefersReducedMotion } from "@uniflowed/hooks/browser";
 
 import type { Edge } from "./sheet.js";
-import type { Rest } from "./internal/merge-props.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
 import {
   composeHandlers,
   composeRefs,
   forwarded,
+  withProps,
   withoutComposed,
 } from "./internal/merge-props.js";
 import {
@@ -172,13 +173,17 @@ export component DrawerRoot(
 }
 
 /** What opens it, and what focus comes back to when it closes. */
-export component DrawerTrigger(children: React.Node, ...rest: Rest) {
-  return <SheetTrigger {...forwarded(rest)}>{children}</SheetTrigger>;
+export component DrawerTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+  return (
+    <SheetTrigger {...forwarded(rest)} render={render}>
+      {children}
+    </SheetTrigger>
+  );
 }
 
 /** The backdrop. It carries the edge, the same as a sheet's. */
-export component DrawerOverlay(...rest: Rest) {
-  return <SheetOverlay {...forwarded(rest)} />;
+export component DrawerOverlay(render?: RenderProp, ...rest: Rest) {
+  return <SheetOverlay {...forwarded(rest)} render={render} />;
 }
 
 /**
@@ -189,7 +194,7 @@ export component DrawerOverlay(...rest: Rest) {
  * no drag to provide an alternative to — and a drawer with a handle and no
  * `Drawer.Close` has a gesture that is the only way out.
  */
-export component DrawerBody(children: React.Node, ...rest: Rest) {
+export component DrawerBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Body");
   const { bodyRef, snapIndex, snapPoints } = drawer;
   const reducedMotion = usePrefersReducedMotion();
@@ -215,6 +220,7 @@ export component DrawerBody(children: React.Node, ...rest: Rest) {
       ref={composeRefs(rest.ref, (element: HTMLElement | null) => {
         bodyRef.current = element;
       })}
+      render={render}
     >
       {children}
       <RequireCloseForTheDrag />
@@ -254,23 +260,39 @@ component RequireCloseForTheDrag() {
 }
 
 /** The top of the drawer, where the handle usually goes. */
-export component DrawerHeader(children: React.Node, ...rest: Rest) {
-  return <SheetHeader {...forwarded(rest)}>{children}</SheetHeader>;
+export component DrawerHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+  return (
+    <SheetHeader {...forwarded(rest)} render={render}>
+      {children}
+    </SheetHeader>
+  );
 }
 
 /** The bottom of the drawer, where the actions go. */
-export component DrawerFooter(children: React.Node, ...rest: Rest) {
-  return <SheetFooter {...forwarded(rest)}>{children}</SheetFooter>;
+export component DrawerFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
+  return (
+    <SheetFooter {...forwarded(rest)} render={render}>
+      {children}
+    </SheetFooter>
+  );
 }
 
 /** The drawer's accessible name. */
-export component DrawerTitle(children: React.Node, ...rest: Rest) {
-  return <SheetTitle {...forwarded(rest)}>{children}</SheetTitle>;
+export component DrawerTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
+  return (
+    <SheetTitle {...forwarded(rest)} render={render}>
+      {children}
+    </SheetTitle>
+  );
 }
 
 /** What the drawer is for, announced after its name. */
-export component DrawerDescription(children: React.Node, ...rest: Rest) {
-  return <SheetDescription {...forwarded(rest)}>{children}</SheetDescription>;
+export component DrawerDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+  return (
+    <SheetDescription {...forwarded(rest)} render={render}>
+      {children}
+    </SheetDescription>
+  );
 }
 
 /**
@@ -279,7 +301,7 @@ export component DrawerDescription(children: React.Node, ...rest: Rest) {
  *
  * It registers itself so `Drawer.Body` can tell whether the gesture has one.
  */
-export component DrawerClose(children: React.Node, ...rest: Rest) {
+export component DrawerClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Close");
   const closes = drawer.closes;
 
@@ -290,7 +312,11 @@ export component DrawerClose(children: React.Node, ...rest: Rest) {
     };
   }, [closes]);
 
-  return <SheetClose {...forwarded(rest)}>{children}</SheetClose>;
+  return (
+    <SheetClose {...forwarded(rest)} render={render}>
+      {children}
+    </SheetClose>
+  );
 }
 
 /**
@@ -305,7 +331,11 @@ export component DrawerClose(children: React.Node, ...rest: Rest) {
  * `label` because a slider with no accessible name is announced as "slider",
  * which is the same failure `Resizable.Handle` names.
  */
-export component DrawerHandle(label?: string = "Resize the drawer", ...rest: Rest) {
+export component DrawerHandle(
+  label?: string = "Resize the drawer",
+  render?: RenderProp,
+  ...rest: Rest
+) {
   const drawer = useDrawer("Drawer.Handle");
   const { bodyRef, close, handles, setSnapIndex, side, snapIndex, snapPoints } = drawer;
   const passed = withoutComposed(rest, [
@@ -360,78 +390,80 @@ export component DrawerHandle(label?: string = "Resize the drawer", ...rest: Res
     return side === "top" || side === "left" ? from - now : now - from;
   };
 
-  return (
-    <div
-      {...passed}
-      aria-label={label}
-      // The axis the drag runs along, which is the axis the snap points are
-      // measured on: a bottom sheet grows upwards, so its slider is vertical.
-      aria-orientation={vertical ? "vertical" : "horizontal"}
-      aria-valuemax={last}
-      aria-valuemin={0}
-      aria-valuenow={snapIndex}
-      // The number a reader can act on. `aria-valuenow` is an index into a list
-      // nobody outside this component has seen, and "2" says nothing.
-      aria-valuetext={`${String(Math.round((snapPoints[snapIndex] ?? 1) * 100))}%`}
-      data-dragging={dragging ? "true" : undefined}
-      onKeyDown={composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
-        if (event.key === "Home" || event.key === "End") {
-          event.preventDefault();
-          setSnapIndex(event.key === "Home" ? 0 : last);
-          return;
-        }
-        const towardsOpen = OPENS_WITH[side];
-        const towardsClosed = CLOSES_WITH[side];
-        if (event.key === towardsOpen) {
-          event.preventDefault();
-          step(true);
-          return;
-        }
-        if (event.key === towardsClosed) {
-          event.preventDefault();
-          step(false);
-        }
-      })}
-      onPointerDown={composeHandlers(rest.onPointerDown, (event: $FlowFixMe) => {
-        dragFrom.current = vertical ? event.clientY : event.clientX;
-        setDragging(true);
-        // So the drag survives the pointer leaving the handle, which it does
-        // immediately: the handle moves with the drawer.
-        event.currentTarget?.setPointerCapture?.(event.pointerId);
-      })}
-      onPointerMove={composeHandlers(rest.onPointerMove, (event: $FlowFixMe) => {
-        const body = bodyRef.current;
-        if (dragFrom.current == null || body == null) {
-          return;
-        }
-        // Only away from the edge: dragging a drawer *past* fully open would
-        // otherwise lift it off the edge it is attached to.
-        body.style.setProperty("--uf-drawer-drag", `${String(Math.max(0, travelled(event)))}px`);
-      })}
-      onPointerUp={composeHandlers(rest.onPointerUp, (event: $FlowFixMe) => {
-        const body = bodyRef.current;
-        const moved = travelled(event);
-        dragFrom.current = null;
-        setDragging(false);
-        body?.style.setProperty("--uf-drawer-drag", "0px");
-        if (body == null) {
-          return;
-        }
-        const box = body.getBoundingClientRect();
-        const size = vertical ? box.height : box.width;
-        // A zero-sized box — a document that computes no layout — must not turn
-        // every release into a dismissal.
-        if (size <= 0 || Math.abs(moved) < size * DRAG_THRESHOLD) {
-          return;
-        }
-        step(moved < 0);
-      })}
-      role="slider"
-      // A drag handle that is not in the tab sequence is the WCAG 2.1.1
-      // failure this part exists to avoid.
-      tabIndex={0}
-    />
-  );
+  const props = withProps(passed, {
+    "aria-label": label,
+    // The axis the drag runs along, which is the axis the snap points are
+    // measured on: a bottom sheet grows upwards, so its slider is vertical.
+    "aria-orientation": vertical ? "vertical" : "horizontal",
+    "aria-valuemax": last,
+    "aria-valuemin": 0,
+    "aria-valuenow": snapIndex,
+    // The number a reader can act on. `aria-valuenow` is an index into a list
+    // nobody outside this component has seen, and "2" says nothing.
+    "aria-valuetext": `${String(Math.round((snapPoints[snapIndex] ?? 1) * 100))}%`,
+    "data-dragging": dragging ? "true" : undefined,
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
+      if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        setSnapIndex(event.key === "Home" ? 0 : last);
+        return;
+      }
+      const towardsOpen = OPENS_WITH[side];
+      const towardsClosed = CLOSES_WITH[side];
+      if (event.key === towardsOpen) {
+        event.preventDefault();
+        step(true);
+        return;
+      }
+      if (event.key === towardsClosed) {
+        event.preventDefault();
+        step(false);
+      }
+    }),
+    onPointerDown: composeHandlers(rest.onPointerDown, (event: $FlowFixMe) => {
+      dragFrom.current = vertical ? event.clientY : event.clientX;
+      setDragging(true);
+      // So the drag survives the pointer leaving the handle, which it does
+      // immediately: the handle moves with the drawer.
+      event.currentTarget?.setPointerCapture?.(event.pointerId);
+    }),
+    onPointerMove: composeHandlers(rest.onPointerMove, (event: $FlowFixMe) => {
+      const body = bodyRef.current;
+      if (dragFrom.current == null || body == null) {
+        return;
+      }
+      // Only away from the edge: dragging a drawer *past* fully open would
+      // otherwise lift it off the edge it is attached to.
+      body.style.setProperty("--uf-drawer-drag", `${String(Math.max(0, travelled(event)))}px`);
+    }),
+    onPointerUp: composeHandlers(rest.onPointerUp, (event: $FlowFixMe) => {
+      const body = bodyRef.current;
+      const moved = travelled(event);
+      dragFrom.current = null;
+      setDragging(false);
+      body?.style.setProperty("--uf-drawer-drag", "0px");
+      if (body == null) {
+        return;
+      }
+      const box = body.getBoundingClientRect();
+      const size = vertical ? box.height : box.width;
+      // A zero-sized box — a document that computes no layout — must not turn
+      // every release into a dismissal.
+      if (size <= 0 || Math.abs(moved) < size * DRAG_THRESHOLD) {
+        return;
+      }
+      step(moved < 0);
+    }),
+    role: "slider",
+    // A drag handle that is not in the tab sequence is the WCAG 2.1.1
+    // failure this part exists to avoid.
+    tabIndex: 0,
+  });
+
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
 }
 
 /**

package/field.js

@@ -96,7 +96,7 @@
 import * as React from "@uniflowed/react";
 import { createContext, useContext, useEffect, useId, useMemo, useState } from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
 import { withProps } from "./internal/merge-props.js";
 
 /**
@@ -129,6 +129,7 @@ export type FieldSource = {|
   readonly invalid: boolean,
   readonly required: boolean,
   readonly disabled: boolean,
+  readonly busy: boolean,
   /** What is wrong, or null while the field is valid. */
   readonly message: string | null,
   readonly control: Rest,
@@ -141,14 +142,17 @@ type FieldState = {|
   readonly controlId: string,
   readonly labelId: string,
   readonly descriptionId: string,
+  readonly statusId: string,
   readonly errorId: string,
   readonly invalid: boolean,
   readonly required: boolean,
+  readonly busy: boolean,
   readonly group: boolean,
   readonly message: string | null,
   readonly control: Rest,
   readonly describedBy: string | void,
   readonly registerDescription: (present: boolean) => void,
+  readonly registerStatus: (present: boolean) => void,
   readonly registerError: (present: boolean) => void,
 |};
 
@@ -187,26 +191,32 @@ export component FieldRoot(
   children: React.Node,
   invalid?: boolean = false,
   required?: boolean = false,
+  busy?: boolean = false,
   field?: FieldSource,
   group?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const base = useId();
   const [hasDescription, setHasDescription] = useState(false);
+  const [hasStatus, setHasStatus] = useState(false);
   const [hasError, setHasError] = useState(false);
   const sourceInvalid = field?.invalid ?? false;
   const sourceRequired = field?.required ?? false;
+  const sourceBusy = field?.busy ?? false;
   const message = field?.message ?? null;
   const control = field?.control ?? NO_CONTROL;
 
   const state = useMemo(() => {
     const descriptionId = `${base}-description`;
+    const statusId = `${base}-status`;
     const errorId = `${base}-error`;
     const wrong = invalid || sourceInvalid;
     // Only ids that are in the document. `aria-describedby` naming a missing
     // element makes a screen reader announce nothing rather than skipping it.
     const described = [
       hasDescription ? descriptionId : null,
+      hasStatus ? statusId : null,
       wrong && hasError ? errorId : null,
     ].filter(Boolean);
 
@@ -214,14 +224,17 @@ export component FieldRoot(
       controlId: `${base}-control`,
       labelId: `${base}-label`,
       descriptionId,
+      statusId,
       errorId,
       invalid: wrong,
       required: required || sourceRequired,
+      busy: busy || sourceBusy,
       group,
       message,
       control,
       describedBy: described.length === 0 ? undefined : described.join(" "),
       registerDescription: setHasDescription,
+      registerStatus: setHasStatus,
       registerError: setHasError,
     };
   }, [
@@ -230,27 +243,31 @@ export component FieldRoot(
     sourceInvalid,
     required,
     sourceRequired,
+    busy,
+    sourceBusy,
     group,
     message,
     control,
     hasDescription,
+    hasStatus,
     hasError,
   ]);
 
+  const props = withProps(rest, {
+    // A group names itself, describes itself and reports its own validity,
+    // because there is no one control inside it to carry any of the three.
+    // See the module header.
+    "aria-busy": group && state.busy ? "true" : undefined,
+    "aria-describedby": group ? state.describedBy : undefined,
+    "aria-invalid": group && state.invalid ? "true" : undefined,
+    "aria-labelledby": group ? state.labelId : undefined,
+    children,
+    role: group ? "group" : undefined,
+  });
+
   return (
     <FieldContext.Provider value={state}>
-      <div
-        {...rest}
-        // A group names itself, describes itself and reports its own validity,
-        // because there is no one control inside it to carry any of the three.
-        // See the module header.
-        aria-describedby={group ? state.describedBy : undefined}
-        aria-invalid={group && state.invalid ? "true" : undefined}
-        aria-labelledby={group ? state.labelId : undefined}
-        role={group ? "group" : undefined}
-      >
-        {children}
-      </div>
+      {render != null ? render(props) : <div {...props} />}
     </FieldContext.Provider>
   );
 }
@@ -262,22 +279,16 @@ export component FieldRoot(
  * `<label for>` naming something that is not a form control is ignored by every
  * browser, and ignored silently. The module header says more.
  */
-export component FieldLabel(children: React.Node, ...rest: Rest) {
+export component FieldLabel(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const field = useField("Field.Label");
   // `rest` first: a caller `id` here would break the relationship the control
   // points at, and it would break it silently.
   if (field.group) {
-    return (
-      <span {...rest} id={field.labelId}>
-        {children}
-      </span>
-    );
+    const props = withProps(rest, { children, id: field.labelId });
+    return render != null ? render(props) : <span {...props} />;
   }
-  return (
-    <label {...rest} htmlFor={field.controlId} id={field.labelId}>
-      {children}
-    </label>
-  );
+  const props = withProps(rest, { children, htmlFor: field.controlId, id: field.labelId });
+  return render != null ? render(props) : <label {...props} />;
 }
 
 /**
@@ -289,7 +300,7 @@ export component FieldLabel(children: React.Node, ...rest: Rest) {
  * `ref` and handlers *and* the field's attributes from one spread instead of
  * two that overwrite each other.
  */
-export component FieldControl(render: (props: Rest) => React.Node) {
+export component FieldControl(render: RenderProp) {
   const field = useField("Field.Control");
   // A group already carries the name, the description and the validity, and a
   // control repeating them makes a reader hear the error once for the set and
@@ -297,6 +308,7 @@ export component FieldControl(render: (props: Rest) => React.Node) {
   const own: Rest = field.group
     ? { "aria-required": field.required ? "true" : undefined }
     : {
+        "aria-busy": field.busy ? "true" : undefined,
         id: field.controlId,
         "aria-labelledby": field.labelId,
         "aria-describedby": field.describedBy,
@@ -307,7 +319,7 @@ export component FieldControl(render: (props: Rest) => React.Node) {
 }
 
 /** Help text, which the control points at while it is rendered. */
-export component FieldDescription(children: React.Node, ...rest: Rest) {
+export component FieldDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const field = useField("Field.Description");
   const register = field.registerDescription;
   useEffect(() => {
@@ -315,11 +327,32 @@ export component FieldDescription(children: React.Node, ...rest: Rest) {
     return () => register(false);
   }, [register]);
 
-  return (
-    <p {...rest} id={field.descriptionId}>
-      {children}
-    </p>
-  );
+  const props = withProps(rest, { children, id: field.descriptionId });
+  return render != null ? render(props) : <p {...props} />;
+}
+
+/**
+ * Non-error feedback for the field.
+ *
+ * A polite live region has to exist before the text changes. So unlike
+ * `Field.Error`, this part stays in the document even while it is empty; the
+ * control points at it only while the caller rendered the part.
+ */
+export component FieldStatus(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+  const field = useField("Field.Status");
+  const register = field.registerStatus;
+  useEffect(() => {
+    register(true);
+    return () => register(false);
+  }, [register]);
+
+  const props = withProps(rest, {
+    "aria-live": "polite",
+    children: children ?? "",
+    id: field.statusId,
+    role: "status",
+  });
+  return render != null ? render(props) : <p {...props} />;
 }
 
 /**
@@ -334,7 +367,7 @@ export component FieldDescription(children: React.Node, ...rest: Rest) {
  * store does not need the caller to reach back into `formState.errors` for a
  * string the source is already carrying.
  */
-export component FieldError(children?: React.Node, ...rest: Rest) {
+export component FieldError(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const field = useField("Field.Error");
   const register = field.registerError;
   useEffect(() => {
@@ -345,9 +378,10 @@ export component FieldError(children?: React.Node, ...rest: Rest) {
   if (!field.invalid) {
     return null;
   }
-  return (
-    <p {...rest} id={field.errorId} role="alert">
-      {children ?? field.message}
-    </p>
-  );
+  const props = withProps(rest, {
+    children: children ?? field.message,
+    id: field.errorId,
+    role: "alert",
+  });
+  return render != null ? render(props) : <p {...props} />;
 }

package/hover-card.js

@@ -45,7 +45,7 @@ import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
 import type { Align, LogicalSide } from "./internal/anchor.js";
 import type { HoverIntent } from "./internal/hover-intent.js";
-import type { Rest } from "./internal/merge-props.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
 import { composeRefs, withProps, withoutComposed } from "./internal/merge-props.js";
 import {
   DEFAULT_CLOSE_DELAY,
@@ -127,11 +127,7 @@ export component HoverCardRoot(
  * reachable by keyboard, and `useFocusableTrigger` refuses anything else —
  * a hover card on a `<span>` is one a keyboard reader can never see.
  */
-export component HoverCardTrigger(
-  children?: React.Node,
-  render?: (props: Rest) => React.Node,
-  ...rest: Rest
-) {
+export component HoverCardTrigger(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const card = useHoverCard("HoverCard.Trigger");
   const { closeDelay, dismissed, intent, openDelay, triggerRef } = card;
   useFocusableTrigger(triggerRef, "HoverCard.Trigger");
@@ -187,15 +183,12 @@ export component HoverCardTrigger(
     triggerRef.current = element;
   });
 
+  const props = withProps(withoutComposed(rest, ["ref"]), { children, ref: attach });
+
   if (render != null) {
-    return render(withProps(withoutComposed(rest, ["ref"]), { ref: attach }));
+    return render(props);
   }
-
-  return (
-    <button {...withoutComposed(rest, ["ref"])} ref={attach} type="button">
-      {children}
-    </button>
-  );
+  return <button {...props} type="button" />;
 }
 
 /**
@@ -213,6 +206,7 @@ export component HoverCardBody(
   alignOffset?: number = 0,
   avoidCollisions?: boolean = true,
   collisionPadding?: number = 0,
+  render?: RenderProp,
   side?: LogicalSide = "bottom",
   sideOffset?: number = 0,
   ...rest: Rest
@@ -317,18 +311,20 @@ export component HoverCardBody(
     return null;
   }
 
-  return (
-    <div
-      {...withoutComposed(rest, ["ref"])}
-      data-align={anchored.align}
-      data-side={anchored.side}
-      data-state="open"
-      id={`${card.base}-body`}
-      ref={composeRefs(rest.ref, (element) => {
-        bodyRef.current = element;
-      })}
-    >
-      {children}
-    </div>
-  );
+  const props = withProps(withoutComposed(rest, ["ref"]), {
+    children,
+    "data-align": anchored.align,
+    "data-side": anchored.side,
+    "data-state": "open",
+    id: `${card.base}-body`,
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      bodyRef.current = element;
+    }),
+  });
+
+  if (render != null) {
+    return render(props);
+  }
+
+  return <div {...props} />;
 }