@rivetjs/cdk 0.1.0-alpha.0 → 0.1.0-alpha.1

package/selection/selectable-collection.js

@@ -301,6 +301,9 @@ const memoOf = (owner) => {
 };
 /** scroll on the scrollable body: remember the position (restored when focus re-enters). */
 export function selectableCollectionScroll(options, e) {
+    // RA: not for a virtualized collection (the virtualizer owns its scroll position).
+    if (options.isVirtualized)
+        return;
     const r = resolve(options, e);
     const m = memoOf(r.ref ?? options);
     m.scrollTop = r.scrollRef?.scrollTop ?? 0;
@@ -347,7 +350,7 @@ export function selectableCollectionFocus(options, e) {
         else
             navigate(manager.firstSelectedKey ?? delegate.getFirstKey?.());
     }
-    else if (r.scrollRef) {
+    else if (!options.isVirtualized && r.scrollRef) {
         // Restore the scroll position to what it was before.
         r.scrollRef.scrollTop = m.scrollTop;
         r.scrollRef.scrollLeft = m.scrollLeft;
@@ -466,6 +469,37 @@ export function selectableCollectionAutoFocus(options) {
     syncFocus(options, null);
     return true;
 }
+/** useSelectableItem's focus + useSelectableCollection's scroll-into-view for the focused item element. */
+function focusItem(r, element, didAutoFocus) {
+    if (!r.shouldUseVirtualFocus) {
+        if (element.ownerDocument.activeElement !== element)
+            focusSafely(element);
+    }
+    else
+        moveVirtualFocus(element);
+    const modality = getInteractionModality();
+    if ((modality === "keyboard" || didAutoFocus) && r.scrollRef) {
+        scrollIntoView(r.scrollRef, element);
+        // Avoid scroll in iOS VO, since it may cause overlay to close.
+        if (modality !== "virtual")
+            scrollIntoViewport(element, { containingElement: r.ref });
+    }
+}
+/** Virtualized collections: focus the item of `key` after the render that adds it (a microtask, then a few frames). */
+function whenRendered(r, key, didAutoFocus) {
+    let frames = 0;
+    const attempt = () => {
+        const manager = r.manager;
+        if (untrack(() => manager.focusedKey) !== key || !untrack(() => manager.isFocused) || !r.ref)
+            return;
+        const element = getItemElement(r.ref, key);
+        if (element)
+            focusItem(r, element, didAutoFocus);
+        else if (frames++ < 3)
+            requestAnimationFrame(attempt);
+    };
+    queueMicrotask(attempt);
+}
 /**
  * react-aria's post-render effects, run after a handler changed state: move DOM (or virtual) focus
  * to the focused item, scroll it into view (keyboard modality / after auto focus), and focus the
@@ -480,22 +514,13 @@ export function syncFocus(options, previousKey, event) {
     const changed = focusedKey !== previousKey;
     if (isFocused && focusedKey != null && (changed || m.didAutoFocus) && r.ref) {
         const element = getItemElement(r.ref, focusedKey);
-        if (element) {
-            // useSelectableItem: focus the item that became the focused key.
-            if (!r.shouldUseVirtualFocus) {
-                if (element.ownerDocument.activeElement !== element)
-                    focusSafely(element);
-            }
-            else
-                moveVirtualFocus(element);
-            const modality = getInteractionModality();
-            if ((modality === "keyboard" || m.didAutoFocus) && r.scrollRef) {
-                scrollIntoView(r.scrollRef, element);
-                // Avoid scroll in iOS VO, since it may cause overlay to close.
-                if (modality !== "virtual")
-                    scrollIntoViewport(element, { containingElement: r.ref });
-            }
-        }
+        const didAutoFocus = m.didAutoFocus;
+        if (element)
+            focusItem(r, element, didAutoFocus);
+        // Virtualized: the item renders once the virtualizer persists the new focused key (RA: useSelectableItem's
+        // effect after that render) — focus and scroll it in when it appears.
+        else if (options.isVirtualized)
+            whenRendered(r, focusedKey, didAutoFocus);
     }
     // If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
     if (!r.shouldUseVirtualFocus && isFocused && focusedKey == null && previousKey != null && r.ref)

package/sidebar/index.jsx

@@ -36,7 +36,7 @@
 // Deviations: `data-active` / `data-show-on-hover` are `"true"` or absent (React writes `"false"` too);
 // `SidebarMenuAction` writes `data-show-on-hover` and `SidebarMenuButton` `data-variant` (upstream: Tailwind
 // classes) so CSS can key on them; the desktop root stays in the DOM on mobile (empty, CSS-hidden) so `SidebarInset`'s sibling selectors keep working.
-import { createContext, provide, useContext } from "@rivetjs/reactivity";
+import { createContext, provide, signal, useContext } from "@rivetjs/reactivity";
 import { Show, clientEffect, clientEvent, ref as createRef } from "@rivetjs/runtime/dom";
 import { resumableContext } from "@rivetjs/runtime/resume-format";
 import { visuallyHidden } from "../a11y/index.js";
@@ -548,12 +548,13 @@ export function SidebarMenuBadge(props) {
 /** A loading placeholder for a menu item. */
 export function SidebarMenuSkeleton(props) {
     const { showIcon = false, iconClass, textClass, class: cls, style, render, ref, children: _children, ...rest } = props;
-    // Random width between 50 to 90%.
-    const width = `${Math.floor(Math.random() * 40) + 50}%`;
+    // Random width between 50 to 90%. Rivet: state (upstream `useState`), so the server's pick is the page's: a resumed or
+    // adopted skeleton keeps the width the markup shows.
+    const width = signal(`${Math.floor(Math.random() * 40) + 50}%`);
     const rp = renderProps({ class: cls, values: NONE, defaultClassName: "rv-SidebarMenuSkeleton" });
     const parts = () => (<>
       {showIcon ? <div class={iconClass ?? "rv-SidebarMenuSkeleton-icon"} data-sidebar="menu-skeleton-icon"/> : null}
-      <div class={textClass ?? "rv-SidebarMenuSkeleton-text"} data-sidebar="menu-skeleton-text" style={{ "--skeleton-width": width }}/>
+      <div class={textClass ?? "rv-SidebarMenuSkeleton-text"} data-sidebar="menu-skeleton-text" style={{ "--skeleton-width": width() }}/>
     </>);
     if (render)
         return render({ ...rest, ref, "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", class: () => rp.class(), style, children: parts }, undefined);

package/state/menu.d.ts

@@ -2,6 +2,7 @@ import { type Signal } from "@rivetjs/reactivity";
 import { type FocusStrategy, type MultipleSelectionState } from "../_adapters/collections.js";
 import type { PressEvent } from "../interactions/press.jsx";
 import type { HoverEvent } from "../interactions/hover.jsx";
+import type { VirtualCollection } from "../_adapters/selection.js";
 import { type OverlayTriggerProps, type OverlayTriggerState } from "./overlays.js";
 import { type Key, type ListProps, type ListState, type Selection, type SelectionMode } from "./list.js";
 export type { Key, Selection, SelectionMode, FocusStrategy };
@@ -134,6 +135,8 @@ export declare function createMenuState(props: MenuProps, context?: {
     submenuTrigger?: SubmenuTriggerState;
     parentId?: string;
     id?: string;
+    /** Rivet: a Menu inside a `CollectionVirtualizer` (its built collection + the layout delegate). */
+    virtual?: VirtualCollection;
 }): MenuState;
 /** Register a rendered MenuItem's callbacks / disabled flag (RAC: the collection node's props). */
 export declare function registerMenuItem(state: MenuState, key: Key, item: MenuItemCallbacks & {

package/state/menu.js

@@ -132,6 +132,7 @@ export function createMenuState(props, context = {}) {
             delays: {},
             groups: {},
             itemCount: signal(0),
+            ...(context.virtual ? { virtual: context.virtual } : {}),
         };
     });
 }