react-window 2.0.0 → 2.0.2-alpha.0

package/docs/assets/useCitiesByState-_PN38xmv.js

@@ -0,0 +1,2 @@
+import{j as t,c as e,r as s}from"./index-Dfhz9Ad4.js";import{L as i}from"./List-CsalXuo6.js";import{j as a}from"./addresses-CDQyd4n9.js";function r({items:e}){return t.jsx(i,{rowComponent:o,rowCount:e.length,rowHeight:n,rowProps:{items:e}})}function n(t,{items:e}){switch(e[t].type){case"state":return 30;case"zip":return 25}}function o({index:s,items:i,style:a}){const r=i[s],n=function(t){return e("flex items-center justify-between gap-2",{"text-3xl text-sky-300":"state"===t.type})}(r);return t.jsxs("div",{className:n,style:a,children:["state"===r.type?t.jsx("span",{children:r.state}):t.jsxs("span",{children:[r.city,", ",r.zip]}),t.jsx("div",{className:"text-slate-500 text-xs",children:`${s+1} of ${i.length}`})]})}function c(){return s.useMemo(()=>{const t=[];if(a){let e="";a.sort((t,e)=>t.state!==e.state?t.state.localeCompare(e.state):t.city!==e.city?t.city.localeCompare(e.city):t.zip.localeCompare(e.zip)).forEach(s=>{s.state!==e&&(e=s.state,t.push({type:"state",state:s.state})),t.push({type:"zip",city:s.city,zip:s.zip})})}return t},[])}export{r as E,o as R,c as u};
+//# sourceMappingURL=useCitiesByState-_PN38xmv.js.map

package/docs/assets/useCitiesByState-_PN38xmv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCitiesByState-_PN38xmv.js","sources":["../../src/routes/list/examples/ListVariableRowHeights.example.tsx","../../src/routes/list/hooks/useCitiesByState.ts"],"sourcesContent":["import { type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\n// <begin>\n\nimport {\n  List,\n  type ListImperativeAPI,\n  type RowComponentProps\n} from \"react-window\";\n\ntype Item =\n  | { type: \"state\"; state: string }\n  | { type: \"zip\"; city: string; zip: string };\n\ntype RowProps = {\n  items: Item[];\n};\n\nfunction Example({ items }: { items: Item[] }) {\n  return (\n    <List<RowProps>\n      rowComponent={RowComponent}\n      rowCount={items.length}\n      rowHeight={rowHeight}\n      rowProps={{ items }}\n    />\n  );\n}\n\nfunction rowHeight(index: number, { items }: RowProps) {\n  switch (items[index].type) {\n    case \"state\": {\n      return 30;\n    }\n    case \"zip\": {\n      return 25;\n    }\n  }\n}\n\nfunction RowComponent({ index, items, style }: RowComponentProps<RowProps>) {\n  const item = items[index];\n\n  const className = getClassName(item);\n\n  return (\n    <div className={className} style={style}>\n      {item.type === \"state\" ? (\n        <span>{item.state}</span>\n      ) : (\n        <span>\n          {item.city}, {item.zip}\n        </span>\n      )}\n      <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${items.length}`}</div>\n    </div>\n  );\n}\n\n// <end>\n\nfunction ExampleWithRef({\n  items,\n  listRef\n}: {\n  items: Item[];\n  listRef: Ref<ListImperativeAPI>;\n}) {\n  return (\n    <List\n      listRef={listRef}\n      rowComponent={RowComponent}\n      rowCount={items.length}\n      rowHeight={rowHeight}\n      rowProps={{ items }}\n    />\n  );\n}\n\nfunction getClassName(item: Item) {\n  return cn(\"flex items-center justify-between gap-2\", {\n    \"text-3xl text-sky-300\": item.type === \"state\"\n  });\n}\n\nexport { Example, ExampleWithRef, RowComponent };\nexport type { Item, RowProps };\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/addresses.json\";\n\ntype Item =\n  | { type: \"state\"; state: string }\n  | { type: \"zip\"; city: string; zip: string };\n\nexport function useCitiesByState(): Item[] {\n  return useMemo(() => {\n    const items: Item[] = [];\n\n    if (json) {\n      let currentState: string = \"\";\n\n      json\n        .sort((a, b) => {\n          if (a.state !== b.state) {\n            return a.state.localeCompare(b.state);\n          } else if (a.city !== b.city) {\n            return a.city.localeCompare(b.city);\n          } else {\n            return a.zip.localeCompare(b.zip);\n          }\n        })\n        .forEach((address) => {\n          if (address.state !== currentState) {\n            currentState = address.state;\n\n            items.push({\n              type: \"state\",\n              state: address.state\n            });\n          }\n\n          items.push({\n            type: \"zip\",\n            city: address.city,\n            zip: address.zip\n          });\n        });\n    }\n\n    return items;\n  }, []);\n}\n"],"names":["Example","items","jsx","List","rowComponent","RowComponent","rowCount","length","rowHeight","rowProps","index","type","style","item","className","cn","getClassName","jsxs","children","state","city","zip","useCitiesByState","useMemo","json","currentState","sort","a","b","localeCompare","forEach","address","push"],"mappings":"yIAmBA,SAASA,GAAQC,MAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,aAAcC,EACdC,SAAUL,EAAMM,OAChBC,YACAC,SAAU,CAAER,UAGlB,CAEA,SAASO,EAAUE,GAAeT,MAAEA,IAClC,OAAQA,EAAMS,GAAOC,MACnB,IAAK,QACH,OAAO,GAET,IAAK,MACH,OAAO,GAGb,CAEA,SAASN,GAAaK,MAAEA,EAAAT,MAAOA,EAAAW,MAAOA,IACpC,MAAMC,EAAOZ,EAAMS,GAEbI,EAoCR,SAAsBD,GACpB,OAAOE,EAAG,0CAA2C,CACnD,wBAAuC,UAAdF,EAAKF,MAElC,CAxCoBK,CAAaH,GAE/B,SACEI,KAAC,MAAA,CAAIH,YAAsBF,QACxBM,SAAA,CAAc,UAAdL,EAAKF,KACJT,EAAAA,IAAC,OAAA,CAAMgB,WAAKC,eAEX,OAAA,CACED,SAAA,CAAAL,EAAKO,KAAK,KAAGP,EAAKQ,OAGvBnB,EAAAA,IAAC,MAAA,CAAIY,UAAU,yBAA0BI,SAAA,GAAGR,EAAQ,QAAQT,EAAMM,aAGxE,CCnDO,SAASe,IACd,OAAOC,EAAAA,QAAQ,KACb,MAAMtB,EAAgB,GAEtB,GAAIuB,EAAM,CACR,IAAIC,EAAuB,GAE3BD,EACGE,KAAK,CAACC,EAAGC,IACJD,EAAER,QAAUS,EAAET,MACTQ,EAAER,MAAMU,cAAcD,EAAET,OACtBQ,EAAEP,OAASQ,EAAER,KACfO,EAAEP,KAAKS,cAAcD,EAAER,MAEvBO,EAAEN,IAAIQ,cAAcD,EAAEP,MAGhCS,QAASC,IACJA,EAAQZ,QAAUM,IACpBA,EAAeM,EAAQZ,MAEvBlB,EAAM+B,KAAK,CACTrB,KAAM,QACNQ,MAAOY,EAAQZ,SAInBlB,EAAM+B,KAAK,CACTrB,KAAM,MACNS,KAAMW,EAAQX,KACdC,IAAKU,EAAQV,OAGrB,CAEA,OAAOpB,GACN,GACL"}

package/docs/assets/useContacts-CDDyJV-g.js

@@ -0,0 +1,2 @@
+import{r as e}from"./index-Dfhz9Ad4.js";import{j as t}from"./contacts-Bxrk2JS2.js";const a=["title","first_name","last_name","email","gender","address","city","state","zip","timezone","company","job_title"];function r(e){return a[e]}function s(e){switch(r(e)){case"address":return 250;case"email":return 300;case"job_title":return 150;case"timezone":return 200;case"zip":return 75;default:return 100}}function n(){return e.useMemo(()=>t?t.sort((e,t)=>e.title!==t.title?e.title.localeCompare(t.title):e.first_name!==t.first_name?e.first_name.localeCompare(t.first_name):e.last_name.localeCompare(t.last_name)):[],[])}export{a as C,s as c,r as i,n as u};
+//# sourceMappingURL=useContacts-CDDyJV-g.js.map

package/docs/assets/useContacts-CDDyJV-g.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContacts-CDDyJV-g.js","sources":["../../src/routes/grid/examples/shared.ts","../../src/routes/grid/examples/columnWidth.example.ts","../../src/routes/grid/hooks/useContacts.ts"],"sourcesContent":["import type { Contact } from \"./Grid.example\";\n\nexport const COLUMN_KEYS: (keyof Contact)[] = [\n  \"title\",\n  \"first_name\",\n  \"last_name\",\n  \"email\",\n  \"gender\",\n  \"address\",\n  \"city\",\n  \"state\",\n  \"zip\",\n  \"timezone\",\n  \"company\",\n  \"job_title\"\n];\n\nexport function indexToColumn(columnIndex: number): keyof Contact {\n  return COLUMN_KEYS[columnIndex];\n}\n","import { indexToColumn } from \"./shared\";\n\n// <begin>\n\nfunction columnWidth(index: number) {\n  switch (indexToColumn(index)) {\n    case \"address\": {\n      return 250;\n    }\n    case \"email\": {\n      return 300;\n    }\n    case \"job_title\": {\n      return 150;\n    }\n    case \"timezone\": {\n      return 200;\n    }\n    case \"zip\": {\n      return 75;\n    }\n    default: {\n      return 100;\n    }\n  }\n}\n\n// <end>\n\nexport { columnWidth };\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/contacts.json\";\n\ntype Contact = (typeof json)[0];\n\nexport function useContacts(): Contact[] {\n  return useMemo(() => {\n    if (json) {\n      return json.sort((a, b) => {\n        if (a.title !== b.title) {\n          return a.title.localeCompare(b.title);\n        } else if (a.first_name !== b.first_name) {\n          return a.first_name.localeCompare(b.first_name);\n        } else {\n          return a.last_name.localeCompare(b.last_name);\n        }\n      });\n    }\n\n    return [];\n  }, []);\n}\n"],"names":["COLUMN_KEYS","indexToColumn","columnIndex","columnWidth","index","useContacts","useMemo","json","sort","a","b","title","localeCompare","first_name","last_name"],"mappings":"mFAEO,MAAMA,EAAiC,CAC5C,QACA,aACA,YACA,QACA,SACA,UACA,OACA,QACA,MACA,WACA,UACA,aAGK,SAASC,EAAcC,GAC5B,OAAOF,EAAYE,EACrB,CCfA,SAASC,EAAYC,GACnB,OAAQH,EAAcG,IACpB,IAAK,UACH,OAAO,IAET,IAAK,QACH,OAAO,IAET,IAAK,YACH,OAAO,IAET,IAAK,WACH,OAAO,IAET,IAAK,MACH,OAAO,GAET,QACE,OAAO,IAGb,CCpBO,SAASC,IACd,OAAOC,EAAAA,QAAQ,IACTC,EACKA,EAAKC,KAAK,CAACC,EAAGC,IACfD,EAAEE,QAAUD,EAAEC,MACTF,EAAEE,MAAMC,cAAcF,EAAEC,OACtBF,EAAEI,aAAeH,EAAEG,WACrBJ,EAAEI,WAAWD,cAAcF,EAAEG,YAE7BJ,EAAEK,UAAUF,cAAcF,EAAEI,YAKlC,GACN,GACL"}

package/docs/generated/code-snippets/CellComponentAriaRoles.json

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">ariaAttributes</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">columnIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">rowIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">ariaAttributes</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-comment\">/* Data */</span><span class=\"\">}</span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
+  "typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">ariaAttributes</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">columnIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">rowIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">style</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">CellComponentProps</span><span class=\"\">&#60;</span><span class=\"tok-typeName\">object</span><span class=\"\">&#62;</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">ariaAttributes</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-comment\">/* Data */</span><span class=\"\">}</span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
+}

package/docs/generated/code-snippets/GridAriaRoles.json

@@ -0,0 +1,3 @@
+{
+  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"grid\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colcount</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"100\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowcount</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1000\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"row\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"0\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"gridcell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"0\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"gridcell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-comment\">&#60;!-- More columns ... --&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-comment\">&#60;!-- More rows ... --&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}

package/docs/generated/code-snippets/ListAriaRoles.json

@@ -0,0 +1,3 @@
+{
+  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"list\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"listitem\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">aria-posinset</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">aria-setsize</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1000\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\">Row 1</span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"listitem\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">aria-posinset</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"2\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">aria-setsize</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1000\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\">Row 2</span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-comment\">&#60;!-- More rows ... --&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}

package/docs/generated/code-snippets/RowComponentAriaRoles.json

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">ariaAttributes</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">names</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">ariaAttributes</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
+  "typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">ariaAttributes</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">names</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">style</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowComponentProps</span><span class=\"\">&#60;</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\">&#62;</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">ariaAttributes</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
+}

package/docs/generated/code-snippets/TableAriaAttributes.json

@@ -0,0 +1,3 @@
+{
+  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"table\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colcount</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"3\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowcount</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1000\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"row\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">City</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"2\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">State</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"3\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">Zip</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"row\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"2\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"1\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"2\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"3\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-comment\">&#60;!-- More rows ... --&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}

package/docs/generated/code-snippets/TableAriaOverrideProps.json

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"table\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colcount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">3</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowcount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1000</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"row\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\">City</span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\">State</span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\">Zip</span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"rowgroup\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">otherListProps</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-comment\">// Add 1 to the row index to account for the header row</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">index</span><span class=\"\"> </span><span class=\"tok-operator\">+</span><span class=\"\"> </span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"row\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\">...</span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">2</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\">...</span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">3</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\">...</span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
+  "typeScript": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponentProps</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"table\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colcount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">3</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowcount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1000</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"row\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\">City</span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\">State</span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"columnheader\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 12ch; text-indent: -2ch;\"><span class=\"\">Zip</span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"rowgroup\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">otherListProps</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowComponentProps</span><span class=\"\">&#60;</span><span class=\"tok-typeName\">object</span><span class=\"\">&#62;</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-comment\">// Add 1 to the row index to account for the header row</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-rowindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">index</span><span class=\"\"> </span><span class=\"tok-operator\">+</span><span class=\"\"> </span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"row\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">1</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\">...</span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">2</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\">...</span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">role</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"cell\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">aria-colindex</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">3</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\">...</span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
+}

package/docs/generated/js-docs/Grid.json

@@ -116,7 +116,7 @@
       ],
       "required": true,
       "type": {
-        "name": "(props: { columnIndex: number; rowIndex: number; style: CSSProperties; } & CellProps) => ReactNode"
+        "name": "(props: { ariaAttributes: { \"aria-colindex\": number; role: \"gridcell\"; }; columnIndex: number; rowIndex: number; style: CSSProperties; } & CellProps) => ReactNode"
       }
     },
     "cellProps": {

package/docs/generated/js-docs/List.json

@@ -229,7 +229,7 @@
       ],
       "required": true,
       "type": {
-        "name": "(props: { index: number; style: CSSProperties; } & RowProps) => ReactNode"
+        "name": "(props: { ariaAttributes: { \"aria-posinset\": number; \"aria-setsize\": number; role: \"listitem\"; }; index: number; style: CSSProperties; } & RowProps) => ReactNode"
       }
     },
     "rowCount": {

package/docs/index.html

@@ -7,21 +7,27 @@
 
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Documentation for react-window.
+      react-window is a set of React components for rendering large lists and grids.
+      This website contains demos and code samples showing how to use the library."
+    />
+
     <meta
       property="og:title"
       content="react-window: React components for rendering large lists and grids"
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://react-window.vercel.app/" />
-    <!-- Update URL after v2 merge -->
     <meta
       property="og:image"
       content="https://react-window.vercel.app/og.png"
     />
     <meta property="og:image:width" content="1500" />
     <meta property="og:image:height" content="500" />
-    <script type="module" crossorigin src="/assets/index-LE94V_KA.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-AW1og9rz.css">
+    <script type="module" crossorigin src="/assets/index-Dfhz9Ad4.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DEYagqsv.css">
   </head>
   <body>
     <div id="root"></div>

package/docs/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /