Interactive item list

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { ScrollArea } from "@/components/ui/scroll-area";
7import { useMeasuredRowVirtualization } from "./measured-row-virtualization";
8 
9export type InteractiveItemListItem = {
10  id: string;
11  disabled?: boolean;
12};
13 
14export type InteractiveItemListRenderState = {
15  isActive: boolean;
16  isDisabled: boolean;
17  isSelected: boolean;
18};
19 
20const DEFAULT_ESTIMATE_SIZE = 72;
21const ROW_PADDING = 12;
22 
23function requestFrame(callback: () => void) {
24  if (typeof window !== "undefined" && window.requestAnimationFrame) {
25    window.requestAnimationFrame(callback);
26    return;
27  }
28  setTimeout(callback, 0);
29}
30 
31export function InteractiveItemList<Item extends InteractiveItemListItem>({
32  activeItemId,
33  "aria-label": ariaLabel,
34  className,
35  emptyLabel = "No items.",
36  estimateSize = DEFAULT_ESTIMATE_SIZE,
37  items,
38  onActivateItem,
39  onClearPreview,
40  onClearSelection,
41  onPreviewItem,
42  onVisibleItemChange,
43  renderItem,
44  selectedItemId,
45}: {
46  activeItemId?: string | null;
47  "aria-label": string;
48  className?: string;
49  emptyLabel?: string;
50  estimateSize?: number;
51  items: readonly Item[];
52  onActivateItem?: (item: Item) => void;
53  onClearPreview?: () => void;
54  onClearSelection?: () => void;
55  onPreviewItem?: (item: Item) => void;
56  onVisibleItemChange?: (item: Item) => void;
57  renderItem: (
58    item: Item,
59    state: InteractiveItemListRenderState,
60  ) => React.ReactNode;
61  selectedItemId?: string | null;
62}) {
63  const viewportRef = React.useRef<HTMLDivElement | null>(null);
64  const optionRefs = React.useRef(new Map<string, HTMLButtonElement>());
65  const visibleItemIdRef = React.useRef<string | null>(null);
66  const getItemKey = React.useCallback(
67    (index: number) => items[index]?.id ?? index,
68    [items],
69  );
70  const { measureRow, scrollToIndex, totalSize, virtualRows } =
71    useMeasuredRowVirtualization({
72      count: items.length,
73      estimateSize,
74      getItemKey,
75      initialViewportHeight: 600,
76      overscan: 8,
77      paddingEnd: ROW_PADDING,
78      paddingStart: ROW_PADDING,
79      scrollRef: viewportRef,
80    });
81 
82  const firstEnabledIndex = React.useCallback(
83    () => items.findIndex((item) => !item.disabled),
84    [items],
85  );
86 
87  const lastEnabledIndex = React.useCallback(() => {
88    for (let index = items.length - 1; index >= 0; index -= 1) {
89      if (!items[index]?.disabled) return index;
90    }
91    return -1;
92  }, [items]);
93 
94// … truncated