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

package/menubar.js

@@ -66,8 +66,13 @@ import {
   useState,
 } 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,
+  withProps,
+  withoutComposed,
+} from "./internal/merge-props.js";
 import type { RovingSet } from "./internal/roving-focus.js";
 import {
   directionOf,
@@ -123,7 +128,7 @@ hook useMenubar(part: string): MenubarState {
  * a page with an application menubar and a formatting toolbar has two, and
  * "menu bar" twice tells a reader nothing about which is which.
  */
-export component MenubarRoot(children: renders* MenubarMenu, ...rest: Rest) {
+export component MenubarRoot(children: renders* MenubarMenu, render?: RenderProp, ...rest: Rest) {
   const barRef = useRef<HTMLElement | null>(null);
   const [open, setOpenValue] = useState<string | null>(null);
   const [active, setActive] = useState<string | null>(null);
@@ -142,57 +147,55 @@ export component MenubarRoot(children: renders* MenubarMenu, ...rest: Rest) {
     () => ({ open, setOpen, active, setActive, firstId }),
     [open, setOpen, active, firstId],
   );
-  const passed = withoutComposed(rest, ["onKeyDown", "ref"]);
+  const props = withProps(withoutComposed(rest, ["onKeyDown", "ref"]), {
+    "aria-orientation": "horizontal",
+    children,
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      const bar: $FlowFixMe = event.currentTarget;
+      const movement = movementFor(event.key, "horizontal", directionOf(bar));
+      if (movement == null) {
+        return;
+      }
+      const triggers = itemsOf(bar, TRIGGERS.item, TRIGGERS.owner);
+      // With a menu open, focus is on one of *its* items rather than on a
+      // trigger, so "where am I in the bar" is the expanded trigger. This
+      // is the whole of walking File → Edit → View without pressing Escape.
+      const focused = indexOfActive(triggers, bar.ownerDocument?.activeElement);
+      const at =
+        focused >= 0
+          ? focused
+          : triggers.findIndex((each) => each.getAttribute("aria-expanded") === "true");
+      const next = moveTo(triggers, at, movement, TRIGGERS.wrap, TRIGGERS.skipDisabled);
+      if (next == null) {
+        return;
+      }
+      // Claimed before focus moves, or the browser scrolls the page under
+      // the trigger that has just taken it; `moveOnKey` says the same.
+      event.preventDefault();
+      event.stopPropagation();
+      const value = next.getAttribute("data-uf-menubar-value");
+      if (open != null && value != null) {
+        // Swap which menu is showing. Focus lands on the new menu's first
+        // item through `Menu.Body`'s own opening effect, so nothing here
+        // moves it: focusing the trigger as well would be two focus moves
+        // in one commit and the reader would see the second.
+        setOpen(value);
+        return;
+      }
+      next.focus();
+      if (value != null) {
+        setActive(value);
+      }
+    }),
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      barRef.current = element;
+    }),
+    role: "menubar",
+  });
 
   return (
     <MenubarContext.Provider value={state}>
-      <div
-        {...passed}
-        aria-orientation="horizontal"
-        onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-          const bar: $FlowFixMe = event.currentTarget;
-          const movement = movementFor(event.key, "horizontal", directionOf(bar));
-          if (movement == null) {
-            return;
-          }
-          const triggers = itemsOf(bar, TRIGGERS.item, TRIGGERS.owner);
-          // With a menu open, focus is on one of *its* items rather than on a
-          // trigger, so "where am I in the bar" is the expanded trigger. This
-          // is the whole of walking File → Edit → View without pressing Escape.
-          const focused = indexOfActive(triggers, bar.ownerDocument?.activeElement);
-          const at =
-            focused >= 0
-              ? focused
-              : triggers.findIndex((each) => each.getAttribute("aria-expanded") === "true");
-          const next = moveTo(triggers, at, movement, TRIGGERS.wrap, TRIGGERS.skipDisabled);
-          if (next == null) {
-            return;
-          }
-          // Claimed before focus moves, or the browser scrolls the page under
-          // the trigger that has just taken it; `moveOnKey` says the same.
-          event.preventDefault();
-          event.stopPropagation();
-          const value = next.getAttribute("data-uf-menubar-value");
-          if (open != null && value != null) {
-            // Swap which menu is showing. Focus lands on the new menu's first
-            // item through `Menu.Body`'s own opening effect, so nothing here
-            // moves it: focusing the trigger as well would be two focus moves
-            // in one commit and the reader would see the second.
-            setOpen(value);
-            return;
-          }
-          next.focus();
-          if (value != null) {
-            setActive(value);
-          }
-        })}
-        ref={composeRefs(rest.ref, (element) => {
-          barRef.current = element;
-        })}
-        role="menubar"
-      >
-        {children}
-      </div>
+      {render == null ? <div {...props} /> : render(props)}
     </MenubarContext.Provider>
   );
 }
@@ -232,54 +235,53 @@ export component MenubarMenu(children: React.Node, value: string) {
  * menubar — a reader is told "File, menu item, has popup, 1 of 3" — and it is
  * what makes the bar's arrow keys agree with what they were told is in it.
  */
-export component MenubarTrigger(children: React.Node, ...rest: Rest) {
+export component MenubarTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const bar = useMenubar("Menubar.Trigger");
   const menu = useMenu("Menubar.Trigger");
   const value = useContext(MenubarMenuContext);
   if (value == null) {
     throw new Error("Menubar.Trigger must be rendered inside a Menubar.Menu");
   }
-  const passed = withoutComposed(rest, ["onClick", "onFocus", "onKeyDown", "ref"]);
   const id = `${menu.base}-trigger`;
   // The bar's single tab stop. Before anything has been focused or opened it
   // belongs to the first trigger, which is a fact about the document rather
   // than about this component — `useFirstItem` reads it in the bar.
   const stop = bar.active == null ? bar.firstId === id : bar.active === value;
 
-  return (
-    <button
-      {...passed}
-      aria-controls={menu.open ? `${menu.base}-body` : undefined}
-      aria-expanded={menu.open ? "true" : "false"}
-      aria-haspopup="menu"
-      // How the bar's keyboard turns a trigger element back into the menu it
-      // opens; the module header says why this is an attribute and the rest of
-      // the bar's arithmetic is not.
-      data-uf-menubar-value={value}
-      id={id}
-      onClick={composeHandlers(rest.onClick, () => bar.setOpen(menu.open ? null : value))}
-      onFocus={composeHandlers(rest.onFocus, () => bar.setActive(value))}
-      onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-        const end = match (event.key) {
-          "ArrowDown" => "first",
-          "ArrowUp" => "last",
-          _ => null,
-        };
-        if (end == null) {
-          return;
-        }
-        event.preventDefault();
-        menu.pendingFocus.current = end;
-        bar.setOpen(value);
-      })}
-      ref={composeRefs(rest.ref, (element) => {
-        menu.triggerRef.current = element;
-      })}
-      role="menuitem"
-      tabIndex={stop ? 0 : -1}
-      type="button"
-    >
-      {children}
-    </button>
-  );
+  const props = withProps(withoutComposed(rest, ["onClick", "onFocus", "onKeyDown", "ref"]), {
+    "aria-controls": menu.open ? `${menu.base}-body` : undefined,
+    "aria-expanded": menu.open ? "true" : "false",
+    "aria-haspopup": "menu",
+    children,
+    // How the bar's keyboard turns a trigger element back into the menu it
+    // opens; the module header says why this is an attribute and the rest of
+    // the bar's arithmetic is not.
+    "data-uf-menubar-value": value,
+    id,
+    onClick: composeHandlers(rest.onClick, () => bar.setOpen(menu.open ? null : value)),
+    onFocus: composeHandlers(rest.onFocus, () => bar.setActive(value)),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      const end = match (event.key) {
+        "ArrowDown" => "first",
+        "ArrowUp" => "last",
+        _ => null,
+      };
+      if (end == null) {
+        return;
+      }
+      event.preventDefault();
+      menu.pendingFocus.current = end;
+      bar.setOpen(value);
+    }),
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      menu.triggerRef.current = element;
+    }),
+    role: "menuitem",
+    tabIndex: stop ? 0 : -1,
+  });
+
+  if (render != null) {
+    return render(props);
+  }
+  return <button {...props} type="button" />;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/ui",
-  "version": "0.0.0-alpha.18",
+  "version": "0.0.0-alpha.37",
   "description": "Headless, accessible React components whose composition Flow checks, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -11,50 +11,18 @@
     "directory": "packages/ui"
   },
   "exports": {
-    ".": "./index.js",
-    "./accordion": "./accordion.js",
-    "./alert-dialog": "./alert-dialog.js",
-    "./calendar": "./calendar.js",
-    "./carousel": "./carousel.js",
-    "./checkbox": "./checkbox.js",
-    "./collapsible": "./collapsible.js",
-    "./combobox": "./combobox.js",
-    "./context-menu": "./context-menu.js",
-    "./date-picker": "./date-picker.js",
-    "./dialog": "./dialog.js",
-    "./drawer": "./drawer.js",
-    "./field": "./field.js",
-    "./hover-card": "./hover-card.js",
-    "./input-otp": "./input-otp.js",
-    "./menu": "./menu.js",
-    "./menubar": "./menubar.js",
-    "./navigation-menu": "./navigation-menu.js",
-    "./pagination": "./pagination.js",
-    "./popover": "./popover.js",
-    "./progress": "./progress.js",
-    "./radio-group": "./radio-group.js",
-    "./resizable": "./resizable.js",
-    "./scroll-area": "./scroll-area.js",
-    "./select": "./select.js",
-    "./sheet": "./sheet.js",
-    "./sidebar": "./sidebar.js",
-    "./slider": "./slider.js",
-    "./switch": "./switch.js",
-    "./table": "./table.js",
-    "./tabs": "./tabs.js",
-    "./toast": "./toast.js",
-    "./toggle": "./toggle.js",
-    "./toggle-group": "./toggle-group.js",
-    "./tooltip": "./tooltip.js"
+    ".": "./index.js"
   },
   "files": [
     "*.js",
-    "internal"
+    "internal",
+    "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.18",
-    "@uniflowed/hooks": "0.0.0-alpha.18",
-    "@uniflowed/react": "0.0.0-alpha.18"
+    "@uniflowed/core": "0.0.0-alpha.37",
+    "@uniflowed/hooks": "0.0.0-alpha.37",
+    "@uniflowed/react": "0.0.0-alpha.37",
+    "@uniflowed/state": "0.0.0-alpha.37"
   },
   "peerDependencies": {
     "react": ">=19"

package/pagination.js

@@ -44,8 +44,8 @@
 
 import * as React from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
-import { withoutComposed } from "./internal/merge-props.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { withProps, withoutComposed } from "./internal/merge-props.js";
 
 /**
  * The pagination, as a named landmark, and the region that announces it.
@@ -62,16 +62,16 @@ export component PaginationRoot(
   page?: number | null = null,
   pageCount?: number | null = null,
   announcePage?: (page: number, pageCount: number) => string,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const message =
     page == null || pageCount == null ? "" : (announcePage ?? defaultAnnouncement)(page, pageCount);
+  const props = withProps(rest, { "aria-label": label, children });
 
   return (
     <>
-      <nav {...rest} aria-label={label}>
-        {children}
-      </nav>
+      {render == null ? <nav {...props} /> : render(withProps(props, { role: "navigation" }))}
       {/*
         Beside the navigation rather than inside it, so a reader walking the
         landmark hears the links and not a sentence about them — and mounted
@@ -93,9 +93,14 @@ export component PaginationRoot(
  */
 export component PaginationContent(
   children: renders* (PaginationItem | PaginationPrevious | PaginationNext),
+  render?: RenderProp,
   ...rest: Rest
 ) {
-  return <ul {...rest}>{children}</ul>;
+  const props = withProps(rest, { children });
+  if (render != null) {
+    return render(withProps(props, { role: "list" }));
+  }
+  return <ul {...props} />;
 }
 
 /**
@@ -108,10 +113,11 @@ export component PaginationItem(
   children: React.Node,
   current?: boolean = false,
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   return (
-    <PageLink current={current} disabled={disabled} rest={rest}>
+    <PageLink current={current} disabled={disabled} render={render} rest={rest}>
       {children}
     </PageLink>
   );
@@ -129,10 +135,11 @@ export component PaginationPrevious(
   children?: React.Node,
   label?: string = "Previous page",
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   return (
-    <PageLink disabled={disabled} label={label} rest={rest}>
+    <PageLink disabled={disabled} label={label} render={render} rest={rest}>
       {children}
     </PageLink>
   );
@@ -143,10 +150,11 @@ export component PaginationNext(
   children?: React.Node,
   label?: string = "Next page",
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   return (
-    <PageLink disabled={disabled} label={label} rest={rest}>
+    <PageLink disabled={disabled} label={label} render={render} rest={rest}>
       {children}
     </PageLink>
   );
@@ -174,19 +182,23 @@ component PageLink(
   current?: boolean = false,
   disabled?: boolean = false,
   label?: string,
+  render?: RenderProp,
 ) {
   const passed = withoutComposed(rest, disabled ? ["href"] : []);
+  const props = withProps(passed, {
+    "aria-current": current ? "page" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+    "aria-label": label,
+    children,
+  });
+
+  if (render != null) {
+    return <li>{render(withProps(props, { role: disabled ? undefined : "link" }))}</li>;
+  }
 
   return (
     <li>
-      <a
-        {...passed}
-        aria-current={current ? "page" : undefined}
-        aria-disabled={disabled ? "true" : undefined}
-        aria-label={label}
-      >
-        {children}
-      </a>
+      <a {...props} />
     </li>
   );
 }

package/popover.js

@@ -59,8 +59,13 @@ import {
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
 import type { Align, LogicalSide } from "./internal/anchor.js";
-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,
+  withProps,
+  withoutComposed,
+} from "./internal/merge-props.js";
 import { focusable } from "./internal/focus.js";
 import { useAnchor } from "./internal/anchor.js";
 import { useControlled } from "./internal/controlled-state.js";
@@ -145,30 +150,29 @@ export component PopoverRoot(
  * trigger is not "outside" for exactly this reason — closing there and letting
  * this click reopen made the press a no-op that flickered.
  */
-export component PopoverTrigger(children: React.Node, ...rest: Rest) {
+export component PopoverTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const popover = usePopover("Popover.Trigger");
   const passed = withoutComposed(rest, ["onClick", "ref"]);
   usePresence(popover.registerTrigger);
+  const props = withProps(passed, {
+    // Only while it is open: an `aria-controls` naming an element that is not
+    // in the document tells a reader there is somewhere to go and then has
+    // nowhere to send them.
+    "aria-controls": popover.open ? `${popover.base}-body` : undefined,
+    "aria-expanded": popover.open ? "true" : "false",
+    "aria-haspopup": "dialog",
+    children,
+    id: `${popover.base}-trigger`,
+    onClick: composeHandlers(rest.onClick, () => popover.setOpen(!popover.open)),
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      popover.triggerRef.current = element;
+    }),
+  });
 
-  return (
-    <button
-      {...passed}
-      // Only while it is open: an `aria-controls` naming an element that is not
-      // in the document tells a reader there is somewhere to go and then has
-      // nowhere to send them.
-      aria-controls={popover.open ? `${popover.base}-body` : undefined}
-      aria-expanded={popover.open ? "true" : "false"}
-      aria-haspopup="dialog"
-      id={`${popover.base}-trigger`}
-      onClick={composeHandlers(rest.onClick, () => popover.setOpen(!popover.open))}
-      ref={composeRefs(rest.ref, (element) => {
-        popover.triggerRef.current = element;
-      })}
-      type="button"
-    >
-      {children}
-    </button>
-  );
+  if (render != null) {
+    return render(props);
+  }
+  return <button {...props} type="button" />;
 }
 
 /**
@@ -196,6 +200,7 @@ export component PopoverBody(
    * not for the button that steps back a month.
    */
   initialFocus?: { current: HTMLElement | null },
+  render?: RenderProp,
   side?: LogicalSide = "bottom",
   sideOffset?: number = 0,
   ...rest: Rest
@@ -303,37 +308,36 @@ export component PopoverBody(
   // leave the popover announced as its button rather than as itself.
   const named = rest["aria-label"] != null || rest["aria-labelledby"] != null;
 
-  return (
-    <div
-      // `passed` first, then this component's semantics; see
-      // `internal/merge-props.js` for the three bugs that rule is made of.
-      {...passed}
-      aria-labelledby={named || !popover.triggered ? undefined : `${popover.base}-trigger`}
-      data-align={anchored.align}
-      data-side={anchored.side}
-      data-state="open"
-      id={`${popover.base}-body`}
-      onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-        if (event.key !== "Escape") {
-          return;
-        }
-        event.preventDefault();
-        // This popover, not the dialog around it. Two overlays nest in the
-        // DOM, so without this one Escape closed both.
-        event.stopPropagation();
-        close();
-      })}
-      ref={composeRefs(rest.ref, (element) => {
-        bodyRef.current = element;
-      })}
-      // No `aria-modal`. The page behind a popover is still available, and
-      // saying otherwise is the one lie a screen reader cannot see through.
-      role="dialog"
-      // So the popover can hold focus itself when it contains nothing
-      // focusable, and so Escape has somewhere to be heard.
-      tabIndex={-1}
-    >
-      {children}
-    </div>
-  );
+  const props = withProps(passed, {
+    "aria-labelledby": named || !popover.triggered ? undefined : `${popover.base}-trigger`,
+    children,
+    "data-align": anchored.align,
+    "data-side": anchored.side,
+    "data-state": "open",
+    id: `${popover.base}-body`,
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.preventDefault();
+      // This popover, not the dialog around it. Two overlays nest in the
+      // DOM, so without this one Escape closed both.
+      event.stopPropagation();
+      close();
+    }),
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      bodyRef.current = element;
+    }),
+    // No `aria-modal`. The page behind a popover is still available, and
+    // saying otherwise is the one lie a screen reader cannot see through.
+    role: "dialog",
+    // So the popover can hold focus itself when it contains nothing focusable,
+    // and so Escape has somewhere to be heard.
+    tabIndex: -1,
+  });
+
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
 }

package/progress.js

@@ -38,7 +38,8 @@
 
 import * as React 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";
 import { clamp } from "./internal/range.js";
 
 /**
@@ -57,6 +58,9 @@ import { clamp } from "./internal/range.js";
  * `Slider`, whose value may be its own, a progress bar's value arrived as a
  * prop, so the caller already has everything they need to size a bar with and
  * a helpful custom property would only be their own arithmetic handed back.
+ *
+ * `render` changes the element and not the accessibility contract: the
+ * progressbar role and value attributes are the props handed to the caller.
  */
 export component Progress(
   value?: number | null = null,
@@ -64,23 +68,24 @@ export component Progress(
   max?: number = 100,
   valueText?: string,
   children?: React.Node,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const known = value == null ? null : clamp(value, min, max);
+  const props = withProps(rest, {
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    // Omitted, not zeroed. `aria-valuenow="0"` tells a reader that nothing
+    // has happened; leaving it out tells them the amount is unknown, which
+    // is the true one and the one a spinner means.
+    "aria-valuenow": known ?? undefined,
+    "aria-valuetext": valueText,
+    children,
+    role: "progressbar",
+  });
 
-  return (
-    <div
-      {...rest}
-      aria-valuemax={max}
-      aria-valuemin={min}
-      // Omitted, not zeroed. `aria-valuenow="0"` tells a reader that nothing
-      // has happened; leaving it out tells them the amount is unknown, which
-      // is the true one and the one a spinner means.
-      aria-valuenow={known ?? undefined}
-      aria-valuetext={valueText}
-      role="progressbar"
-    >
-      {children}
-    </div>
-  );
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
 }