@uniflowed/ui 0.0.0-alpha.9 → 0.1.0

package/toggle.js

@@ -28,8 +28,9 @@
 //
 // Because a toggle button is a button, and a button activates on both. That is
 // the same reasoning `switch.js` gives for `Enter`, and the opposite of
-// `checkbox.js`, which leaves `Enter` alone because a checkbox is something a
-// reader answers on their way to submitting a form.
+// `checkbox.js`, where `Enter` submits the form rather than touching the
+// control — because a checkbox is something a reader answers on their way to
+// submitting a form, and that is what the native one does with the key.
 //
 // # It is `disabled`, not `aria-disabled`
 //
@@ -43,49 +44,62 @@
 
 import * as React from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
-import { composeHandlers, withoutComposed } from "./internal/merge-props.js";
+import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
+import { composeHandlers, withProps, withoutComposed } from "./internal/merge-props.js";
 import { useControlled } from "./internal/controlled-state.js";
 
-/** A button whose state stays applied: pressed or not. */
+/**
+ * A button whose state stays applied: pressed or not.
+ *
+ * `render` is the escape hatch. A caller-rendered element gets `role="button"`
+ * because it may be a link or a `div`; the native button branch keeps the role
+ * implicit and only adds `type="button"`, which is true of the element rather
+ * than of the toggle behaviour.
+ */
 export component Toggle(
   pressed?: boolean,
   defaultPressed?: boolean = false,
   onPressedChange?: (pressed: boolean) => void,
   disabled?: boolean = false,
   children?: React.Node,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const [on, setOn] = useControlled(pressed, defaultPressed, onPressedChange);
   const passed = withoutComposed(rest, ["onClick", "onKeyDown"]);
+  const semantics = {
+    "aria-pressed": on ? "true" : "false",
+    children,
+    disabled,
+    onClick: composeHandlers(rest.onClick, (_event: PartEvent) => {
+      if (!disabled) {
+        setOn(!on);
+      }
+    }),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      if (disabled || (event.key !== " " && event.key !== "Enter")) {
+        return;
+      }
+      // Preventing the default stops `Space` scrolling the page, and stops
+      // the browser's own click arriving after this handler and pressing the
+      // button a second time — back to where it started, which reads as the
+      // key having done nothing at all.
+      event.preventDefault();
+      setOn(!on);
+    }),
+  };
+
+  if (render != null) {
+    return render(withProps(passed, { ...semantics, role: "button" }));
+  }
 
   return (
     <button
-      {...passed}
+      {...withProps(passed, semantics)}
       // No `role`: this *is* a button, and `aria-pressed` is what makes it a
       // toggle one. Adding `role="button"` to a `<button>` would be noise, and
       // adding any other role would be a lie about what pressing it does.
-      aria-pressed={on ? "true" : "false"}
-      disabled={disabled}
-      onClick={composeHandlers(rest.onClick, () => {
-        if (!disabled) {
-          setOn(!on);
-        }
-      })}
-      onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-        if (disabled || (event.key !== " " && event.key !== "Enter")) {
-          return;
-        }
-        // Preventing the default stops `Space` scrolling the page, and stops
-        // the browser's own click arriving after this handler and pressing the
-        // button a second time — back to where it started, which reads as the
-        // key having done nothing at all.
-        event.preventDefault();
-        setOn(!on);
-      })}
       type="button"
-    >
-      {children}
-    </button>
+    />
   );
 }

package/tooltip.js

@@ -73,9 +73,9 @@ import { createContext, useContext, useEffect, useId, useMemo, useRef } from "@u
 import { useEventListener } from "@uniflowed/hooks/dom";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
-import type { Align, Side } from "./internal/anchor.js";
+import type { Align, LogicalSide } from "./internal/anchor.js";
 import type { DelayGroup, 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,
@@ -89,7 +89,7 @@ import {
 import { useAnchor } from "./internal/anchor.js";
 import { useControlled } from "./internal/controlled-state.js";
 
-export type { Align, Side } from "./internal/anchor.js";
+export type { Align, LogicalSide, Side } from "./internal/anchor.js";
 
 /** What a `Tooltip.Provider` shares with the tooltips inside it. */
 type TooltipScope = {|
@@ -126,7 +126,7 @@ type TooltipState = {|
    * cannot be closed. It is cleared when the reader leaves the trigger, so
    * coming back opens it again.
    */
-  readonly dismissed: { current: boolean },
+  readonly dismissedRef: { current: boolean },
 |};
 
 const TooltipContext: React.Context<TooltipState | null> = createContext(null);
@@ -180,7 +180,7 @@ export component TooltipRoot(
   const scope = useContext(TooltipScopeContext);
   const [isOpen, setOpen] = useControlled(open, defaultOpen, onOpenChange);
   const triggerRef = useRef<HTMLElement | null>(null);
-  const dismissed = useRef(false);
+  const dismissedRef = useRef(false);
   const intent = useHoverIntent(setOpen);
   const own = openDelay ?? scope?.delayDuration ?? DEFAULT_OPEN_DELAY;
   const group = scope?.group;
@@ -217,7 +217,7 @@ export component TooltipRoot(
     () => ({
       base,
       closeDelay,
-      dismissed,
+      dismissedRef,
       intent,
       open: isOpen,
       openDelay: () => group?.delayFor(own) ?? own,
@@ -243,25 +243,21 @@ export component TooltipRoot(
  * `render` function that forgets to spread something still gets a working
  * tooltip; see the module header.
  */
-export component TooltipTrigger(
-  children?: React.Node,
-  render?: (props: Rest) => React.Node,
-  ...rest: Rest
-) {
+export component TooltipTrigger(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const tooltip = useTooltip("Tooltip.Trigger");
-  const { closeDelay, dismissed, intent, openDelay, setOpen, triggerRef } = tooltip;
+  const { closeDelay, dismissedRef, intent, openDelay, setOpen, triggerRef } = tooltip;
   useFocusableTrigger(triggerRef, "Tooltip.Trigger");
 
   // Whether the pointer put focus here. A click focuses the button, and
   // reopening the tooltip the click just dismissed would put it back over the
   // thing the reader pressed — so a focus that arrived with a press opens
   // nothing, and the next one, which is the keyboard's, does.
-  const pressed = useRef(false);
+  const pressedRef = useRef(false);
 
   useEventListener(triggerRef, "pointerenter", (event: $FlowFixMe) => {
     // A tap is not a hover. See the module header: opening here is what eats
     // the tap the control was there to receive.
-    if (event.pointerType === "touch" || dismissed.current) {
+    if (event.pointerType === "touch" || dismissedRef.current) {
       return;
     }
     intent.openAfter(openDelay());
@@ -269,57 +265,50 @@ export component TooltipTrigger(
   useEventListener(triggerRef, "pointerleave", () => {
     // Leaving is what makes a dismissal stop applying: coming back is a fresh
     // gesture and deserves a fresh answer.
-    dismissed.current = false;
+    dismissedRef.current = false;
     intent.closeAfter(closeDelay);
   });
   useEventListener(triggerRef, "pointerdown", () => {
-    pressed.current = true;
+    pressedRef.current = true;
     intent.cancel();
     setOpen(false);
   });
   useEventListener(triggerRef, "focusin", () => {
-    if (pressed.current) {
-      pressed.current = false;
+    if (pressedRef.current) {
+      pressedRef.current = false;
       return;
     }
-    if (dismissed.current) {
+    if (dismissedRef.current) {
       return;
     }
     // No delay: the reader has already said what they want by arriving here.
     intent.openAfter(0);
   });
   useEventListener(triggerRef, "focusout", () => {
-    pressed.current = false;
-    dismissed.current = false;
+    pressedRef.current = false;
+    dismissedRef.current = false;
     intent.closeAfter(0);
   });
 
   // Annotated because this one is not written inside a `ref={...}`, and there
   // is nothing else here for Flow to infer the element's type from.
+  // React calls callback refs during commit; pointer and focus handlers read it later.
+  // uf-lint-disable-next-line react-compiler/refs
   const attach = composeRefs(rest.ref, (element: HTMLElement | null) => {
     triggerRef.current = element;
   });
   // Only while it is there. `aria-describedby` pointing at an element that has
   // been removed is the dangling reference this package keeps coming back to.
-  const ours = {
+  const props = withProps(withoutComposed(rest, ["ref"]), {
     "aria-describedby": tooltip.open ? `${tooltip.base}-body` : undefined,
+    children,
     ref: attach,
-  };
+  });
 
   if (render != null) {
-    return render(withProps(withoutComposed(rest, ["ref"]), ours));
+    return render(props);
   }
-
-  return (
-    <button
-      {...withoutComposed(rest, ["ref"])}
-      aria-describedby={ours["aria-describedby"]}
-      ref={attach}
-      type="button"
-    >
-      {children}
-    </button>
-  );
+  return <button {...props} type="button" />;
 }
 
 /**
@@ -337,19 +326,20 @@ export component TooltipBody(
   alignOffset?: number = 0,
   avoidCollisions?: boolean = true,
   collisionPadding?: number = 0,
-  side?: Side = "top",
+  render?: RenderProp,
+  side?: LogicalSide = "top",
   sideOffset?: number = 0,
   ...rest: Rest
 ) {
   const tooltip = useTooltip("Tooltip.Body");
-  const { closeDelay, intent, open, triggerRef } = tooltip;
+  const { closeDelay, dismissedRef, intent, open, triggerRef } = tooltip;
   const bodyRef = useRef<HTMLElement | null>(null);
   const close = useStableCallback(() => {
     // `Escape` dismisses it *and* keeps it dismissed while the reader is still
     // on the trigger. Without the flag the pointer that is still resting there
     // — or, for a hover card, the focus it hands back — reopens it at once,
     // and the key does nothing a reader can see.
-    tooltip.dismissed.current = true;
+    dismissedRef.current = true;
     intent.cancel();
     tooltip.setOpen(false);
   });
@@ -391,21 +381,24 @@ export component TooltipBody(
     return null;
   }
 
-  return (
-    <div
-      {...withoutComposed(rest, ["ref"])}
-      data-align={anchored.align}
-      data-side={anchored.side}
-      data-state="open"
-      id={`${tooltip.base}-body`}
-      ref={composeRefs(rest.ref, (element) => {
-        bodyRef.current = element;
-      })}
-      role="tooltip"
-      // No `tabIndex`. A tooltip the keyboard can land in is a stop the reader
-      // did not ask for and cannot leave the way they expect.
-    >
-      {children}
-    </div>
-  );
+  const props = withProps(withoutComposed(rest, ["ref"]), {
+    children,
+    "data-align": anchored.align,
+    "data-side": anchored.side,
+    "data-state": "open",
+    id: `${tooltip.base}-body`,
+    // React calls callback refs during commit; placement effects read it later.
+    // uf-lint-disable-next-line react-compiler/refs
+    ref: composeRefs(rest.ref, (element) => {
+      bodyRef.current = element;
+    }),
+    role: "tooltip",
+    // No `tabIndex`. A tooltip the keyboard can land in is a stop the reader
+    // did not ask for and cannot leave the way they expect.
+  });
+
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
 }

package/tree.js

@@ -0,0 +1,8 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { CollectionRoot } from "./internal/collection.js";
+import type { CollectionProps } from "./internal/collection.js";
+export component Tree(...props: CollectionProps) {
+  return <CollectionRoot options={props} kind="tree" />;
+}