@sanity/workflow-components 0.0.0 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# @sanity/workflow-components
+
+## 0.1.0
+
+### Minor Changes
+
+- 6351232: Add reusable member, assignee, and date controls for Studio and App SDK integrations.
+
+### Patch Changes
+
+- 775fb3c: Move focus into an opened date picker so calendar arrow-key navigation works immediately, and shrink picker result lists to their measured content height.
+- Updated dependencies [239d9f6]
+- Updated dependencies [3af2ca0]
+- Updated dependencies [7276702]
+- Updated dependencies [58f8211]
+- Updated dependencies [00c089d]
+- Updated dependencies [71cd58e]
+- Updated dependencies [cd03973]
+- Updated dependencies [d26cc1a]
+- Updated dependencies [9126299]
+- Updated dependencies [72018af]
+- Updated dependencies [5cd8ffd]
+- Updated dependencies [b82bda4]
+- Updated dependencies [55a54b3]
+- Updated dependencies [b82bda4]
+- Updated dependencies [4490442]
+- Updated dependencies [1540dce]
+  - @sanity/workflow-engine@0.18.0

package/dist/index.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 });
 
-var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), Close = require("@sanity/icons/Close"), ChevronLeft = require("@sanity/icons/ChevronLeft"), ChevronRight = require("@sanity/icons/ChevronRight"), addDays = require("date-fns/addDays"), addMonths = require("date-fns/addMonths"), setDate = require("date-fns/setDate"), setHours = require("date-fns/setHours"), setMinutes = require("date-fns/setMinutes"), setMonth = require("date-fns/setMonth"), setYear = require("date-fns/setYear"), react = require("react"), eachWeekOfInterval = require("date-fns/eachWeekOfInterval"), isSameDay = require("date-fns/isSameDay"), isSameMonth = require("date-fns/isSameMonth"), lastDayOfMonth = require("date-fns/lastDayOfMonth"), startOfMonth = require("date-fns/startOfMonth"), Checkmark = require("@sanity/icons/Checkmark"), Empty = require("@sanity/icons/Empty"), Users = require("@sanity/icons/Users");
+var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), Close = require("@sanity/icons/Close"), ChevronLeft = require("@sanity/icons/ChevronLeft"), ChevronRight = require("@sanity/icons/ChevronRight"), addDays = require("date-fns/addDays"), addMonths = require("date-fns/addMonths"), setDate = require("date-fns/setDate"), setHours = require("date-fns/setHours"), setMinutes = require("date-fns/setMinutes"), setMonth = require("date-fns/setMonth"), setYear = require("date-fns/setYear"), react = require("react"), eachWeekOfInterval = require("date-fns/eachWeekOfInterval"), isSameDay = require("date-fns/isSameDay"), isSameMonth = require("date-fns/isSameMonth"), lastDayOfMonth = require("date-fns/lastDayOfMonth"), startOfMonth = require("date-fns/startOfMonth"), Checkmark = require("@sanity/icons/Checkmark"), Empty = require("@sanity/icons/Empty"), Users = require("@sanity/icons/Users"), reactVirtual = require("@tanstack/react-virtual");
 
 function roleListLabel(roles) {
     return `${roles.length === 1 ? "Role" : "Roles"}: ${roles.join(", ")}`;
@@ -152,7 +152,11 @@ function DatePicker({onSelect: onSelect, selectTime: selectTime = !1, value: val
         setFocusedDate(current => setDate.setDate(setMonth.setMonth(current, month), 1));
     }, []), moveFocusedDate = react.useCallback(byMonths => setFocusedDate(current => addMonths.addMonths(current, byMonths)), []), setFocusedYear = react.useCallback(year => setFocusedDate(current => setYear.setYear(current, year)), []), focusCurrentWeekDay = react.useCallback(() => {
         ref.current?.querySelector('[data-focused="true"]')?.focus();
-    }, []), handleKeyDown = react.useCallback(event => {
+    }, []);
+    react.useEffect(() => {
+        ref.current?.querySelector("[data-calendar-grid]")?.focus();
+    }, []);
+    const handleKeyDown = react.useCallback(event => {
         if (!ARROW_KEYS.includes(event.key)) return;
         if (event.preventDefault(), event.target instanceof HTMLElement && event.target.hasAttribute("data-calendar-grid")) {
             focusCurrentWeekDay();
@@ -346,57 +350,81 @@ function MemberAvatarGroup({members: members, maxLength: maxLength = 3}) {
     });
 }
 
-function PickerStatus({loading: loading, error: error}) {
-    return loading ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        gap: 2,
-        padding: 3,
-        children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
-            muted: !0,
-            size: 1
-        }), 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: "Loading members…"
-        }) ]
-    }) : error ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
-        padding: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-            muted: !0,
-            size: 1,
-            children: [ "Could not list members: ", error ]
-        })
-    }) : null;
+const ESTIMATED_ROW_HEIGHT = 44, MAX_VISIBLE_ROWS = 8, MAX_VIEWPORT_HEIGHT = ESTIMATED_ROW_HEIGHT * MAX_VISIBLE_ROWS;
+
+function hasTouchInput() {
+    return typeof navigator > "u" ? !1 : navigator.maxTouchPoints > 0 || globalThis.matchMedia?.("(pointer: coarse)").matches === !0;
+}
+
+function nextEnabledIndex({current: current, direction: direction, disabled: disabled, rows: rows}) {
+    for (let offset = 1; offset <= rows.length; offset += 1) {
+        const index = (current + direction * offset + rows.length) % rows.length, row = rows[index];
+        if (row !== void 0 && !disabled(row)) return index;
+    }
+    return -1;
 }
 
-const ActiveRowContext = react.createContext(void 0);
+function arrowDirection(key) {
+    if (key === "ArrowDown") return 1;
+    if (key === "ArrowUp") return -1;
+}
 
-function PickerShell({children: children, empty: empty, error: error, loading: loading, placeholder: placeholder, query: query, onQueryChange: onQueryChange}) {
-    const listRef = react.useRef(null), listId = react.useId(), [activeIndex, setActiveIndex] = react.useState(-1), [activeRowId, setActiveRowId] = react.useState(), handleKeyDown = react.useCallback(event => {
-        const rows = listRef.current?.querySelectorAll("[data-picker-row]") ?? [];
-        if (rows.length === 0) return;
-        if (event.key === "Enter" && activeIndex >= 0) {
-            event.preventDefault(), rows[activeIndex]?.click();
+function navigationStart(activeIndex, direction) {
+    return activeIndex >= 0 ? activeIndex : direction === 1 ? -1 : 0;
+}
+
+function CommandList({ariaLabel: ariaLabel, disabled: disabled = () => !1, emptyText: emptyText, getRowKey: getRowKey, onQueryChange: onQueryChange, onSelect: onSelect, placeholder: placeholder, query: query, renderRow: renderRow, rows: rows}) {
+    const inputRef = react.useRef(null), scrollRef = react.useRef(null), listId = react.useId(), [activeIndex, setActiveIndex] = react.useState(-1), estimatedViewportHeight = Math.min(rows.length, MAX_VISIBLE_ROWS) * ESTIMATED_ROW_HEIGHT, virtualizer = reactVirtual.useVirtualizer({
+        count: rows.length,
+        estimateSize: () => ESTIMATED_ROW_HEIGHT,
+        getItemKey: index => {
+            const row = rows[index];
+            return row === void 0 ? index : getRowKey(row);
+        },
+        getScrollElement: () => scrollRef.current,
+        initialRect: {
+            height: estimatedViewportHeight,
+            width: 300
+        },
+        initialMeasurementsCache: rows.map((row, index) => ({
+            end: (index + 1) * ESTIMATED_ROW_HEIGHT,
+            index: index,
+            key: getRowKey(row),
+            lane: 0,
+            size: ESTIMATED_ROW_HEIGHT,
+            start: index * ESTIMATED_ROW_HEIGHT
+        })),
+        overscan: 5,
+        observeElementRect: (_instance, callback) => (callback({
+            height: estimatedViewportHeight,
+            width: 300
+        }), () => {})
+    }), viewportHeight = Math.min(virtualizer.getTotalSize(), MAX_VIEWPORT_HEIGHT);
+    react.useEffect(() => {
+        hasTouchInput() || inputRef.current?.focus();
+    }, []), react.useEffect(() => setActiveIndex(-1), [ rows ]);
+    const moveActive = react.useCallback(direction => {
+        const start = navigationStart(activeIndex, direction), next = nextEnabledIndex({
+            current: start,
+            direction: direction,
+            disabled: disabled,
+            rows: rows
+        });
+        setActiveIndex(next), next >= 0 && virtualizer.scrollToIndex(next, {
+            align: "auto"
+        });
+    }, [ activeIndex, disabled, rows, virtualizer ]), handleKeyDown = react.useCallback(event => {
+        const direction = arrowDirection(event.key);
+        if (direction !== void 0) {
+            event.preventDefault(), moveActive(direction);
             return;
         }
-        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
-        event.preventDefault();
-        const direction = event.key === "ArrowDown" ? 1 : -1;
-        setActiveIndex(current => {
-            let startingIndex = current;
-            current < 0 && (startingIndex = direction > 0 ? -1 : 0);
-            const nextIndex = (startingIndex + direction + rows.length) % rows.length, nextRow = rows[nextIndex];
-            return setActiveRowId(nextRow?.id), nextRow?.scrollIntoView?.({
-                block: "nearest"
-            }), nextIndex;
-        });
-    }, [ activeIndex ]);
-    return loading || error ? /* @__PURE__ */ jsxRuntime.jsx(PickerStatus, {
-        error: error,
-        loading: loading
-    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        if (event.key !== "Enter") return;
+        const row = rows[activeIndex];
+        row === void 0 || disabled(row) || (event.preventDefault(), onSelect(row));
+    }, [ activeIndex, disabled, moveActive, onSelect, rows ]), activeRow = activeIndex < 0 ? void 0 : rows[activeIndex], activeId = activeRow === void 0 ? void 0 : `${listId}-${getRowKey(activeRow)}`;
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
         direction: "column",
         style: {
             width: 300
@@ -406,65 +434,106 @@ function PickerShell({children: children, empty: empty, error: error, loading: l
             padding: 1,
             paddingBottom: 0,
             children: /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
-                "aria-activedescendant": activeRowId,
+                "aria-activedescendant": activeId,
                 "aria-controls": listId,
                 "aria-expanded": !0,
                 "aria-label": placeholder,
                 fontSize: 1,
-                onChange: event => {
-                    setActiveIndex(-1), setActiveRowId(void 0), onQueryChange(event.currentTarget.value);
-                },
+                onChange: event => onQueryChange(event.currentTarget.value),
                 onKeyDown: handleKeyDown,
                 placeholder: placeholder,
                 radius: 2,
+                ref: inputRef,
                 role: "combobox",
                 value: query
             })
-        }), empty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+        }), rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
             padding: 3,
             children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                 muted: !0,
                 size: 1,
-                children: "Nothing matches"
+                children: emptyText
             })
-        }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
-            as: "ul",
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            "aria-label": ariaLabel,
             id: listId,
-            ref: listRef,
+            overflow: "auto",
+            ref: scrollRef,
             role: "listbox",
-            padding: 1,
-            space: 1,
             style: {
-                listStyle: "none",
-                maxHeight: 360,
-                overflowY: "auto"
+                height: viewportHeight
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ActiveRowContext, {
-                value: activeRowId,
-                children: children
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                style: {
+                    height: virtualizer.getTotalSize(),
+                    position: "relative",
+                    width: "100%"
+                },
+                children: virtualizer.getVirtualItems().map(item => {
+                    const row = rows[item.index];
+                    if (row === void 0) return null;
+                    const rowId = `${listId}-${getRowKey(row)}`;
+                    /* @__PURE__ */
+                    return jsxRuntime.jsx(ui.Box, {
+                        "data-index": item.index,
+                        ref: virtualizer.measureElement,
+                        style: {
+                            position: "absolute",
+                            transform: `translateY(${item.start}px)`,
+                            width: "100%"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                            id: rowId,
+                            children: renderRow(row, item.index === activeIndex)
+                        })
+                    }, item.key);
+                })
             })
         }) ]
     });
 }
 
-function PickerRow({icon: icon, label: label, onSelect: onSelect, rowId: rowId, selected: selected}) {
-    const active = react.useContext(ActiveRowContext) === rowId;
+function PickerStatus({loading: loading, error: error}) {
+    return loading ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        padding: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
+            muted: !0,
+            size: 1
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: "Loading members…"
+        }) ]
+    }) : error ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+        padding: 3,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: [ "Could not list members: ", error ]
+        })
+    }) : null;
+}
+
+function PickerRow({active: active, icon: icon, label: label, onSelect: onSelect, selected: selected}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Box, {
-        as: "li",
+        paddingX: 1,
+        paddingY: .5,
         children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             "aria-pressed": selected,
             "aria-selected": active,
-            "data-picker-row": !0,
-            id: rowId,
             justify: "flex-start",
             mode: active ? "ghost" : "bleed",
             onClick: onSelect,
             padding: 2,
+            role: "option",
             style: {
                 width: "100%"
             },
-            role: "option",
             children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
                 align: "center",
                 gap: 2,
@@ -496,41 +565,45 @@ function Glyph({children: children}) {
 }
 
 function MemberPicker({error: error, loading: loading, members: members, onSelect: onSelect, selectedIds: selectedIds, unassignRow: unassignRow = !1}) {
-    const [query, setQuery] = react.useState(""), matchingMembers = react.useMemo(() => members.filter(member => matchesMemberSearch(member, query)), [ members, query ]), showUnassigned = unassignRow && query.trim() === "";
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(PickerShell, {
-        empty: !showUnassigned && matchingMembers.length === 0,
+    const [query, setQuery] = react.useState(""), rows = react.useMemo(() => {
+        const matches = members.filter(member => matchesMemberSearch(member, query)).map(member => ({
+            kind: "member",
+            member: member
+        }));
+        return unassignRow && query.trim() === "" ? [ {
+            kind: "unassigned"
+        }, ...matches ] : matches;
+    }, [ members, query, unassignRow ]), selectRow = react.useCallback(row => onSelect(row.kind === "member" ? row.member : null), [ onSelect ]);
+    return loading || error ? /* @__PURE__ */ jsxRuntime.jsx(PickerStatus, {
         error: error,
-        loading: loading,
-        members: members,
+        loading: loading
+    }) : /* @__PURE__ */ jsxRuntime.jsx(CommandList, {
+        ariaLabel: "Project members",
+        emptyText: "Nothing matches",
+        getRowKey: row => row.kind === "member" ? `member-${row.member.id}` : "unassigned",
         onQueryChange: setQuery,
+        onSelect: selectRow,
         placeholder: "Search members…",
         query: query,
-        children: [ showUnassigned ? /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(Glyph, {
+        renderRow: (row, active) => /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            active: active,
+            icon: row.kind === "member" ? /* @__PURE__ */ jsxRuntime.jsx(MemberAvatar, {
+                imageUrl: row.member.imageUrl,
+                name: row.member.displayName
+            }) : /* @__PURE__ */ jsxRuntime.jsx(Glyph, {
                 children: /* @__PURE__ */ jsxRuntime.jsx(Empty.EmptyIcon, {})
             }),
-            label: "No assignee",
-            onSelect: () => onSelect(null),
-            rowId: "workflow-member-unassigned",
-            selected: selectedIds.size === 0
-        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(MemberAvatar, {
-                imageUrl: member.imageUrl,
-                name: member.displayName
-            }),
-            label: member.displayName,
-            onSelect: () => onSelect(member),
-            rowId: `workflow-member-${encodeURIComponent(member.id)}`,
-            selected: selectedIds.has(member.id)
-        }, member.id)) ]
+            label: row.kind === "member" ? row.member.displayName : "No assignee",
+            onSelect: () => selectRow(row),
+            selected: row.kind === "member" ? selectedIds.has(row.member.id) : selectedIds.size === 0
+        }),
+        rows: rows
     });
 }
 
 function GroupHeading({children: children}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Card, {
-        as: "li",
         borderTop: !0,
         padding: 2,
         children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
@@ -543,44 +616,63 @@ function GroupHeading({children: children}) {
 }
 
 function AssigneePicker({error: error, loading: loading, members: members, onToggle: onToggle, value: value}) {
-    const [query, setQuery] = react.useState(""), normalized = query.trim().toLowerCase(), matchingRoles = react.useMemo(() => [ ...new Set(members.flatMap(member => member.roles)) ].toSorted(), [ members ]).filter(role => role.toLowerCase().includes(normalized)), matchingMembers = members.filter(member => matchesMemberSearch(member, query)), selectedRoles = new Set(value.flatMap(item => item.type === "role" ? [ item.role ] : [])), selectedUsers = new Set(value.flatMap(item => item.type === "user" ? [ item.id ] : []));
-    /* @__PURE__ */
-    return jsxRuntime.jsxs(PickerShell, {
-        empty: matchingRoles.length === 0 && matchingMembers.length === 0,
+    const [query, setQuery] = react.useState(""), roles = react.useMemo(() => [ ...new Set(members.flatMap(member => member.roles)) ].toSorted(), [ members ]), rows = react.useMemo(() => {
+        const normalized = query.trim().toLowerCase(), roleRows = roles.filter(role => role.toLowerCase().includes(normalized)).map(role => ({
+            kind: "role",
+            role: role
+        })), memberRows = members.filter(member => matchesMemberSearch(member, query)).map(member => ({
+            kind: "member",
+            member: member
+        }));
+        return [ ...roleRows.length > 0 ? [ {
+            kind: "heading",
+            label: "Roles"
+        } ] : [], ...roleRows, ...memberRows.length > 0 ? [ {
+            kind: "heading",
+            label: "Members"
+        } ] : [], ...memberRows ];
+    }, [ members, query, roles ]), selectedRoles = new Set(value.flatMap(item => item.type === "role" ? [ item.role ] : [])), selectedUsers = new Set(value.flatMap(item => item.type === "user" ? [ item.id ] : [])), selectRow = react.useCallback(row => {
+        row.kind === "role" && onToggle({
+            type: "role",
+            role: row.role
+        }), row.kind === "member" && onToggle({
+            type: "user",
+            id: row.member.id
+        });
+    }, [ onToggle ]);
+    return loading || error ? /* @__PURE__ */ jsxRuntime.jsx(PickerStatus, {
         error: error,
-        loading: loading,
-        members: members,
+        loading: loading
+    }) : /* @__PURE__ */ jsxRuntime.jsx(CommandList, {
+        ariaLabel: "Roles and members",
+        disabled: row => row.kind === "heading",
+        emptyText: "Nothing matches",
+        getRowKey: row => row.kind === "heading" ? `heading-${row.label}` : row.kind === "role" ? `role-${row.role}` : `member-${row.member.id}`,
         onQueryChange: setQuery,
+        onSelect: selectRow,
         placeholder: "Search roles and members…",
         query: query,
-        children: [ matchingRoles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(GroupHeading, {
-            children: "Roles"
-        }) : null, matchingRoles.map(role => /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+        renderRow: (row, active) => row.kind === "heading" ? /* @__PURE__ */ jsxRuntime.jsx(GroupHeading, {
+            children: row.label
+        }) : row.kind === "role" ? /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            active: active,
             icon: /* @__PURE__ */ jsxRuntime.jsx(Glyph, {
                 children: /* @__PURE__ */ jsxRuntime.jsx(Users.UsersIcon, {})
             }),
-            label: role,
-            onSelect: () => onToggle({
-                type: "role",
-                role: role
-            }),
-            rowId: `workflow-role-${encodeURIComponent(role)}`,
-            selected: selectedRoles.has(role)
-        }, `role:${role}`)), matchingMembers.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(GroupHeading, {
-            children: "Members"
-        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            label: row.role,
+            onSelect: () => selectRow(row),
+            selected: selectedRoles.has(row.role)
+        }) : /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            active: active,
             icon: /* @__PURE__ */ jsxRuntime.jsx(MemberAvatar, {
-                imageUrl: member.imageUrl,
-                name: member.displayName
-            }),
-            label: member.displayName,
-            onSelect: () => onToggle({
-                type: "user",
-                id: member.id
+                imageUrl: row.member.imageUrl,
+                name: row.member.displayName
             }),
-            rowId: `workflow-assignee-${encodeURIComponent(member.id)}`,
-            selected: selectedUsers.has(member.id)
-        }, `user:${member.id}`)) ]
+            label: row.member.displayName,
+            onSelect: () => selectRow(row),
+            selected: selectedUsers.has(row.member.id)
+        }),
+        rows: rows
     });
 }
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 
-import { Badge, Flex, Grid, Box, Text, Card, TextInput, Select, Button, Avatar, AvatarStack, Stack, Spinner } from "@sanity/ui";
+import { Badge, Flex, Grid, Box, Text, Card, TextInput, Select, Button, Avatar, AvatarStack, Spinner } from "@sanity/ui";
 
 import { CloseIcon } from "@sanity/icons/Close";
 
@@ -22,7 +22,7 @@ import { setMonth } from "date-fns/setMonth";
 
 import { setYear } from "date-fns/setYear";
 
-import { forwardRef, useState, useCallback, useMemo, useRef, useEffect, createContext, useId, useContext } from "react";
+import { forwardRef, useState, useCallback, useMemo, useRef, useEffect, useId } from "react";
 
 import { eachWeekOfInterval } from "date-fns/eachWeekOfInterval";
 
@@ -40,6 +40,8 @@ import { EmptyIcon } from "@sanity/icons/Empty";
 
 import { UsersIcon } from "@sanity/icons/Users";
 
+import { useVirtualizer } from "@tanstack/react-virtual";
+
 function roleListLabel(roles) {
     return `${roles.length === 1 ? "Role" : "Roles"}: ${roles.join(", ")}`;
 }
@@ -186,7 +188,11 @@ function DatePicker({onSelect: onSelect, selectTime: selectTime = !1, value: val
         setFocusedDate(current => setDate(setMonth(current, month), 1));
     }, []), moveFocusedDate = useCallback(byMonths => setFocusedDate(current => addMonths(current, byMonths)), []), setFocusedYear = useCallback(year => setFocusedDate(current => setYear(current, year)), []), focusCurrentWeekDay = useCallback(() => {
         ref.current?.querySelector('[data-focused="true"]')?.focus();
-    }, []), handleKeyDown = useCallback(event => {
+    }, []);
+    useEffect(() => {
+        ref.current?.querySelector("[data-calendar-grid]")?.focus();
+    }, []);
+    const handleKeyDown = useCallback(event => {
         if (!ARROW_KEYS.includes(event.key)) return;
         if (event.preventDefault(), event.target instanceof HTMLElement && event.target.hasAttribute("data-calendar-grid")) {
             focusCurrentWeekDay();
@@ -380,57 +386,81 @@ function MemberAvatarGroup({members: members, maxLength: maxLength = 3}) {
     });
 }
 
-function PickerStatus({loading: loading, error: error}) {
-    return loading ? /* @__PURE__ */ jsxs(Flex, {
-        align: "center",
-        gap: 2,
-        padding: 3,
-        children: [ 
-        /* @__PURE__ */ jsx(Spinner, {
-            muted: !0,
-            size: 1
-        }), 
-        /* @__PURE__ */ jsx(Text, {
-            muted: !0,
-            size: 1,
-            children: "Loading members…"
-        }) ]
-    }) : error ? /* @__PURE__ */ jsx(Box, {
-        padding: 3,
-        children: /* @__PURE__ */ jsxs(Text, {
-            muted: !0,
-            size: 1,
-            children: [ "Could not list members: ", error ]
-        })
-    }) : null;
+const ESTIMATED_ROW_HEIGHT = 44, MAX_VISIBLE_ROWS = 8, MAX_VIEWPORT_HEIGHT = ESTIMATED_ROW_HEIGHT * MAX_VISIBLE_ROWS;
+
+function hasTouchInput() {
+    return typeof navigator > "u" ? !1 : navigator.maxTouchPoints > 0 || globalThis.matchMedia?.("(pointer: coarse)").matches === !0;
 }
 
-const ActiveRowContext = createContext(void 0);
+function nextEnabledIndex({current: current, direction: direction, disabled: disabled, rows: rows}) {
+    for (let offset = 1; offset <= rows.length; offset += 1) {
+        const index = (current + direction * offset + rows.length) % rows.length, row = rows[index];
+        if (row !== void 0 && !disabled(row)) return index;
+    }
+    return -1;
+}
+
+function arrowDirection(key) {
+    if (key === "ArrowDown") return 1;
+    if (key === "ArrowUp") return -1;
+}
 
-function PickerShell({children: children, empty: empty, error: error, loading: loading, placeholder: placeholder, query: query, onQueryChange: onQueryChange}) {
-    const listRef = useRef(null), listId = useId(), [activeIndex, setActiveIndex] = useState(-1), [activeRowId, setActiveRowId] = useState(), handleKeyDown = useCallback(event => {
-        const rows = listRef.current?.querySelectorAll("[data-picker-row]") ?? [];
-        if (rows.length === 0) return;
-        if (event.key === "Enter" && activeIndex >= 0) {
-            event.preventDefault(), rows[activeIndex]?.click();
+function navigationStart(activeIndex, direction) {
+    return activeIndex >= 0 ? activeIndex : direction === 1 ? -1 : 0;
+}
+
+function CommandList({ariaLabel: ariaLabel, disabled: disabled = () => !1, emptyText: emptyText, getRowKey: getRowKey, onQueryChange: onQueryChange, onSelect: onSelect, placeholder: placeholder, query: query, renderRow: renderRow, rows: rows}) {
+    const inputRef = useRef(null), scrollRef = useRef(null), listId = useId(), [activeIndex, setActiveIndex] = useState(-1), estimatedViewportHeight = Math.min(rows.length, MAX_VISIBLE_ROWS) * ESTIMATED_ROW_HEIGHT, virtualizer = useVirtualizer({
+        count: rows.length,
+        estimateSize: () => ESTIMATED_ROW_HEIGHT,
+        getItemKey: index => {
+            const row = rows[index];
+            return row === void 0 ? index : getRowKey(row);
+        },
+        getScrollElement: () => scrollRef.current,
+        initialRect: {
+            height: estimatedViewportHeight,
+            width: 300
+        },
+        initialMeasurementsCache: rows.map((row, index) => ({
+            end: (index + 1) * ESTIMATED_ROW_HEIGHT,
+            index: index,
+            key: getRowKey(row),
+            lane: 0,
+            size: ESTIMATED_ROW_HEIGHT,
+            start: index * ESTIMATED_ROW_HEIGHT
+        })),
+        overscan: 5,
+        observeElementRect: (_instance, callback) => (callback({
+            height: estimatedViewportHeight,
+            width: 300
+        }), () => {})
+    }), viewportHeight = Math.min(virtualizer.getTotalSize(), MAX_VIEWPORT_HEIGHT);
+    useEffect(() => {
+        hasTouchInput() || inputRef.current?.focus();
+    }, []), useEffect(() => setActiveIndex(-1), [ rows ]);
+    const moveActive = useCallback(direction => {
+        const start = navigationStart(activeIndex, direction), next = nextEnabledIndex({
+            current: start,
+            direction: direction,
+            disabled: disabled,
+            rows: rows
+        });
+        setActiveIndex(next), next >= 0 && virtualizer.scrollToIndex(next, {
+            align: "auto"
+        });
+    }, [ activeIndex, disabled, rows, virtualizer ]), handleKeyDown = useCallback(event => {
+        const direction = arrowDirection(event.key);
+        if (direction !== void 0) {
+            event.preventDefault(), moveActive(direction);
             return;
         }
-        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
-        event.preventDefault();
-        const direction = event.key === "ArrowDown" ? 1 : -1;
-        setActiveIndex(current => {
-            let startingIndex = current;
-            current < 0 && (startingIndex = direction > 0 ? -1 : 0);
-            const nextIndex = (startingIndex + direction + rows.length) % rows.length, nextRow = rows[nextIndex];
-            return setActiveRowId(nextRow?.id), nextRow?.scrollIntoView?.({
-                block: "nearest"
-            }), nextIndex;
-        });
-    }, [ activeIndex ]);
-    return loading || error ? /* @__PURE__ */ jsx(PickerStatus, {
-        error: error,
-        loading: loading
-    }) : /* @__PURE__ */ jsxs(Flex, {
+        if (event.key !== "Enter") return;
+        const row = rows[activeIndex];
+        row === void 0 || disabled(row) || (event.preventDefault(), onSelect(row));
+    }, [ activeIndex, disabled, moveActive, onSelect, rows ]), activeRow = activeIndex < 0 ? void 0 : rows[activeIndex], activeId = activeRow === void 0 ? void 0 : `${listId}-${getRowKey(activeRow)}`;
+    /* @__PURE__ */
+    return jsxs(Flex, {
         direction: "column",
         style: {
             width: 300
@@ -440,65 +470,106 @@ function PickerShell({children: children, empty: empty, error: error, loading: l
             padding: 1,
             paddingBottom: 0,
             children: /* @__PURE__ */ jsx(TextInput, {
-                "aria-activedescendant": activeRowId,
+                "aria-activedescendant": activeId,
                 "aria-controls": listId,
                 "aria-expanded": !0,
                 "aria-label": placeholder,
                 fontSize: 1,
-                onChange: event => {
-                    setActiveIndex(-1), setActiveRowId(void 0), onQueryChange(event.currentTarget.value);
-                },
+                onChange: event => onQueryChange(event.currentTarget.value),
                 onKeyDown: handleKeyDown,
                 placeholder: placeholder,
                 radius: 2,
+                ref: inputRef,
                 role: "combobox",
                 value: query
             })
-        }), empty ? /* @__PURE__ */ jsx(Box, {
+        }), rows.length === 0 ? /* @__PURE__ */ jsx(Box, {
             padding: 3,
             children: /* @__PURE__ */ jsx(Text, {
                 muted: !0,
                 size: 1,
-                children: "Nothing matches"
+                children: emptyText
             })
-        }) : /* @__PURE__ */ jsx(Stack, {
-            as: "ul",
+        }) : /* @__PURE__ */ jsx(Box, {
+            "aria-label": ariaLabel,
             id: listId,
-            ref: listRef,
+            overflow: "auto",
+            ref: scrollRef,
             role: "listbox",
-            padding: 1,
-            space: 1,
             style: {
-                listStyle: "none",
-                maxHeight: 360,
-                overflowY: "auto"
+                height: viewportHeight
             },
-            children: /* @__PURE__ */ jsx(ActiveRowContext, {
-                value: activeRowId,
-                children: children
+            children: /* @__PURE__ */ jsx(Box, {
+                style: {
+                    height: virtualizer.getTotalSize(),
+                    position: "relative",
+                    width: "100%"
+                },
+                children: virtualizer.getVirtualItems().map(item => {
+                    const row = rows[item.index];
+                    if (row === void 0) return null;
+                    const rowId = `${listId}-${getRowKey(row)}`;
+                    /* @__PURE__ */
+                    return jsx(Box, {
+                        "data-index": item.index,
+                        ref: virtualizer.measureElement,
+                        style: {
+                            position: "absolute",
+                            transform: `translateY(${item.start}px)`,
+                            width: "100%"
+                        },
+                        children: /* @__PURE__ */ jsx(Box, {
+                            id: rowId,
+                            children: renderRow(row, item.index === activeIndex)
+                        })
+                    }, item.key);
+                })
             })
         }) ]
     });
 }
 
-function PickerRow({icon: icon, label: label, onSelect: onSelect, rowId: rowId, selected: selected}) {
-    const active = useContext(ActiveRowContext) === rowId;
+function PickerStatus({loading: loading, error: error}) {
+    return loading ? /* @__PURE__ */ jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        padding: 3,
+        children: [ 
+        /* @__PURE__ */ jsx(Spinner, {
+            muted: !0,
+            size: 1
+        }), 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: "Loading members…"
+        }) ]
+    }) : error ? /* @__PURE__ */ jsx(Box, {
+        padding: 3,
+        children: /* @__PURE__ */ jsxs(Text, {
+            muted: !0,
+            size: 1,
+            children: [ "Could not list members: ", error ]
+        })
+    }) : null;
+}
+
+function PickerRow({active: active, icon: icon, label: label, onSelect: onSelect, selected: selected}) {
     /* @__PURE__ */
     return jsx(Box, {
-        as: "li",
+        paddingX: 1,
+        paddingY: .5,
         children: /* @__PURE__ */ jsx(Button, {
             "aria-pressed": selected,
             "aria-selected": active,
-            "data-picker-row": !0,
-            id: rowId,
             justify: "flex-start",
             mode: active ? "ghost" : "bleed",
             onClick: onSelect,
             padding: 2,
+            role: "option",
             style: {
                 width: "100%"
             },
-            role: "option",
             children: /* @__PURE__ */ jsxs(Flex, {
                 align: "center",
                 gap: 2,
@@ -530,41 +601,45 @@ function Glyph({children: children}) {
 }
 
 function MemberPicker({error: error, loading: loading, members: members, onSelect: onSelect, selectedIds: selectedIds, unassignRow: unassignRow = !1}) {
-    const [query, setQuery] = useState(""), matchingMembers = useMemo(() => members.filter(member => matchesMemberSearch(member, query)), [ members, query ]), showUnassigned = unassignRow && query.trim() === "";
-    /* @__PURE__ */
-    return jsxs(PickerShell, {
-        empty: !showUnassigned && matchingMembers.length === 0,
+    const [query, setQuery] = useState(""), rows = useMemo(() => {
+        const matches = members.filter(member => matchesMemberSearch(member, query)).map(member => ({
+            kind: "member",
+            member: member
+        }));
+        return unassignRow && query.trim() === "" ? [ {
+            kind: "unassigned"
+        }, ...matches ] : matches;
+    }, [ members, query, unassignRow ]), selectRow = useCallback(row => onSelect(row.kind === "member" ? row.member : null), [ onSelect ]);
+    return loading || error ? /* @__PURE__ */ jsx(PickerStatus, {
         error: error,
-        loading: loading,
-        members: members,
+        loading: loading
+    }) : /* @__PURE__ */ jsx(CommandList, {
+        ariaLabel: "Project members",
+        emptyText: "Nothing matches",
+        getRowKey: row => row.kind === "member" ? `member-${row.member.id}` : "unassigned",
         onQueryChange: setQuery,
+        onSelect: selectRow,
         placeholder: "Search members…",
         query: query,
-        children: [ showUnassigned ? /* @__PURE__ */ jsx(PickerRow, {
-            icon: /* @__PURE__ */ jsx(Glyph, {
+        renderRow: (row, active) => /* @__PURE__ */ jsx(PickerRow, {
+            active: active,
+            icon: row.kind === "member" ? /* @__PURE__ */ jsx(MemberAvatar, {
+                imageUrl: row.member.imageUrl,
+                name: row.member.displayName
+            }) : /* @__PURE__ */ jsx(Glyph, {
                 children: /* @__PURE__ */ jsx(EmptyIcon, {})
             }),
-            label: "No assignee",
-            onSelect: () => onSelect(null),
-            rowId: "workflow-member-unassigned",
-            selected: selectedIds.size === 0
-        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsx(PickerRow, {
-            icon: /* @__PURE__ */ jsx(MemberAvatar, {
-                imageUrl: member.imageUrl,
-                name: member.displayName
-            }),
-            label: member.displayName,
-            onSelect: () => onSelect(member),
-            rowId: `workflow-member-${encodeURIComponent(member.id)}`,
-            selected: selectedIds.has(member.id)
-        }, member.id)) ]
+            label: row.kind === "member" ? row.member.displayName : "No assignee",
+            onSelect: () => selectRow(row),
+            selected: row.kind === "member" ? selectedIds.has(row.member.id) : selectedIds.size === 0
+        }),
+        rows: rows
     });
 }
 
 function GroupHeading({children: children}) {
     /* @__PURE__ */
     return jsx(Card, {
-        as: "li",
         borderTop: !0,
         padding: 2,
         children: /* @__PURE__ */ jsx(Text, {
@@ -577,44 +652,63 @@ function GroupHeading({children: children}) {
 }
 
 function AssigneePicker({error: error, loading: loading, members: members, onToggle: onToggle, value: value}) {
-    const [query, setQuery] = useState(""), normalized = query.trim().toLowerCase(), matchingRoles = useMemo(() => [ ...new Set(members.flatMap(member => member.roles)) ].toSorted(), [ members ]).filter(role => role.toLowerCase().includes(normalized)), matchingMembers = members.filter(member => matchesMemberSearch(member, query)), selectedRoles = new Set(value.flatMap(item => item.type === "role" ? [ item.role ] : [])), selectedUsers = new Set(value.flatMap(item => item.type === "user" ? [ item.id ] : []));
-    /* @__PURE__ */
-    return jsxs(PickerShell, {
-        empty: matchingRoles.length === 0 && matchingMembers.length === 0,
+    const [query, setQuery] = useState(""), roles = useMemo(() => [ ...new Set(members.flatMap(member => member.roles)) ].toSorted(), [ members ]), rows = useMemo(() => {
+        const normalized = query.trim().toLowerCase(), roleRows = roles.filter(role => role.toLowerCase().includes(normalized)).map(role => ({
+            kind: "role",
+            role: role
+        })), memberRows = members.filter(member => matchesMemberSearch(member, query)).map(member => ({
+            kind: "member",
+            member: member
+        }));
+        return [ ...roleRows.length > 0 ? [ {
+            kind: "heading",
+            label: "Roles"
+        } ] : [], ...roleRows, ...memberRows.length > 0 ? [ {
+            kind: "heading",
+            label: "Members"
+        } ] : [], ...memberRows ];
+    }, [ members, query, roles ]), selectedRoles = new Set(value.flatMap(item => item.type === "role" ? [ item.role ] : [])), selectedUsers = new Set(value.flatMap(item => item.type === "user" ? [ item.id ] : [])), selectRow = useCallback(row => {
+        row.kind === "role" && onToggle({
+            type: "role",
+            role: row.role
+        }), row.kind === "member" && onToggle({
+            type: "user",
+            id: row.member.id
+        });
+    }, [ onToggle ]);
+    return loading || error ? /* @__PURE__ */ jsx(PickerStatus, {
         error: error,
-        loading: loading,
-        members: members,
+        loading: loading
+    }) : /* @__PURE__ */ jsx(CommandList, {
+        ariaLabel: "Roles and members",
+        disabled: row => row.kind === "heading",
+        emptyText: "Nothing matches",
+        getRowKey: row => row.kind === "heading" ? `heading-${row.label}` : row.kind === "role" ? `role-${row.role}` : `member-${row.member.id}`,
         onQueryChange: setQuery,
+        onSelect: selectRow,
         placeholder: "Search roles and members…",
         query: query,
-        children: [ matchingRoles.length > 0 ? /* @__PURE__ */ jsx(GroupHeading, {
-            children: "Roles"
-        }) : null, matchingRoles.map(role => /* @__PURE__ */ jsx(PickerRow, {
+        renderRow: (row, active) => row.kind === "heading" ? /* @__PURE__ */ jsx(GroupHeading, {
+            children: row.label
+        }) : row.kind === "role" ? /* @__PURE__ */ jsx(PickerRow, {
+            active: active,
             icon: /* @__PURE__ */ jsx(Glyph, {
                 children: /* @__PURE__ */ jsx(UsersIcon, {})
             }),
-            label: role,
-            onSelect: () => onToggle({
-                type: "role",
-                role: role
-            }),
-            rowId: `workflow-role-${encodeURIComponent(role)}`,
-            selected: selectedRoles.has(role)
-        }, `role:${role}`)), matchingMembers.length > 0 ? /* @__PURE__ */ jsx(GroupHeading, {
-            children: "Members"
-        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsx(PickerRow, {
+            label: row.role,
+            onSelect: () => selectRow(row),
+            selected: selectedRoles.has(row.role)
+        }) : /* @__PURE__ */ jsx(PickerRow, {
+            active: active,
             icon: /* @__PURE__ */ jsx(MemberAvatar, {
-                imageUrl: member.imageUrl,
-                name: member.displayName
-            }),
-            label: member.displayName,
-            onSelect: () => onToggle({
-                type: "user",
-                id: member.id
+                imageUrl: row.member.imageUrl,
+                name: row.member.displayName
             }),
-            rowId: `workflow-assignee-${encodeURIComponent(member.id)}`,
-            selected: selectedUsers.has(member.id)
-        }, `user:${member.id}`)) ]
+            label: row.member.displayName,
+            onSelect: () => selectRow(row),
+            selected: selectedUsers.has(row.member.id)
+        }),
+        rows: rows
     });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/workflow-components",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Reusable React components for Editorial Workflows member, assignee, and date fields.",
   "keywords": [
     "react",
@@ -43,8 +43,9 @@
   },
   "dependencies": {
     "@sanity/icons": "^4.1.0",
+    "@tanstack/react-virtual": "^3.14.6",
     "date-fns": "^4.4.0",
-    "@sanity/workflow-engine": "0.17.0"
+    "@sanity/workflow-engine": "0.18.0"
   },
   "devDependencies": {
     "@sanity/pkg-utils": "^10.5.3",