@uniflowed/ui 0.0.0-alpha.40 → 0.0.0-alpha.42

package/toast.js

@@ -356,26 +356,26 @@ export component ToastRegion(
   ...rest: Rest
 ) {
   const queued = useSyncExternalStore(subscribeToQueue, readQueue, readQueue);
-  const region = useElementRef<HTMLElement>();
+  const regionRef = useElementRef<HTMLElement>();
   // Where `F6` came from, so pressing it again gives focus back.
-  const cameFrom = useRef<HTMLElement | null>(null);
+  const cameFromRef = useRef<HTMLElement | null>(null);
   const passed = withoutComposed(rest, ["ref"]);
 
   useKeyCombo(
     "f6",
     () => {
-      const element = region.current;
+      const element = regionRef.current;
       if (element == null) {
         return;
       }
       const active: $FlowFixMe = element.ownerDocument.activeElement;
       if (active != null && element.contains(active)) {
-        const back = cameFrom.current;
-        cameFrom.current = null;
+        const back = cameFromRef.current;
+        cameFromRef.current = null;
         back?.focus?.();
         return;
       }
-      cameFrom.current = active;
+      cameFromRef.current = active;
       element.focus();
     },
     // The one case that matters is a notification arriving while the reader is
@@ -400,7 +400,7 @@ export component ToastRegion(
       {...passed}
       aria-label={label}
       ref={composeRefs(rest.ref, (element) => {
-        region.current = element;
+        regionRef.current = element;
       })}
       role="region"
       // So `F6` can put focus on the region itself, including while it is
@@ -430,13 +430,13 @@ export component ToastRegion(
 export component ToastRoot(children: React.Node, ...rest: Rest) {
   const notification = useNotification("Toast.Root");
   const base = useId();
-  const element = useElementRef<HTMLElement>();
+  const elementRef = useElementRef<HTMLElement>();
   const [titled, setTitled] = useState(false);
   const [described, setDescribed] = useState(false);
   const passed = withoutComposed(rest, ["ref"]);
 
-  const hovered = useHover(element);
-  const focusInside = useFocusWithin(element);
+  const hovered = useHover(elementRef);
+  const focusInside = useFocusWithin(elementRef);
   const documentVisible = useDocumentVisible();
   const paused = hovered || focusInside || !documentVisible;
 
@@ -465,6 +465,8 @@ export component ToastRoot(children: React.Node, ...rest: Rest) {
   // A notification whose duration was changed under it — "Uploading…" with no
   // duration becoming "Uploaded" with one — starts its countdown from there.
   useEffect(() => {
+    // The timeout duration is state because render hands it to useTimeout.
+    // uf-lint-disable-next-line react-compiler/set-state-in-effect
     setLeft(duration);
     startedAt.current = Date.now();
   }, [duration]);
@@ -486,7 +488,7 @@ export component ToastRoot(children: React.Node, ...rest: Rest) {
         aria-describedby={described ? parts.descriptionId : undefined}
         aria-labelledby={titled ? parts.titleId : undefined}
         ref={composeRefs(rest.ref, (node) => {
-          element.current = node;
+          elementRef.current = node;
         })}
         role="group"
       >

package/toggle-group.js

@@ -201,6 +201,8 @@ export component ToggleGroupRoot(
       // dozen commands on the way to the one the reader wanted.
       moveOnKey(event, group, toggleSet(orientation));
     }),
+    // 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;
     }),

package/tooltip.js

@@ -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,
@@ -245,19 +245,19 @@ export component TooltipRoot(
  */
 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());
@@ -265,33 +265,35 @@ export component TooltipTrigger(children?: React.Node, render?: RenderProp, ...r
   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;
   });
@@ -330,14 +332,14 @@ export component TooltipBody(
   ...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);
   });
@@ -385,6 +387,8 @@ export component TooltipBody(
     "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;
     }),