Add basic react-data-list implementation

Author: Braden1996

.cursor/mcp.json

@@ -0,0 +1,11 @@
+{
+    "mcpServers": {
+        "RadonAi": {
+            "url": "http://127.0.0.1:49646/mcp",
+            "type": "http",
+            "headers": {
+                "nonce": "cad45732-0cce-4c49-b993-f85893b2c4ee"
+            }
+        }
+    }
+}

biome.json

@@ -49,8 +49,11 @@
                             {"type": true, "source": [":BUN:", ":NODE:"]},
                             {"type": false, "source": [":BUN:", ":NODE:"]},
                             ":BLANK_LINE:",
-                            {"type": true, "source": [":PACKAGE:"]},
-                            {"type": false, "source": [":PACKAGE:"]},
+                            {"type": true, "source": [":PACKAGE:", "!@attio/**"]},
+                            {"type": false, "source": [":PACKAGE:", "!@attio/**"]},
+                            ":BLANK_LINE:",
+                            {"type": true, "source": "@attio/**"},
+                            {"type": false, "source": "@attio/**"},
                             ":BLANK_LINE:",
                             {"type": true, "source": ":PATH:"},
                             {"type": false, "source": ":PATH:"},

bun.lock

@@ -4,7 +4,7 @@
     "compilerOptions": {
         // Language & Standard Library
         "composite": true,
-        "lib": [],
+        "lib": ["ES2020"],
         "alwaysStrict": true,
         "useDefineForClassFields": true,
 

config/tsconfig.base.json

@@ -35,6 +35,7 @@
     "expo-web-browser": "~14.2.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "react-error-boundary": "^6.0.0",
     "react-native": "0.79.6",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-reanimated": "~3.17.4",

example/bun.lock

@@ -49,8 +49,10 @@
     "typescript": "~5.9.2"
   },
   "peerDependencies": {
+    "@attio/react-descendants": "link:@attio/react-descendants",
     "@types/react": "*",
-    "react": "*"
+    "react": "*",
+    "react-error-boundary": "^6.0.0"
   },
   "trustedDependencies": [
     "@biomejs/biome"

example/package.json

@@ -0,0 +1,47 @@
+import React from "react"
+
+import {createDescendantContext} from "@attio/react-descendants"
+
+import type {DataListDescriptor, DataListDescriptorDescendant} from "./data-list-types"
+
+export interface DataListDescriptorContextProviderContext {
+    attachDescriptors: (index: number, descriptors: Array<DataListDescriptor>) => () => void
+}
+
+const DataListDescriptorContext = React.createContext<
+    DataListDescriptorContextProviderContext | undefined
+>(undefined)
+
+export function DataListDescriptorContextProvider({
+    children,
+    ...value
+}: DataListDescriptorContextProviderContext & {children: React.ReactNode}) {
+    return (
+        <DataListDescriptorContext.Provider value={value}>
+            {children}
+        </DataListDescriptorContext.Provider>
+    )
+}
+
+export function useDataListDescriptorContext(): DataListDescriptorContextProviderContext {
+    const context = React.useContext(DataListDescriptorContext)
+    if (context === undefined) {
+        throw new Error(
+            "useDataListDescriptorContext must be used within a DataListDescriptorContextProvider"
+        )
+    }
+    return context
+}
+
+interface DataListDescriptorDescendantContextProviderProps extends React.PropsWithChildren {}
+
+const {DescendantsContextProvider, useDescendant} =
+    createDescendantContext<DataListDescriptorDescendant>()
+
+export function DataListDescriptorDescendantContextProvider({
+    children,
+}: DataListDescriptorDescendantContextProviderProps) {
+    return <DescendantsContextProvider>{children}</DescendantsContextProvider>
+}
+
+export const useDataListDescriptorDescendant = useDescendant as typeof useDescendant

package.json

@@ -0,0 +1,53 @@
+import * as React from "react"
+
+import type {
+    DataListDescriptor,
+    DataListDescriptors as DataListDescriptorsType,
+} from "./data-list-types"
+import {
+    DataListDescriptorContextProvider,
+    type DataListDescriptorContextProviderContext,
+    DataListDescriptorDescendantContextProvider,
+} from "./data-list-descriptor-context"
+
+export interface DataListDescriptorsProps<TRenderItem>
+    extends Omit<
+        DataListDescriptorContextProviderContext,
+        "children" | "attachDescriptors" | "updateDescriptorIndex"
+    > {
+    descriptors: React.ReactNode
+    setDescriptors: React.Dispatch<React.SetStateAction<DataListDescriptorsType<TRenderItem>>>
+}
+
+export function DataListDescriptors<TRenderItem>({
+    descriptors,
+    setDescriptors,
+}: DataListDescriptorsProps<TRenderItem>) {
+    const attachDescriptors: DataListDescriptorContextProviderContext["attachDescriptors"] =
+        React.useCallback(
+            (index: number, additionalDescriptors: Array<DataListDescriptor<TRenderItem>>) => {
+                setDescriptors((prevDescriptors) => {
+                    const newDescriptors = new Map(prevDescriptors)
+                    newDescriptors.set(index, additionalDescriptors)
+                    return newDescriptors
+                })
+
+                return () => {
+                    setDescriptors((prevDescriptors) => {
+                        const newDescriptors = new Map(prevDescriptors)
+                        newDescriptors.delete(index)
+                        return newDescriptors
+                    })
+                }
+            },
+            [setDescriptors]
+        )
+
+    return (
+        <DataListDescriptorContextProvider attachDescriptors={attachDescriptors}>
+            <DataListDescriptorDescendantContextProvider>
+                {descriptors}
+            </DataListDescriptorDescendantContextProvider>
+        </DataListDescriptorContextProvider>
+    )
+}

src/data-list-descriptor-context.tsx

@@ -0,0 +1,79 @@
+import React, {useDeferredValue} from "react"
+
+import type {
+    DataListDescriptors,
+    DataListRenderer,
+    DataListRendererProps as DataListRendererPropsType,
+    DataListRendererRootRenderItem,
+    DataListRendererRootRenderItemArgs,
+    DataListRenderListItemInfo,
+} from "./data-list-types"
+import {DataListRendererContextProvider} from "./data-list-renderer-context"
+import {cancelFrame, requestFrame} from "./utils/request-frame"
+
+export interface DataListMasterRendererProps<TRenderItem>
+    extends Omit<DataListRendererPropsType<TRenderItem>, "data" | "rootRenderItem" | "getItemId"> {
+    renderer: DataListRenderer<TRenderItem> | ReturnType<DataListRenderer<TRenderItem>>
+    descriptors: DataListDescriptors<TRenderItem>
+}
+
+export function DataListMasterRenderer<TRenderItem>({
+    renderer,
+    descriptors,
+    ...rest
+}: DataListMasterRendererProps<TRenderItem>) {
+    const newData = React.useMemo((): Array<
+        DataListRendererRootRenderItemArgs<TRenderItem>["item"]
+    > => {
+        const sortedDescriptors = [...descriptors.entries()].sort((a, b) => a[0] - b[0])
+
+        return sortedDescriptors.flatMap(([index, descriptors]) =>
+            descriptors.map((d) => ({
+                descriptor: {
+                    ...d,
+                    id: [index, ...(Array.isArray(d.id) ? d.id : [d.id])],
+                },
+                descriptorSourceIndex: index,
+            }))
+        )
+    }, [descriptors])
+
+    const deferredData = useDeferredValue(newData)
+
+    const hasInitialPaintedRef = React.useRef(false)
+    React.useLayoutEffect(() => {
+        if (!hasInitialPaintedRef.current) {
+            const id = requestFrame(() => {
+                hasInitialPaintedRef.current = true
+            })
+
+            return () => cancelFrame(id)
+        }
+
+        return
+    }, [])
+
+    // Only use deferred data after first mount/paint.
+    const data = hasInitialPaintedRef.current ? deferredData : newData
+
+    const rootRenderItem: DataListRendererRootRenderItem<TRenderItem> = React.useCallback(
+        ({item, index}) => item.descriptor.render({...item, index, allData: data}),
+        [data]
+    )
+
+    const getItemId = React.useCallback(
+        (item: DataListRenderListItemInfo<TRenderItem>) =>
+            (Array.isArray(item.descriptor.id) ? item.descriptor.id : [item.descriptor.id]).join(
+                ":"
+            ),
+        []
+    )
+
+    const extraProps = {data, rootRenderItem, getItemId}
+
+    return (
+        <DataListRendererContextProvider {...rest} {...extraProps}>
+            {typeof renderer === "function" ? renderer({...rest, ...extraProps}) : renderer}
+        </DataListRendererContextProvider>
+    )
+}