react-window 2.1.0 → 2.1.2

package/docs/assets/ImperativeApiRoute-DXzOo4Dn.js

@@ -0,0 +1,2 @@
+import{r as s,j as a,B as n,a as t,C as p}from"./index-Cnm6lMUF.js";import{G as e}from"./Grid-BjC_BndR.js";import{B as o}from"./arePropsEqual-CaQN03VG.js";import{C as l}from"./Code-r2plEB3N.js";import{H as i}from"./Header-CWpEkQSA.js";import{L as c}from"./LoadingSpinner-D94ZhMZx.js";import{S as r}from"./Select-D7Hzggtt.js";import{C as d}from"./CellComponent.example-uUYIhpiW.js";import{u,C as k,c as h}from"./useContacts-X0AOlpLx.js";import{C as m}from"./ContinueLink-BDXFlJ2t.js";import"./contacts-Bxrk2JS2.js";const v=s.useRef,g='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</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">const</span><span class=""> </span><span class="tok-variableName tok-definition">grid</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">gridRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</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-variableName">grid</span><span class="">?.</span><span class="tok-propertyName">scrollToCell</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-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">10</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-propertyName tok-definition">rowAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</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="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="tok-punctuation">;</span></div>',f='<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">useGridCallbackRef</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-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</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">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">grid</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setGrid</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridCallbackRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">useCustomHook</span><span class="tok-punctuation">(</span><span class="tok-variableName">grid</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></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">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setGrid</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</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>',x='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><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-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</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">const</span><span class=""> </span><span class="tok-variableName tok-definition">gridRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</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></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">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">gridRef</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</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>',y='<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">useGridRef</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></div>',b={label:"",value:""},N=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));N.unshift(b);const j=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));j.unshift(b);const w=k.map(s=>({label:s,value:s})).sort((s,a)=>s.label.localeCompare(a.label));function C(){const C=u(),A=s.useMemo(()=>{const s=[];return C&&(C.reduce((s,a)=>(s.includes(a.title)||s.push(a.title),s),new Array).sort().forEach(a=>{s.push({label:a,value:a})}),s.unshift(b)),s},[C]),[I,R]=s.useState(),[G,P]=s.useState(),[S,T]=s.useState(b),[E,H]=s.useState(b),L=v(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(i,{section:"Grids",title:"Imperative API"}),a.jsx("div",{children:"Grid provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),a.jsx(l,{html:y}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(l,{html:x}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(l,{html:g}),a.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(r,{className:"flex-1",onChange:R,options:N,placeholder:"Align",value:I}),a.jsx(r,{className:"flex-1",onChange:P,options:j,placeholder:"Scroll behavior",value:G})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(r,{className:"flex-1",onChange:H,options:A,placeholder:"Job title",value:E}),a.jsx(r,{className:"flex-1",onChange:T,options:w,placeholder:"Column",value:S}),a.jsx(t,{className:"shrink-0",disabled:!S.value&&!E.value,onClick:()=>{const s=L.current;if(s){const a=S?.value?k.indexOf(S.value):void 0,n=E?.value?C.findIndex(s=>s.title===E.value):void 0;void 0!==a&&void 0!==n?s.scrollToCell({behavior:G?.value,columnAlign:I?.value,columnIndex:a,rowAlign:I?.value,rowIndex:n}):void 0!==a?s.scrollToColumn({align:I?.value,behavior:G?.value,index:a}):void 0!==n&&s.scrollToRow({align:I?.value,behavior:G?.value,index:n})}},children:"Scroll"})]}),a.jsxs(o,{className:"h-50","data-focus-within":"bold",children:[!C.length&&a.jsx(c,{}),a.jsx(e,{cellComponent:d,cellProps:{contacts:C},columnCount:w.length,columnWidth:h,gridRef:L,rowCount:C.length,rowHeight:25})]}),a.jsxs("div",{children:["The Grid API also provides ",a.jsx("code",{children:"scrollToColumn"})," and"," ",a.jsx("code",{children:"scrollToRow"})," methods for single-axis scrolling."]}),a.jsxs(p,{intent:"primary",children:[a.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),a.jsx(l,{html:f}),a.jsx(m,{to:"/grid/aria-roles",title:"ARIA roles"})]})}export{C as default};
+//# sourceMappingURL=ImperativeApiRoute-DXzOo4Dn.js.map

package/docs/assets/ImperativeApiRoute-DXzOo4Dn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImperativeApiRoute-DXzOo4Dn.js","sources":["../../lib/components/grid/useGridRef.ts","../../src/routes/grid/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { GridImperativeAPI } from \"./types\";\n\n/**\n * Convenience hook to return a properly typed ref for the Grid component.\n */\nexport const useGridRef = useRef as typeof useRef<GridImperativeAPI>;\n","import { useMemo, useState } from \"react\";\nimport { Grid, useGridRef, type Align } from \"react-window\";\nimport gridRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/gridRefClickEventHandler.json\";\nimport useGridCallbackRefMarkdown from \"../../../public/generated/code-snippets/useGridCallbackRef.json\";\nimport useGridRefMarkdown from \"../../../public/generated/code-snippets/useGridRef.json\";\nimport useGridRefImportMarkdown from \"../../../public/generated/code-snippets/useGridRefImport.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Select, type Option } from \"../../components/Select\";\nimport { CellComponent } from \"./examples/CellComponent.example\";\nimport { columnWidth } from \"./examples/columnWidth.example\";\nimport type { Contact } from \"./examples/Grid.example\";\nimport { COLUMN_KEYS } from \"./examples/shared\";\nimport { useContacts } from \"./hooks/useContacts\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\n\nconst EMPTY_OPTION: Option<string> = {\n  label: \"\",\n  value: \"\"\n};\n\nconst ALIGNMENTS: Option<Align>[] = (\n  [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n  label: `align: ${value}`,\n  value\n}));\nALIGNMENTS.unshift(EMPTY_OPTION as Option<Align>);\n\nconst BEHAVIORS: Option<ScrollBehavior>[] = (\n  [\"auto\", \"instant\", \"smooth\"] satisfies ScrollBehavior[]\n).map((value) => ({\n  label: `behavior: ${value}`,\n  value\n}));\nBEHAVIORS.unshift(EMPTY_OPTION as Option<ScrollBehavior>);\n\nconst COLUMNS: Option<string>[] = COLUMN_KEYS.map((key) => ({\n  label: key,\n  value: key\n})).sort((a, b) => a.label.localeCompare(b.label));\n\nexport default function GridImperativeApiRoute() {\n  const contacts = useContacts();\n\n  const titleOptions = useMemo<Option<string>[]>(() => {\n    const options: Option<string>[] = [];\n    if (contacts) {\n      contacts\n        .reduce((array, contact) => {\n          if (!array.includes(contact.title)) {\n            array.push(contact.title);\n          }\n          return array;\n        }, new Array<string>())\n        .sort()\n        .forEach((title) => {\n          options.push({\n            label: title,\n            value: title\n          });\n        });\n\n      options.unshift(EMPTY_OPTION);\n    }\n\n    return options;\n  }, [contacts]);\n\n  const [align, setAlign] = useState<Option<Align> | undefined>();\n  const [behavior, setBehavior] = useState<\n    Option<ScrollBehavior> | undefined\n  >();\n  const [column, setColumn] = useState<Option<string>>(EMPTY_OPTION);\n  const [title, setTitle] = useState<Option<string>>(EMPTY_OPTION);\n\n  const gridRef = useGridRef(null);\n\n  const scrollToCell = () => {\n    const grid = gridRef.current;\n    if (grid) {\n      const columnIndex = column?.value\n        ? COLUMN_KEYS.indexOf(column.value as keyof Contact)\n        : undefined;\n\n      const rowIndex = title?.value\n        ? contacts.findIndex((row) => row.title === title.value)\n        : undefined;\n\n      if (columnIndex !== undefined && rowIndex !== undefined) {\n        grid.scrollToCell({\n          behavior: behavior?.value,\n          columnAlign: align?.value,\n          columnIndex,\n          rowAlign: align?.value,\n          rowIndex\n        });\n      } else if (columnIndex !== undefined) {\n        grid.scrollToColumn({\n          align: align?.value,\n          behavior: behavior?.value,\n          index: columnIndex\n        });\n      } else if (rowIndex !== undefined) {\n        grid.scrollToRow({\n          align: align?.value,\n          behavior: behavior?.value,\n          index: rowIndex\n        });\n      }\n    }\n  };\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Grids\" title=\"Imperative API\" />\n      <div>\n        Grid provides an imperative API for responding to events. The\n        recommended way to access this API is to use the exported ref hook:\n      </div>\n      <Code html={useGridRefImportMarkdown.html} />\n      <div>Attach the ref during render:</div>\n      <Code html={useGridRefMarkdown.html} />\n      <div>And call API methods in an event handler:</div>\n      <Code html={gridRefClickEventHandlerMarkdown.html} />\n      <div>The form below uses the imperative API to scroll the list:</div>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setAlign}\n          options={ALIGNMENTS}\n          placeholder=\"Align\"\n          value={align}\n        />\n        <Select\n          className=\"flex-1\"\n          onChange={setBehavior}\n          options={BEHAVIORS}\n          placeholder=\"Scroll behavior\"\n          value={behavior}\n        />\n      </Box>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setTitle}\n          options={titleOptions}\n          placeholder=\"Job title\"\n          value={title}\n        />\n        <Select\n          className=\"flex-1\"\n          onChange={setColumn}\n          options={COLUMNS}\n          placeholder=\"Column\"\n          value={column}\n        />\n        <Button\n          className=\"shrink-0\"\n          disabled={!column.value && !title.value}\n          onClick={scrollToCell}\n        >\n          Scroll\n        </Button>\n      </Box>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <Grid\n          cellComponent={CellComponent}\n          cellProps={{ contacts }}\n          columnCount={COLUMNS.length}\n          columnWidth={columnWidth}\n          gridRef={gridRef}\n          rowCount={contacts.length}\n          rowHeight={25}\n        />\n      </Block>\n      <div>\n        The Grid API also provides <code>scrollToColumn</code> and{\" \"}\n        <code>scrollToRow</code> methods for single-axis scrolling.\n      </div>\n      <Callout intent=\"primary\">\n        <strong className=\"text-sky-300\">Note</strong> If you are passing the\n        ref to another component or hook, use the ref callback function instead.\n      </Callout>\n      <Code html={useGridCallbackRefMarkdown.html} />\n      <ContinueLink to=\"/grid/aria-roles\" title=\"ARIA roles\" />\n    </Box>\n  );\n}\n"],"names":["useGridRef","useRef","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","COLUMNS","COLUMN_KEYS","key","sort","a","b","localeCompare","GridImperativeApiRoute","contacts","useContacts","titleOptions","useMemo","options","reduce","array","contact","includes","title","push","Array","forEach","align","setAlign","useState","behavior","setBehavior","column","setColumn","setTitle","gridRef","jsxs","Box","direction","gap","children","jsx","Header","section","Code","html","useGridRefImportMarkdown","useGridRefMarkdown","gridRefClickEventHandlerMarkdown","Select","className","onChange","placeholder","Button","disabled","onClick","grid","current","columnIndex","indexOf","rowIndex","findIndex","row","scrollToCell","columnAlign","rowAlign","scrollToColumn","index","scrollToRow","Block","length","LoadingSpinner","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","rowHeight","Callout","intent","useGridCallbackRefMarkdown","ContinueLink","to"],"mappings":"kgBAMO,MAAMA,EAAaC,EAAAA,koSCepBC,EAA+B,CACnCC,MAAO,GACPC,MAAO,IAGHC,EACJ,CAAC,OAAQ,SAAU,MAAO,QAAS,SACnCC,IAAKF,IAAA,CACLD,MAAO,UAAUC,IACjBA,WAEFC,EAAWE,QAAQL,GAEnB,MAAMM,EACJ,CAAC,OAAQ,UAAW,UACpBF,IAAKF,IAAA,CACLD,MAAO,aAAaC,IACpBA,WAEFI,EAAUD,QAAQL,GAElB,MAAMO,EAA4BC,EAAYJ,IAAKK,IAAA,CACjDR,MAAOQ,EACPP,MAAOO,KACLC,KAAK,CAACC,EAAGC,IAAMD,EAAEV,MAAMY,cAAcD,EAAEX,QAE3C,SAAwBa,IACtB,MAAMC,EAAWC,IAEXC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4B,GAoBlC,OAnBIJ,IACFA,EACGK,OAAO,CAACC,EAAOC,KACTD,EAAME,SAASD,EAAQE,QAC1BH,EAAMI,KAAKH,EAAQE,OAEdH,GACN,IAAIK,OACNhB,OACAiB,QAASH,IACRL,EAAQM,KAAK,CACXxB,MAAOuB,EACPtB,MAAOsB,MAIbL,EAAQd,QAAQL,IAGXmB,GACN,CAACJ,KAEGa,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAQC,GAAaJ,EAAAA,SAAyB9B,IAC9CwB,EAAOW,GAAYL,EAAAA,SAAyB9B,GAE7CoC,EAAUtC,EAAW,MAqC3B,OACEuC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQpB,MAAM,qBAC9BkB,IAAC,OAAID,SAAA,wIAILC,IAACG,EAAA,CAAKC,KAAMC,MACZL,IAAC,OAAID,SAAA,oCACLC,IAACG,EAAA,CAAKC,KAAME,MACZN,IAAC,OAAID,SAAA,gDACLC,IAACG,EAAA,CAAKC,KAAMG,MACZP,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUvB,EACVV,QAAShB,EACTkD,YAAY,QACZnD,MAAO0B,IAETc,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUpB,EACVb,QAASb,EACT+C,YAAY,kBACZnD,MAAO6B,OAGXM,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUjB,EACVhB,QAASF,EACToC,YAAY,YACZnD,MAAOsB,IAETkB,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUlB,EACVf,QAASZ,EACT8C,YAAY,SACZnD,MAAO+B,IAETS,EAAAA,IAACY,EAAA,CACCH,UAAU,WACVI,UAAWtB,EAAO/B,QAAUsB,EAAMtB,MAClCsD,QAlFa,KACnB,MAAMC,EAAOrB,EAAQsB,QACrB,GAAID,EAAM,CACR,MAAME,EAAc1B,GAAQ/B,MACxBM,EAAYoD,QAAQ3B,EAAO/B,YAC3B,EAEE2D,EAAWrC,GAAOtB,MACpBa,EAAS+C,UAAWC,GAAQA,EAAIvC,QAAUA,EAAMtB,YAChD,OAEgB,IAAhByD,QAA0C,IAAbE,EAC/BJ,EAAKO,aAAa,CAChBjC,SAAUA,GAAU7B,MACpB+D,YAAarC,GAAO1B,MACpByD,cACAO,SAAUtC,GAAO1B,MACjB2D,kBAEuB,IAAhBF,EACTF,EAAKU,eAAe,CAClBvC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOT,SAEa,IAAbE,GACTJ,EAAKY,YAAY,CACfzC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOP,GAGb,GAmDKpB,SAAA,cAIHJ,EAAAA,KAACiC,EAAA,CAAMnB,UAAU,OAAO,oBAAkB,OACvCV,SAAA,EAAC1B,EAASwD,cAAWC,EAAA,CAAA,GACtB9B,EAAAA,IAAC+B,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAE7D,YACb8D,YAAatE,EAAQgE,OACrBO,cACA1C,UACA2C,SAAUhE,EAASwD,OACnBS,UAAW,eAGd,MAAA,CAAIvC,SAAA,CAAA,gCACwBC,IAAC,QAAKD,SAAA,mBAAqB,OAAK,MAC3DC,IAAC,QAAKD,SAAA,gBAAkB,2CAE1BJ,KAAC4C,EAAA,CAAQC,OAAO,UACdzC,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOS,UAAU,eAAeV,SAAA,SAAa,wGAGhDC,IAACG,EAAA,CAAKC,KAAMqC,IACZzC,EAAAA,IAAC0C,EAAA,CAAaC,GAAG,mBAAmB7D,MAAM,iBAGhD"}

package/docs/assets/List-CB_lBMmJ.js

@@ -0,0 +1,2 @@
+import{r as e,j as t}from"./index-Cnm6lMUF.js";import{u as o,a as s,b as n}from"./arePropsEqual-CaQN03VG.js";function r({children:r,className:i,defaultHeight:a=0,listRef:l,onResize:c,onRowsRendered:d,overscanCount:u=3,rowComponent:m,rowCount:f,rowHeight:p,rowProps:x,tagName:h="div",style:v,...g}){const I=o(x),w=e.useMemo(()=>e.memo(m,s),[m]),[z,b]=e.useState(null),{getCellBounds:y,getEstimatedSize:C,scrollToIndex:E,startIndexOverscan:R,startIndexVisible:S,stopIndexOverscan:T,stopIndexVisible:j}=n({containerElement:z,containerStyle:v,defaultContainerSize:a,direction:"vertical",itemCount:f,itemProps:I,itemSize:p,onResize:c,overscanCount:u});e.useImperativeHandle(l,()=>({get element(){return z},scrollToRow({align:e="auto",behavior:t="auto",index:o}){const s=E({align:e,containerScrollOffset:z?.scrollTop??0,index:o});"function"==typeof z?.scrollTo&&z.scrollTo({behavior:t,top:s})}}),[z,E]),e.useEffect(()=>{R>=0&&T>=0&&d&&d({startIndex:S,stopIndex:j},{startIndex:R,stopIndex:T})},[d,R,S,T,j]);const H=e.useMemo(()=>{const t=[];if(f>0)for(let o=R;o<=T;o++){const s=y(o);t.push(e.createElement(w,{...I,ariaAttributes:{"aria-posinset":o+1,"aria-setsize":f,role:"listitem"},key:o,index:o,style:{position:"absolute",left:0,transform:`translateY(${s.scrollOffset}px)`,height:s.size,width:"100%"}}))}return t},[w,y,f,I,R,T]),O=t.jsx("div",{"aria-hidden":!0,style:{height:C(),width:"100%",zIndex:-1}});return e.createElement(h,{role:"list",...g,className:i,ref:b,style:{position:"relative",maxHeight:"100%",flexGrow:1,overflowY:"auto",...v}},H,r,O)}export{r as L};
+//# sourceMappingURL=List-CB_lBMmJ.js.map

package/docs/assets/List-CB_lBMmJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List-CB_lBMmJ.js","sources":["../../lib/components/list/List.tsx"],"sourcesContent":["import {\n  createElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type ReactNode\n} from \"react\";\nimport { useVirtualizer } from \"../../core/useVirtualizer\";\nimport { useMemoizedObject } from \"../../hooks/useMemoizedObject\";\nimport type { Align, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { ListProps } from \"./types\";\n\nexport function List<\n  RowProps extends object,\n  TagName extends TagNames = \"div\"\n>({\n  children,\n  className,\n  defaultHeight = 0,\n  listRef,\n  onResize,\n  onRowsRendered,\n  overscanCount = 3,\n  rowComponent: RowComponentProp,\n  rowCount,\n  rowHeight,\n  rowProps: rowPropsUnstable,\n  tagName = \"div\" as TagName,\n  style,\n  ...rest\n}: ListProps<RowProps, TagName>) {\n  const rowProps = useMemoizedObject(rowPropsUnstable);\n  const RowComponent = useMemo(\n    () => memo(RowComponentProp, arePropsEqual),\n    [RowComponentProp]\n  );\n\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n  const {\n    getCellBounds,\n    getEstimatedSize,\n    scrollToIndex,\n    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\n  } = useVirtualizer({\n    containerElement: element,\n    containerStyle: style,\n    defaultContainerSize: defaultHeight,\n    direction: \"vertical\",\n    itemCount: rowCount,\n    itemProps: rowProps,\n    itemSize: rowHeight,\n    onResize,\n    overscanCount\n  });\n\n  useImperativeHandle(\n    listRef,\n    () => ({\n      get element() {\n        return element;\n      },\n\n      scrollToRow({\n        align = \"auto\",\n        behavior = \"auto\",\n        index\n      }: {\n        align?: Align;\n        behavior?: ScrollBehavior;\n        index: number;\n      }) {\n        const top = scrollToIndex({\n          align,\n          containerScrollOffset: element?.scrollTop ?? 0,\n          index\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            top\n          });\n        }\n      }\n    }),\n    [element, scrollToIndex]\n  );\n\n  useEffect(() => {\n    if (startIndexOverscan >= 0 && stopIndexOverscan >= 0 && onRowsRendered) {\n      onRowsRendered(\n        {\n          startIndex: startIndexVisible,\n          stopIndex: stopIndexVisible\n        },\n        {\n          startIndex: startIndexOverscan,\n          stopIndex: stopIndexOverscan\n        }\n      );\n    }\n  }, [\n    onRowsRendered,\n    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\n  ]);\n\n  const rows = useMemo(() => {\n    const children: ReactNode[] = [];\n    if (rowCount > 0) {\n      for (\n        let index = startIndexOverscan;\n        index <= stopIndexOverscan;\n        index++\n      ) {\n        const bounds = getCellBounds(index);\n\n        children.push(\n          <RowComponent\n            {...(rowProps as RowProps)}\n            ariaAttributes={{\n              \"aria-posinset\": index + 1,\n              \"aria-setsize\": rowCount,\n              role: \"listitem\"\n            }}\n            key={index}\n            index={index}\n            style={{\n              position: \"absolute\",\n              left: 0,\n              transform: `translateY(${bounds.scrollOffset}px)`,\n              height: bounds.size,\n              width: \"100%\"\n            }}\n          />\n        );\n      }\n    }\n    return children;\n  }, [\n    RowComponent,\n    getCellBounds,\n    rowCount,\n    rowProps,\n    startIndexOverscan,\n    stopIndexOverscan\n  ]);\n\n  const sizingElement = (\n    <div\n      aria-hidden\n      style={{\n        height: getEstimatedSize(),\n        width: \"100%\",\n        zIndex: -1\n      }}\n    ></div>\n  );\n\n  return createElement(\n    tagName,\n    {\n      role: \"list\",\n      ...rest,\n      className,\n      ref: setElement,\n      style: {\n        position: \"relative\",\n        maxHeight: \"100%\",\n        flexGrow: 1,\n        overflowY: \"auto\",\n        ...style\n      }\n    },\n    rows,\n    children,\n    sizingElement\n  );\n}\n"],"names":["List","children","className","defaultHeight","listRef","onResize","onRowsRendered","overscanCount","rowComponent","RowComponentProp","rowCount","rowHeight","rowProps","rowPropsUnstable","tagName","style","rest","useMemoizedObject","RowComponent","useMemo","memo","arePropsEqual","element","setElement","useState","getCellBounds","getEstimatedSize","scrollToIndex","startIndexOverscan","startIndexVisible","stopIndexOverscan","stopIndexVisible","useVirtualizer","containerElement","containerStyle","defaultContainerSize","direction","itemCount","itemProps","itemSize","useImperativeHandle","scrollToRow","align","behavior","index","top","containerScrollOffset","scrollTop","scrollTo","useEffect","startIndex","stopIndex","rows","bounds","push","createElement","ariaAttributes","role","key","position","left","transform","scrollOffset","height","size","width","sizingElement","jsx","zIndex","ref","maxHeight","flexGrow","overflowY"],"mappings":"6GAeO,SAASA,GAGdC,SACAA,EAAAC,UACAA,EAAAC,cACAA,EAAgB,EAAAC,QAChBA,EAAAC,SACAA,EAAAC,eACAA,EAAAC,cACAA,EAAgB,EAChBC,aAAcC,EAAAC,SACdA,EAAAC,UACAA,EACAC,SAAUC,EAAAC,QACVA,EAAU,MAAAC,MACVA,KACGC,IAEH,MAAMJ,EAAWK,EAAkBJ,GAC7BK,EAAeC,EAAAA,QACnB,IAAMC,EAAAA,KAAKX,EAAkBY,GAC7B,CAACZ,KAGIa,EAASC,GAAcC,EAAAA,SAAgC,OAExDC,cACJA,EAAAC,iBACAA,EAAAC,cACAA,EAAAC,mBACAA,EAAAC,kBACAA,EAAAC,kBACAA,EAAAC,iBACAA,GACEC,EAAe,CACjBC,iBAAkBX,EAClBY,eAAgBnB,EAChBoB,qBAAsBhC,EACtBiC,UAAW,WACXC,UAAW3B,EACX4B,UAAW1B,EACX2B,SAAU5B,EACVN,WACAE,kBAGFiC,EAAAA,oBACEpC,EACA,KAAA,CACE,WAAIkB,GACF,OAAOA,CACT,EAEA,WAAAmB,EAAYC,MACVA,EAAQ,OAAAC,SACRA,EAAW,OAAAC,MACXA,IAMA,MAAMC,EAAMlB,EAAc,CACxBe,QACAI,sBAAuBxB,GAASyB,WAAa,EAC7CH,UAG+B,mBAAtBtB,GAAS0B,UAClB1B,EAAQ0B,SAAS,CACfL,WACAE,OAGN,IAEF,CAACvB,EAASK,IAGZsB,EAAAA,UAAU,KACJrB,GAAsB,GAAKE,GAAqB,GAAKxB,GACvDA,EACE,CACE4C,WAAYrB,EACZsB,UAAWpB,GAEb,CACEmB,WAAYtB,EACZuB,UAAWrB,KAIhB,CACDxB,EACAsB,EACAC,EACAC,EACAC,IAGF,MAAMqB,EAAOjC,EAAAA,QAAQ,KACnB,MAAMlB,EAAwB,GAC9B,GAAIS,EAAW,EACb,IAAA,IACMkC,EAAQhB,EACZgB,GAASd,EACTc,IACA,CACA,MAAMS,EAAS5B,EAAcmB,GAE7B3C,EAASqD,KACPC,EAAAA,cAACrC,EAAA,IACMN,EACL4C,eAAgB,CACd,gBAAiBZ,EAAQ,EACzB,eAAgBlC,EAChB+C,KAAM,YAERC,IAAKd,EACLA,QACA7B,MAAO,CACL4C,SAAU,WACVC,KAAM,EACNC,UAAW,cAAcR,EAAOS,kBAChCC,OAAQV,EAAOW,KACfC,MAAO,UAIf,CAEF,OAAOhE,GACN,CACDiB,EACAO,EACAf,EACAE,EACAgB,EACAE,IAGIoC,EACJC,EAAAA,IAAC,MAAA,CACC,eAAW,EACXpD,MAAO,CACLgD,OAAQrC,IACRuC,MAAO,OACPG,QAAQ,KAKd,OAAOb,EAAAA,cACLzC,EACA,CACE2C,KAAM,UACHzC,EACHd,YACAmE,IAAK9C,EACLR,MAAO,CACL4C,SAAU,WACVW,UAAW,OACXC,SAAU,EACVC,UAAW,UACRzD,IAGPqC,EACAnD,EACAiE,EAEJ"}

package/docs/assets/{LoadingSpinner-C-xNF7A_.js → LoadingSpinner-D94ZhMZx.js}

@@ -1,2 +1,2 @@
-import{r as e,j as a,B as t}from"./index-1kZ13GgQ.js";function l({title:a,titleId:t,...l},n){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":t},l),a?e.createElement("title",{id:t},a):null,e.createElement("path",{fillRule:"evenodd",d:"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z",clipRule:"evenodd"}))}const n=e.forwardRef(l);function i(){return a.jsxs(t,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[a.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{i as L};
-//# sourceMappingURL=LoadingSpinner-C-xNF7A_.js.map
+import{r as e,j as a,B as t}from"./index-Cnm6lMUF.js";function l({title:a,titleId:t,...l},n){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":t},l),a?e.createElement("title",{id:t},a):null,e.createElement("path",{fillRule:"evenodd",d:"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z",clipRule:"evenodd"}))}const n=e.forwardRef(l);function i(){return a.jsxs(t,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[a.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{i as L};
+//# sourceMappingURL=LoadingSpinner-D94ZhMZx.js.map

package/docs/assets/{LoadingSpinner-C-xNF7A_.js.map → LoadingSpinner-D94ZhMZx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner-C-xNF7A_.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../src/components/LoadingSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowPathIcon({\n  title,\n  titleId,\n  ...props\n}, svgRef) {\n  return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\",\n    ref: svgRef,\n    \"aria-labelledby\": titleId\n  }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n    id: titleId\n  }, title) : null, /*#__PURE__*/React.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    d: \"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nconst ForwardRef = /*#__PURE__*/ React.forwardRef(ArrowPathIcon);\nexport default ForwardRef;","import { ArrowPathIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\n\nexport function LoadingSpinner() {\n  return (\n    <Box align=\"center\" className=\"text-slate-300\" direction=\"row\" gap={2}>\n      <ArrowPathIcon className=\"size-4 animate-spin\" />\n      Loading...\n    </Box>\n  );\n}\n"],"names":["ArrowPathIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","LoadingSpinner","jsxs","Box","align","className","direction","gap","children","jsx"],"mappings":"sDACA,SAASA,GAAcC,MACrBA,EAAAC,QACAA,KACGC,GACFC,GACD,OAAoBC,gBAAoB,MAAOC,OAAOC,OAAO,CAC3DC,MAAO,6BACPC,QAAS,YACTC,KAAM,eACN,cAAe,OACf,YAAa,OACbC,IAAKP,EACL,kBAAmBF,GAClBC,GAAQF,EAAqBI,EAAAA,cAAoB,QAAS,CAC3DO,GAAIV,GACHD,GAAS,KAAmBI,EAAAA,cAAoB,OAAQ,CACzDQ,SAAU,UACVC,EAAG,0YACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,GCnB3C,SAASkB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC1B,EAAA,CAAcsB,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}
+{"version":3,"file":"LoadingSpinner-D94ZhMZx.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../src/components/LoadingSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowPathIcon({\n  title,\n  titleId,\n  ...props\n}, svgRef) {\n  return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\",\n    ref: svgRef,\n    \"aria-labelledby\": titleId\n  }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n    id: titleId\n  }, title) : null, /*#__PURE__*/React.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    d: \"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nconst ForwardRef = /*#__PURE__*/ React.forwardRef(ArrowPathIcon);\nexport default ForwardRef;","import { ArrowPathIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\n\nexport function LoadingSpinner() {\n  return (\n    <Box align=\"center\" className=\"text-slate-300\" direction=\"row\" gap={2}>\n      <ArrowPathIcon className=\"size-4 animate-spin\" />\n      Loading...\n    </Box>\n  );\n}\n"],"names":["ArrowPathIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","LoadingSpinner","jsxs","Box","align","className","direction","gap","children","jsx"],"mappings":"sDACA,SAASA,GAAcC,MACrBA,EAAAC,QACAA,KACGC,GACFC,GACD,OAAoBC,gBAAoB,MAAOC,OAAOC,OAAO,CAC3DC,MAAO,6BACPC,QAAS,YACTC,KAAM,eACN,cAAe,OACf,YAAa,OACbC,IAAKP,EACL,kBAAmBF,GAClBC,GAAQF,EAAqBI,EAAAA,cAAoB,QAAS,CAC3DO,GAAIV,GACHD,GAAS,KAAmBI,EAAAA,cAAoB,OAAQ,CACzDQ,SAAU,UACVC,EAAG,0YACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,GCnB3C,SAASkB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC1B,EAAA,CAAcsB,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}

package/docs/assets/{PageNotFound-iBStRMG4.js → PageNotFound-CZublSHx.js}

@@ -1,2 +1,2 @@
-import{j as e,B as s,C as n,E as t}from"./index-1kZ13GgQ.js";import{H as i}from"./Header-CDZFHeTb.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(i,{title:"Page not found"}),e.jsxs(n,{intent:"danger",children:["The URL you requested can't be found. If you think this is an error,"," ",e.jsx(t,{href:"https://github.com/bvaughn/react-window/issues/new",children:"please file a GitHub issue"}),"."]})]})}export{r as default};
-//# sourceMappingURL=PageNotFound-iBStRMG4.js.map
+import{j as e,B as s,C as n,E as t}from"./index-Cnm6lMUF.js";import{H as i}from"./Header-CWpEkQSA.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(i,{title:"Page not found"}),e.jsxs(n,{intent:"danger",children:["The URL you requested can't be found. If you think this is an error,"," ",e.jsx(t,{href:"https://github.com/bvaughn/react-window/issues/new",children:"please file a GitHub issue"}),"."]})]})}export{r as default};
+//# sourceMappingURL=PageNotFound-CZublSHx.js.map

package/docs/assets/{PageNotFound-iBStRMG4.js.map → PageNotFound-CZublSHx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageNotFound-iBStRMG4.js","sources":["../../src/routes/PageNotFound.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PageNotFound() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Page not found\" />\n      <Callout intent=\"danger\">\n        The URL you requested can't be found. If you think this is an error,{\" \"}\n        <ExternalLink href=\"https://github.com/bvaughn/react-window/issues/new\">\n          please file a GitHub issue\n        </ExternalLink>\n        .\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PageNotFound","jsxs","Box","direction","gap","children","jsx","Header","title","Callout","intent","ExternalLink","href"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,qBACdP,KAACQ,EAAA,CAAQC,OAAO,SAASL,SAAA,CAAA,uEAC8C,IACrEC,EAAAA,IAACK,EAAA,CAAaC,KAAK,qDAAqDP,SAAA,+BAEzD,SAKvB"}
+{"version":3,"file":"PageNotFound-CZublSHx.js","sources":["../../src/routes/PageNotFound.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PageNotFound() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Page not found\" />\n      <Callout intent=\"danger\">\n        The URL you requested can't be found. If you think this is an error,{\" \"}\n        <ExternalLink href=\"https://github.com/bvaughn/react-window/issues/new\">\n          please file a GitHub issue\n        </ExternalLink>\n        .\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PageNotFound","jsxs","Box","direction","gap","children","jsx","Header","title","Callout","intent","ExternalLink","href"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,qBACdP,KAACQ,EAAA,CAAQC,OAAO,SAASL,SAAA,CAAA,uEAC8C,IACrEC,EAAAA,IAACK,EAAA,CAAaC,KAAK,qDAAqDP,SAAA,+BAEzD,SAKvB"}

package/docs/assets/{PlatformRequirementsRoute-DSVwe6jK.js → PlatformRequirementsRoute-Bq7s0cCu.js}

@@ -1,2 +1,2 @@
-import{j as e,B as s,E as r,C as i}from"./index-1kZ13GgQ.js";import{H as n}from"./Header-CDZFHeTb.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(n,{title:"Requirements"}),e.jsxs("div",{children:["This library requires React"," ",e.jsx(r,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"version 18"})," ","or newer."]}),e.jsxs("div",{children:["It also uses the"," ",e.jsx(r,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","(or a polyfill) to calculate the available space for ",e.jsx("code",{children:"List"})," ","and ",e.jsx("code",{children:"Grid"})," components."]}),e.jsxs(i,{intent:"primary",children:[e.jsx("code",{children:"ResizeObserver"})," usage can be avoided if explicit pixel dimensions are specified using the ",e.jsx("code",{children:"style"})," prop. (Percentage or EM/REM based dimensions do not count.)"]})]})}export{o as default};
-//# sourceMappingURL=PlatformRequirementsRoute-DSVwe6jK.js.map
+import{j as e,B as s,E as r,C as i}from"./index-Cnm6lMUF.js";import{H as n}from"./Header-CWpEkQSA.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(n,{title:"Requirements"}),e.jsxs("div",{children:["This library requires React"," ",e.jsx(r,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"version 18"})," ","or newer."]}),e.jsxs("div",{children:["It also uses the"," ",e.jsx(r,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","(or a polyfill) to calculate the available space for ",e.jsx("code",{children:"List"})," ","and ",e.jsx("code",{children:"Grid"})," components."]}),e.jsxs(i,{intent:"primary",children:[e.jsx("code",{children:"ResizeObserver"})," usage can be avoided if explicit pixel dimensions are specified using the ",e.jsx("code",{children:"style"})," prop. (Percentage or EM/REM based dimensions do not count.)"]})]})}export{o as default};
+//# sourceMappingURL=PlatformRequirementsRoute-Bq7s0cCu.js.map

package/docs/assets/{PlatformRequirementsRoute-DSVwe6jK.js.map → PlatformRequirementsRoute-Bq7s0cCu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PlatformRequirementsRoute-DSVwe6jK.js","sources":["../../src/routes/PlatformRequirementsRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PlatformRequirementsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Requirements\" />\n      <div>\n        This library requires React{\" \"}\n        <ExternalLink href=\"https://react.dev/blog/2022/03/29/react-v18\">\n          version 18\n        </ExternalLink>{\" \"}\n        or newer.\n      </div>\n      <div>\n        It also uses the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n          ResizeObserver\n        </ExternalLink>{\" \"}\n        (or a polyfill) to calculate the available space for <code>List</code>{\" \"}\n        and <code>Grid</code> components.\n      </div>\n      <Callout intent=\"primary\">\n        <code>ResizeObserver</code> usage can be avoided if explicit pixel\n        dimensions are specified using the <code>style</code> prop. (Percentage\n        or EM/REM based dimensions do not count.)\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PlatformRequirementsRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","Callout","intent"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,wBACb,MAAA,CAAIH,SAAA,CAAA,8BACyB,IAC5BC,EAAAA,IAACG,EAAA,CAAaC,KAAK,8CAA8CL,SAAA,eAEjD,IAAI,sBAGrB,MAAA,CAAIA,SAAA,CAAA,mBACc,IACjBC,EAAAA,IAACG,EAAA,CAAaC,KAAK,kEAAkEL,SAAA,mBAErE,IAAI,0DACiCC,IAAC,QAAKD,SAAA,SAAY,IAAI,SACvEC,IAAC,QAAKD,SAAA,SAAW,oBAEvBJ,KAACU,EAAA,CAAQC,OAAO,UACdP,SAAA,GAAAC,IAAC,QAAKD,SAAA,mBAAqB,gFACQC,IAAC,QAAKD,SAAA,UAAY,oEAK7D"}
+{"version":3,"file":"PlatformRequirementsRoute-Bq7s0cCu.js","sources":["../../src/routes/PlatformRequirementsRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PlatformRequirementsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Requirements\" />\n      <div>\n        This library requires React{\" \"}\n        <ExternalLink href=\"https://react.dev/blog/2022/03/29/react-v18\">\n          version 18\n        </ExternalLink>{\" \"}\n        or newer.\n      </div>\n      <div>\n        It also uses the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n          ResizeObserver\n        </ExternalLink>{\" \"}\n        (or a polyfill) to calculate the available space for <code>List</code>{\" \"}\n        and <code>Grid</code> components.\n      </div>\n      <Callout intent=\"primary\">\n        <code>ResizeObserver</code> usage can be avoided if explicit pixel\n        dimensions are specified using the <code>style</code> prop. (Percentage\n        or EM/REM based dimensions do not count.)\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PlatformRequirementsRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","Callout","intent"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,wBACb,MAAA,CAAIH,SAAA,CAAA,8BACyB,IAC5BC,EAAAA,IAACG,EAAA,CAAaC,KAAK,8CAA8CL,SAAA,eAEjD,IAAI,sBAGrB,MAAA,CAAIA,SAAA,CAAA,mBACc,IACjBC,EAAAA,IAACG,EAAA,CAAaC,KAAK,kEAAkEL,SAAA,mBAErE,IAAI,0DACiCC,IAAC,QAAKD,SAAA,SAAY,IAAI,SACvEC,IAAC,QAAKD,SAAA,SAAW,oBAEvBJ,KAACU,EAAA,CAAQC,OAAO,UACdP,SAAA,GAAAC,IAAC,QAAKD,SAAA,mBAAqB,gFACQC,IAAC,QAAKD,SAAA,UAAY,oEAK7D"}

package/docs/assets/{PropsRoute-WR0UoUn8.js → PropsRoute-DrhCHCJM.js}

@@ -1,2 +1,2 @@
-import{j as e,B as a}from"./index-1kZ13GgQ.js";import{C as t}from"./ContinueLink-jysYO6ZF.js";import{C as n}from"./ComponentProps-5QEdrETn.js";import"./Header-CDZFHeTb.js";const l={tags:{},filePath:"lib/components/list/List.tsx",description:"",displayName:"List",methods:[],props:JSON.parse('{"className":{"defaultValue":null,"description":"CSS class name.","name":"className","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"style":{"defaultValue":null,"description":"Optional CSS properties.\\nThe list of rows will fill the height defined by this style.","name":"style","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"CSSProperties | undefined","value":[{"value":"undefined"},{"value":"CSSProperties","description":"","fullComment":"","tags":{}}]}},"children":{"defaultValue":null,"description":"Additional content to be rendered within the list (above cells).\\nThis property can be used to render things like overlays or tooltips.","name":"children","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ReactNode","value":[{"value":"undefined"},{"value":"null"},{"value":"string"},{"value":"number"},{"value":"bigint"},{"value":"false"},{"value":"true"},{"value":"ReactElement<unknown, string | JSXElementConstructor<any>>","description":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.","fullComment":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.\\n@template P The type of the props object\\n@template T The type of the component or tag\\n@example ```tsx\\nconst element: ReactElement = <div />;\\n```","tags":{"template":"P The type of the props object\\nT The type of the component or tag","example":"```tsx\\nconst element: ReactElement = <div />;\\n```"}},{"value":"Iterable<ReactNode>","description":"","fullComment":"","tags":{}},{"value":"ReactPortal","description":"","fullComment":"","tags":{}},{"value":"Promise<AwaitedReactNode>","description":"Represents the completion of an asynchronous operation","fullComment":"Represents the completion of an asynchronous operation","tags":{}}]}},"defaultHeight":{"defaultValue":{"value":"0"},"description":"Default height of list for initial render.\\nThis value is important for server rendering.","name":"defaultHeight","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"listRef":{"defaultValue":null,"description":"Ref used to interact with this component\'s imperative API.\\n\\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\\n\\n⚠️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.","name":"listRef","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Ref<ListImperativeAPI> | undefined","value":[{"value":"undefined"},{"value":"null"},{"value":"(instance: ListImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)","description":"","fullComment":"","tags":{}},{"value":"RefObject<ListImperativeAPI | null>","description":"Created by {@link createRef}, or {@link useRef} when passed `null`.","fullComment":"Created by {@link createRef}, or {@link useRef} when passed `null`.\\n@template T The type of the ref\'s value.\\n@example ```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```","tags":{"template":"T The type of the ref\'s value.","example":"```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```"}}]}},"onResize":{"defaultValue":null,"description":"Callback notified when the List\'s outermost HTMLElement resizes.\\nThis may be used to (re)scroll a row into view.","name":"onResize","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void","description":"","fullComment":"","tags":{}}]}},"onRowsRendered":{"defaultValue":null,"description":"Callback notified when the range of visible rows changes.","name":"onRowsRendered","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((visibleRows: { startIndex: number; stopIndex: number; }, allRows: { startIndex: number; stopIndex: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(visibleRows: { startIndex: number; stopIndex: number; }, allRows: { startIndex: number; stopIndex: number; }) => void","description":"","fullComment":"","tags":{}}]}},"overscanCount":{"defaultValue":{"value":"3"},"description":"How many additional rows to render outside of the visible area.\\nThis can reduce visual flickering near the edges of a list when scrolling.","name":"overscanCount","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"rowComponent":{"defaultValue":null,"description":"React component responsible for rendering a row.\\n\\nThis component will receive an `index` and `style` prop by default.\\nAdditionally it will receive prop values passed to `rowProps`.\\n\\n⚠️ The prop types for this component are exported as `RowComponentProps`","name":"rowComponent","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"(props: { ariaAttributes: { \\"aria-posinset\\": number; \\"aria-setsize\\": number; role: \\"listitem\\"; }; index: number; style: CSSProperties; } & RowProps) => ReactNode"}},"rowCount":{"defaultValue":null,"description":"Number of items to be rendered in the list.","name":"rowCount","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"rowHeight":{"defaultValue":null,"description":"Row height; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current height (string)\\n- function that returns the row height (in pixels) given an index and `cellProps`","name":"rowHeight","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: RowProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: RowProps) => number","description":"","fullComment":"","tags":{}}]}},"rowProps":{"defaultValue":null,"description":"Additional props to be passed to the row-rendering component.\\nList will automatically re-render rows when values in this object change.\\n\\n⚠️ This object must not contain either an `index` or `style` prop.","name":"rowProps","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"ExcludeForbiddenKeys<RowProps>"}},"tagName":{"defaultValue":{"value":"\\"div\\" as TagName"},"description":"Can be used to override the root HTML element rendered by the List component.\\nThe default value is \\"div\\", meaning that List renders an HTMLDivElement as its root.\\n\\n⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.","name":"tagName","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements | undefined","value":[{"value":"undefined"},{"value":"\\"symbol\\""},{"value":"\\"object\\""},{"value":"\\"slot\\""},{"value":"\\"style\\""},{"value":"\\"title\\""},{"value":"\\"search\\""},{"value":"\\"article\\""},{"value":"\\"button\\""},{"value":"\\"dialog\\""},{"value":"\\"figure\\""},{"value":"\\"form\\""},{"value":"\\"img\\""},{"value":"\\"link\\""},{"value":"\\"main\\""},{"value":"\\"menu\\""},{"value":"\\"menuitem\\""},{"value":"\\"option\\""},{"value":"\\"switch\\""},{"value":"\\"table\\""},{"value":"\\"text\\""},{"value":"\\"time\\""},{"value":"\\"a\\""},{"value":"\\"abbr\\""},{"value":"\\"address\\""},{"value":"\\"area\\""},{"value":"\\"aside\\""},{"value":"\\"audio\\""},{"value":"\\"b\\""},{"value":"\\"base\\""},{"value":"\\"bdi\\""},{"value":"\\"bdo\\""},{"value":"\\"big\\""},{"value":"\\"blockquote\\""},{"value":"\\"body\\""},{"value":"\\"br\\""},{"value":"\\"canvas\\""},{"value":"\\"caption\\""},{"value":"\\"center\\""},{"value":"\\"cite\\""},{"value":"\\"code\\""},{"value":"\\"col\\""},{"value":"\\"colgroup\\""},{"value":"\\"data\\""},{"value":"\\"datalist\\""},{"value":"\\"dd\\""},{"value":"\\"del\\""},{"value":"\\"details\\""},{"value":"\\"dfn\\""},{"value":"\\"div\\""},{"value":"\\"dl\\""},{"value":"\\"dt\\""},{"value":"\\"em\\""},{"value":"\\"embed\\""},{"value":"\\"fieldset\\""},{"value":"\\"figcaption\\""},{"value":"\\"footer\\""},{"value":"\\"h1\\""},{"value":"\\"h2\\""},{"value":"\\"h3\\""},{"value":"\\"h4\\""},{"value":"\\"h5\\""},{"value":"\\"h6\\""},{"value":"\\"head\\""},{"value":"\\"header\\""},{"value":"\\"hgroup\\""},{"value":"\\"hr\\""},{"value":"\\"html\\""},{"value":"\\"i\\""},{"value":"\\"iframe\\""},{"value":"\\"input\\""},{"value":"\\"ins\\""},{"value":"\\"kbd\\""},{"value":"\\"keygen\\""},{"value":"\\"label\\""},{"value":"\\"legend\\""},{"value":"\\"li\\""},{"value":"\\"map\\""},{"value":"\\"mark\\""},{"value":"\\"meta\\""},{"value":"\\"meter\\""},{"value":"\\"nav\\""},{"value":"\\"noindex\\""},{"value":"\\"noscript\\""},{"value":"\\"ol\\""},{"value":"\\"optgroup\\""},{"value":"\\"output\\""},{"value":"\\"p\\""},{"value":"\\"param\\""},{"value":"\\"picture\\""},{"value":"\\"pre\\""},{"value":"\\"progress\\""},{"value":"\\"q\\""},{"value":"\\"rp\\""},{"value":"\\"rt\\""},{"value":"\\"ruby\\""},{"value":"\\"s\\""},{"value":"\\"samp\\""},{"value":"\\"script\\""},{"value":"\\"section\\""},{"value":"\\"select\\""},{"value":"\\"small\\""},{"value":"\\"source\\""},{"value":"\\"span\\""},{"value":"\\"strong\\""},{"value":"\\"sub\\""},{"value":"\\"summary\\""},{"value":"\\"sup\\""},{"value":"\\"template\\""},{"value":"\\"tbody\\""},{"value":"\\"td\\""},{"value":"\\"textarea\\""},{"value":"\\"tfoot\\""},{"value":"\\"th\\""},{"value":"\\"thead\\""},{"value":"\\"tr\\""},{"value":"\\"track\\""},{"value":"\\"u\\""},{"value":"\\"ul\\""},{"value":"\\"var\\""},{"value":"\\"video\\""},{"value":"\\"wbr\\""},{"value":"\\"webview\\""},{"value":"\\"svg\\""},{"value":"\\"animate\\""},{"value":"\\"animateMotion\\""},{"value":"\\"animateTransform\\""},{"value":"\\"circle\\""},{"value":"\\"clipPath\\""},{"value":"\\"defs\\""},{"value":"\\"desc\\""},{"value":"\\"ellipse\\""},{"value":"\\"feBlend\\""},{"value":"\\"feColorMatrix\\""},{"value":"\\"feComponentTransfer\\""},{"value":"\\"feComposite\\""},{"value":"\\"feConvolveMatrix\\""},{"value":"\\"feDiffuseLighting\\""},{"value":"\\"feDisplacementMap\\""},{"value":"\\"feDistantLight\\""},{"value":"\\"feDropShadow\\""},{"value":"\\"feFlood\\""},{"value":"\\"feFuncA\\""},{"value":"\\"feFuncB\\""},{"value":"\\"feFuncG\\""},{"value":"\\"feFuncR\\""},{"value":"\\"feGaussianBlur\\""},{"value":"\\"feImage\\""},{"value":"\\"feMerge\\""},{"value":"\\"feMergeNode\\""},{"value":"\\"feMorphology\\""},{"value":"\\"feOffset\\""},{"value":"\\"fePointLight\\""},{"value":"\\"feSpecularLighting\\""},{"value":"\\"feSpotLight\\""},{"value":"\\"feTile\\""},{"value":"\\"feTurbulence\\""},{"value":"\\"filter\\""},{"value":"\\"foreignObject\\""},{"value":"\\"g\\""},{"value":"\\"image\\""},{"value":"\\"line\\""},{"value":"\\"linearGradient\\""},{"value":"\\"marker\\""},{"value":"\\"mask\\""},{"value":"\\"metadata\\""},{"value":"\\"mpath\\""},{"value":"\\"path\\""},{"value":"\\"pattern\\""},{"value":"\\"polygon\\""},{"value":"\\"polyline\\""},{"value":"\\"radialGradient\\""},{"value":"\\"rect\\""},{"value":"\\"set\\""},{"value":"\\"stop\\""},{"value":"\\"textPath\\""},{"value":"\\"tspan\\""},{"value":"\\"use\\""},{"value":"\\"view\\""}]}}}')};function i(){return e.jsxs(a,{direction:"column",gap:4,children:[e.jsx(n,{section:"Lists",json:l}),e.jsx(t,{to:"/list/imperative-api",title:"imperative api"})]})}export{i as default};
-//# sourceMappingURL=PropsRoute-WR0UoUn8.js.map
+import{j as e,B as a}from"./index-Cnm6lMUF.js";import{C as t}from"./ContinueLink-BDXFlJ2t.js";import{C as n}from"./ComponentProps-CnDy_aV8.js";import"./Header-CWpEkQSA.js";const l={tags:{},filePath:"lib/components/list/List.tsx",description:"",displayName:"List",methods:[],props:JSON.parse('{"className":{"defaultValue":null,"description":"CSS class name.","name":"className","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"style":{"defaultValue":null,"description":"Optional CSS properties.\\nThe list of rows will fill the height defined by this style.","name":"style","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"CSSProperties | undefined","value":[{"value":"undefined"},{"value":"CSSProperties","description":"","fullComment":"","tags":{}}]}},"children":{"defaultValue":null,"description":"Additional content to be rendered within the list (above cells).\\nThis property can be used to render things like overlays or tooltips.","name":"children","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ReactNode","value":[{"value":"undefined"},{"value":"null"},{"value":"string"},{"value":"number"},{"value":"bigint"},{"value":"false"},{"value":"true"},{"value":"ReactElement<unknown, string | JSXElementConstructor<any>>","description":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.","fullComment":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.\\n@template P The type of the props object\\n@template T The type of the component or tag\\n@example ```tsx\\nconst element: ReactElement = <div />;\\n```","tags":{"template":"P The type of the props object\\nT The type of the component or tag","example":"```tsx\\nconst element: ReactElement = <div />;\\n```"}},{"value":"Iterable<ReactNode>","description":"","fullComment":"","tags":{}},{"value":"ReactPortal","description":"","fullComment":"","tags":{}},{"value":"Promise<AwaitedReactNode>","description":"Represents the completion of an asynchronous operation","fullComment":"Represents the completion of an asynchronous operation","tags":{}}]}},"defaultHeight":{"defaultValue":{"value":"0"},"description":"Default height of list for initial render.\\nThis value is important for server rendering.","name":"defaultHeight","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"listRef":{"defaultValue":null,"description":"Ref used to interact with this component\'s imperative API.\\n\\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\\n\\n⚠️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.","name":"listRef","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Ref<ListImperativeAPI> | undefined","value":[{"value":"undefined"},{"value":"null"},{"value":"(instance: ListImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)","description":"","fullComment":"","tags":{}},{"value":"RefObject<ListImperativeAPI | null>","description":"Created by {@link createRef}, or {@link useRef} when passed `null`.","fullComment":"Created by {@link createRef}, or {@link useRef} when passed `null`.\\n@template T The type of the ref\'s value.\\n@example ```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```","tags":{"template":"T The type of the ref\'s value.","example":"```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```"}}]}},"onResize":{"defaultValue":null,"description":"Callback notified when the List\'s outermost HTMLElement resizes.\\nThis may be used to (re)scroll a row into view.","name":"onResize","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void","description":"","fullComment":"","tags":{}}]}},"onRowsRendered":{"defaultValue":null,"description":"Callback notified when the range of visible rows changes.","name":"onRowsRendered","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((visibleRows: { startIndex: number; stopIndex: number; }, allRows: { startIndex: number; stopIndex: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(visibleRows: { startIndex: number; stopIndex: number; }, allRows: { startIndex: number; stopIndex: number; }) => void","description":"","fullComment":"","tags":{}}]}},"overscanCount":{"defaultValue":{"value":"3"},"description":"How many additional rows to render outside of the visible area.\\nThis can reduce visual flickering near the edges of a list when scrolling.","name":"overscanCount","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"rowComponent":{"defaultValue":null,"description":"React component responsible for rendering a row.\\n\\nThis component will receive an `index` and `style` prop by default.\\nAdditionally it will receive prop values passed to `rowProps`.\\n\\n⚠️ The prop types for this component are exported as `RowComponentProps`","name":"rowComponent","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"(props: { ariaAttributes: { \\"aria-posinset\\": number; \\"aria-setsize\\": number; role: \\"listitem\\"; }; index: number; style: CSSProperties; } & RowProps) => ReactNode"}},"rowCount":{"defaultValue":null,"description":"Number of items to be rendered in the list.","name":"rowCount","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"rowHeight":{"defaultValue":null,"description":"Row height; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current height (string)\\n- function that returns the row height (in pixels) given an index and `cellProps`","name":"rowHeight","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: RowProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: RowProps) => number","description":"","fullComment":"","tags":{}}]}},"rowProps":{"defaultValue":null,"description":"Additional props to be passed to the row-rendering component.\\nList will automatically re-render rows when values in this object change.\\n\\n⚠️ This object must not contain either an `index` or `style` prop.","name":"rowProps","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"ExcludeForbiddenKeys<RowProps>"}},"tagName":{"defaultValue":{"value":"\\"div\\" as TagName"},"description":"Can be used to override the root HTML element rendered by the List component.\\nThe default value is \\"div\\", meaning that List renders an HTMLDivElement as its root.\\n\\n⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.","name":"tagName","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements | undefined","value":[{"value":"undefined"},{"value":"\\"symbol\\""},{"value":"\\"object\\""},{"value":"\\"slot\\""},{"value":"\\"style\\""},{"value":"\\"title\\""},{"value":"\\"search\\""},{"value":"\\"article\\""},{"value":"\\"button\\""},{"value":"\\"dialog\\""},{"value":"\\"figure\\""},{"value":"\\"form\\""},{"value":"\\"img\\""},{"value":"\\"link\\""},{"value":"\\"main\\""},{"value":"\\"menu\\""},{"value":"\\"menuitem\\""},{"value":"\\"option\\""},{"value":"\\"switch\\""},{"value":"\\"table\\""},{"value":"\\"text\\""},{"value":"\\"time\\""},{"value":"\\"a\\""},{"value":"\\"abbr\\""},{"value":"\\"address\\""},{"value":"\\"area\\""},{"value":"\\"aside\\""},{"value":"\\"audio\\""},{"value":"\\"b\\""},{"value":"\\"base\\""},{"value":"\\"bdi\\""},{"value":"\\"bdo\\""},{"value":"\\"big\\""},{"value":"\\"blockquote\\""},{"value":"\\"body\\""},{"value":"\\"br\\""},{"value":"\\"canvas\\""},{"value":"\\"caption\\""},{"value":"\\"center\\""},{"value":"\\"cite\\""},{"value":"\\"code\\""},{"value":"\\"col\\""},{"value":"\\"colgroup\\""},{"value":"\\"data\\""},{"value":"\\"datalist\\""},{"value":"\\"dd\\""},{"value":"\\"del\\""},{"value":"\\"details\\""},{"value":"\\"dfn\\""},{"value":"\\"div\\""},{"value":"\\"dl\\""},{"value":"\\"dt\\""},{"value":"\\"em\\""},{"value":"\\"embed\\""},{"value":"\\"fieldset\\""},{"value":"\\"figcaption\\""},{"value":"\\"footer\\""},{"value":"\\"h1\\""},{"value":"\\"h2\\""},{"value":"\\"h3\\""},{"value":"\\"h4\\""},{"value":"\\"h5\\""},{"value":"\\"h6\\""},{"value":"\\"head\\""},{"value":"\\"header\\""},{"value":"\\"hgroup\\""},{"value":"\\"hr\\""},{"value":"\\"html\\""},{"value":"\\"i\\""},{"value":"\\"iframe\\""},{"value":"\\"input\\""},{"value":"\\"ins\\""},{"value":"\\"kbd\\""},{"value":"\\"keygen\\""},{"value":"\\"label\\""},{"value":"\\"legend\\""},{"value":"\\"li\\""},{"value":"\\"map\\""},{"value":"\\"mark\\""},{"value":"\\"meta\\""},{"value":"\\"meter\\""},{"value":"\\"nav\\""},{"value":"\\"noindex\\""},{"value":"\\"noscript\\""},{"value":"\\"ol\\""},{"value":"\\"optgroup\\""},{"value":"\\"output\\""},{"value":"\\"p\\""},{"value":"\\"param\\""},{"value":"\\"picture\\""},{"value":"\\"pre\\""},{"value":"\\"progress\\""},{"value":"\\"q\\""},{"value":"\\"rp\\""},{"value":"\\"rt\\""},{"value":"\\"ruby\\""},{"value":"\\"s\\""},{"value":"\\"samp\\""},{"value":"\\"script\\""},{"value":"\\"section\\""},{"value":"\\"select\\""},{"value":"\\"small\\""},{"value":"\\"source\\""},{"value":"\\"span\\""},{"value":"\\"strong\\""},{"value":"\\"sub\\""},{"value":"\\"summary\\""},{"value":"\\"sup\\""},{"value":"\\"template\\""},{"value":"\\"tbody\\""},{"value":"\\"td\\""},{"value":"\\"textarea\\""},{"value":"\\"tfoot\\""},{"value":"\\"th\\""},{"value":"\\"thead\\""},{"value":"\\"tr\\""},{"value":"\\"track\\""},{"value":"\\"u\\""},{"value":"\\"ul\\""},{"value":"\\"var\\""},{"value":"\\"video\\""},{"value":"\\"wbr\\""},{"value":"\\"webview\\""},{"value":"\\"svg\\""},{"value":"\\"animate\\""},{"value":"\\"animateMotion\\""},{"value":"\\"animateTransform\\""},{"value":"\\"circle\\""},{"value":"\\"clipPath\\""},{"value":"\\"defs\\""},{"value":"\\"desc\\""},{"value":"\\"ellipse\\""},{"value":"\\"feBlend\\""},{"value":"\\"feColorMatrix\\""},{"value":"\\"feComponentTransfer\\""},{"value":"\\"feComposite\\""},{"value":"\\"feConvolveMatrix\\""},{"value":"\\"feDiffuseLighting\\""},{"value":"\\"feDisplacementMap\\""},{"value":"\\"feDistantLight\\""},{"value":"\\"feDropShadow\\""},{"value":"\\"feFlood\\""},{"value":"\\"feFuncA\\""},{"value":"\\"feFuncB\\""},{"value":"\\"feFuncG\\""},{"value":"\\"feFuncR\\""},{"value":"\\"feGaussianBlur\\""},{"value":"\\"feImage\\""},{"value":"\\"feMerge\\""},{"value":"\\"feMergeNode\\""},{"value":"\\"feMorphology\\""},{"value":"\\"feOffset\\""},{"value":"\\"fePointLight\\""},{"value":"\\"feSpecularLighting\\""},{"value":"\\"feSpotLight\\""},{"value":"\\"feTile\\""},{"value":"\\"feTurbulence\\""},{"value":"\\"filter\\""},{"value":"\\"foreignObject\\""},{"value":"\\"g\\""},{"value":"\\"image\\""},{"value":"\\"line\\""},{"value":"\\"linearGradient\\""},{"value":"\\"marker\\""},{"value":"\\"mask\\""},{"value":"\\"metadata\\""},{"value":"\\"mpath\\""},{"value":"\\"path\\""},{"value":"\\"pattern\\""},{"value":"\\"polygon\\""},{"value":"\\"polyline\\""},{"value":"\\"radialGradient\\""},{"value":"\\"rect\\""},{"value":"\\"set\\""},{"value":"\\"stop\\""},{"value":"\\"textPath\\""},{"value":"\\"tspan\\""},{"value":"\\"use\\""},{"value":"\\"view\\""}]}}}')};function i(){return e.jsxs(a,{direction:"column",gap:4,children:[e.jsx(n,{section:"Lists",json:l}),e.jsx(t,{to:"/list/imperative-api",title:"imperative api"})]})}export{i as default};
+//# sourceMappingURL=PropsRoute-DrhCHCJM.js.map

package/docs/assets/{PropsRoute-WR0UoUn8.js.map → PropsRoute-DrhCHCJM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PropsRoute-WR0UoUn8.js","sources":["../../src/routes/list/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/List.json\";\n\nexport default function ListPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Lists\" json={json} />\n      <ContinueLink to=\"/list/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["ListPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"0yaAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}
+{"version":3,"file":"PropsRoute-DrhCHCJM.js","sources":["../../src/routes/list/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/List.json\";\n\nexport default function ListPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Lists\" json={json} />\n      <ContinueLink to=\"/list/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["ListPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"0yaAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}

package/docs/assets/{PropsRoute-BMJ0qMWy.js → PropsRoute-Hhqv1kyZ.js}

@@ -1,2 +1,2 @@
-import{j as e,B as a}from"./index-1kZ13GgQ.js";import{C as n}from"./ContinueLink-jysYO6ZF.js";import{C as t}from"./ComponentProps-5QEdrETn.js";import"./Header-CDZFHeTb.js";const l={tags:{},filePath:"lib/components/grid/Grid.tsx",description:"",displayName:"Grid",methods:[],props:JSON.parse('{"className":{"defaultValue":null,"description":"CSS class name.","name":"className","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"dir":{"defaultValue":null,"description":"Corresponds to the HTML dir attribute:\\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir","name":"dir","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"style":{"defaultValue":null,"description":"Optional CSS properties.\\nThe grid of cells will fill the height and width defined by this style.","name":"style","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"CSSProperties | undefined","value":[{"value":"undefined"},{"value":"CSSProperties","description":"","fullComment":"","tags":{}}]}},"children":{"defaultValue":null,"description":"Additional content to be rendered within the grid (above cells).\\nThis property can be used to render things like overlays or tooltips.","name":"children","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ReactNode","value":[{"value":"undefined"},{"value":"null"},{"value":"string"},{"value":"number"},{"value":"bigint"},{"value":"false"},{"value":"true"},{"value":"ReactElement<unknown, string | JSXElementConstructor<any>>","description":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.","fullComment":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.\\n@template P The type of the props object\\n@template T The type of the component or tag\\n@example ```tsx\\nconst element: ReactElement = <div />;\\n```","tags":{"template":"P The type of the props object\\nT The type of the component or tag","example":"```tsx\\nconst element: ReactElement = <div />;\\n```"}},{"value":"Iterable<ReactNode>","description":"","fullComment":"","tags":{}},{"value":"ReactPortal","description":"","fullComment":"","tags":{}},{"value":"Promise<AwaitedReactNode>","description":"Represents the completion of an asynchronous operation","fullComment":"Represents the completion of an asynchronous operation","tags":{}}]}},"cellComponent":{"defaultValue":null,"description":"React component responsible for rendering a cell.\\n\\nThis component will receive an `index` and `style` prop by default.\\nAdditionally it will receive prop values passed to `cellProps`.\\n\\n⚠️ The prop types for this component are exported as `CellComponentProps`","name":"cellComponent","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"(props: { ariaAttributes: { \\"aria-colindex\\": number; role: \\"gridcell\\"; }; columnIndex: number; rowIndex: number; style: CSSProperties; } & CellProps) => ReactNode"}},"cellProps":{"defaultValue":null,"description":"Additional props to be passed to the cell-rendering component.\\nGrid will automatically re-render cells when values in this object change.\\n\\n⚠️ This object must not contain either an `index` or `style` prop.","name":"cellProps","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"ExcludeForbiddenKeys<CellProps>"}},"columnCount":{"defaultValue":null,"description":"Number of columns to be rendered in the grid.","name":"columnCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"columnWidth":{"defaultValue":null,"description":"Column width; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current width (string)\\n- function that returns the row width (in pixels) given an index and `cellProps`","name":"columnWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"defaultHeight":{"defaultValue":{"value":"0"},"description":"Default height of grid for initial render.\\nThis value is important for server rendering.","name":"defaultHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"defaultWidth":{"defaultValue":{"value":"0"},"description":"Default width of grid for initial render.\\nThis value is important for server rendering.","name":"defaultWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"gridRef":{"defaultValue":null,"description":"Ref used to interact with this component\'s imperative API.\\n\\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\\n\\n⚠️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.","name":"gridRef","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Ref<GridImperativeAPI> | undefined","value":[{"value":"undefined"},{"value":"null"},{"value":"(instance: GridImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)","description":"","fullComment":"","tags":{}},{"value":"RefObject<GridImperativeAPI | null>","description":"Created by {@link createRef}, or {@link useRef} when passed `null`.","fullComment":"Created by {@link createRef}, or {@link useRef} when passed `null`.\\n@template T The type of the ref\'s value.\\n@example ```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```","tags":{"template":"T The type of the ref\'s value.","example":"```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```"}}]}},"onCellsRendered":{"defaultValue":null,"description":"Callback notified when the range of rendered cells changes.","name":"onCellsRendered","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((visibleCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }, allCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(visibleCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }, allCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void","description":"","fullComment":"","tags":{}}]}},"onResize":{"defaultValue":null,"description":"Callback notified when the Grid\'s outermost HTMLElement resizes.\\nThis may be used to (re)scroll a cell into view.","name":"onResize","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void","description":"","fullComment":"","tags":{}}]}},"overscanCount":{"defaultValue":{"value":"3"},"description":"How many additional rows/columns to render outside of the visible area.\\nThis can reduce visual flickering near the edges of a grid when scrolling.","name":"overscanCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"rowCount":{"defaultValue":null,"description":"Number of rows to be rendered in the grid.","name":"rowCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"rowHeight":{"defaultValue":null,"description":"Row height; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current height (string)\\n- function that returns the row height (in pixels) given an index and `cellProps`","name":"rowHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"tagName":{"defaultValue":{"value":"\\"div\\" as TagName"},"description":"Can be used to override the root HTML element rendered by the List component.\\nThe default value is \\"div\\", meaning that List renders an HTMLDivElement as its root.\\n\\n⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.","name":"tagName","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements | undefined","value":[{"value":"undefined"},{"value":"\\"symbol\\""},{"value":"\\"object\\""},{"value":"\\"slot\\""},{"value":"\\"style\\""},{"value":"\\"title\\""},{"value":"\\"search\\""},{"value":"\\"article\\""},{"value":"\\"button\\""},{"value":"\\"dialog\\""},{"value":"\\"figure\\""},{"value":"\\"form\\""},{"value":"\\"img\\""},{"value":"\\"link\\""},{"value":"\\"main\\""},{"value":"\\"menu\\""},{"value":"\\"menuitem\\""},{"value":"\\"option\\""},{"value":"\\"switch\\""},{"value":"\\"table\\""},{"value":"\\"text\\""},{"value":"\\"time\\""},{"value":"\\"a\\""},{"value":"\\"abbr\\""},{"value":"\\"address\\""},{"value":"\\"area\\""},{"value":"\\"aside\\""},{"value":"\\"audio\\""},{"value":"\\"b\\""},{"value":"\\"base\\""},{"value":"\\"bdi\\""},{"value":"\\"bdo\\""},{"value":"\\"big\\""},{"value":"\\"blockquote\\""},{"value":"\\"body\\""},{"value":"\\"br\\""},{"value":"\\"canvas\\""},{"value":"\\"caption\\""},{"value":"\\"center\\""},{"value":"\\"cite\\""},{"value":"\\"code\\""},{"value":"\\"col\\""},{"value":"\\"colgroup\\""},{"value":"\\"data\\""},{"value":"\\"datalist\\""},{"value":"\\"dd\\""},{"value":"\\"del\\""},{"value":"\\"details\\""},{"value":"\\"dfn\\""},{"value":"\\"div\\""},{"value":"\\"dl\\""},{"value":"\\"dt\\""},{"value":"\\"em\\""},{"value":"\\"embed\\""},{"value":"\\"fieldset\\""},{"value":"\\"figcaption\\""},{"value":"\\"footer\\""},{"value":"\\"h1\\""},{"value":"\\"h2\\""},{"value":"\\"h3\\""},{"value":"\\"h4\\""},{"value":"\\"h5\\""},{"value":"\\"h6\\""},{"value":"\\"head\\""},{"value":"\\"header\\""},{"value":"\\"hgroup\\""},{"value":"\\"hr\\""},{"value":"\\"html\\""},{"value":"\\"i\\""},{"value":"\\"iframe\\""},{"value":"\\"input\\""},{"value":"\\"ins\\""},{"value":"\\"kbd\\""},{"value":"\\"keygen\\""},{"value":"\\"label\\""},{"value":"\\"legend\\""},{"value":"\\"li\\""},{"value":"\\"map\\""},{"value":"\\"mark\\""},{"value":"\\"meta\\""},{"value":"\\"meter\\""},{"value":"\\"nav\\""},{"value":"\\"noindex\\""},{"value":"\\"noscript\\""},{"value":"\\"ol\\""},{"value":"\\"optgroup\\""},{"value":"\\"output\\""},{"value":"\\"p\\""},{"value":"\\"param\\""},{"value":"\\"picture\\""},{"value":"\\"pre\\""},{"value":"\\"progress\\""},{"value":"\\"q\\""},{"value":"\\"rp\\""},{"value":"\\"rt\\""},{"value":"\\"ruby\\""},{"value":"\\"s\\""},{"value":"\\"samp\\""},{"value":"\\"script\\""},{"value":"\\"section\\""},{"value":"\\"select\\""},{"value":"\\"small\\""},{"value":"\\"source\\""},{"value":"\\"span\\""},{"value":"\\"strong\\""},{"value":"\\"sub\\""},{"value":"\\"summary\\""},{"value":"\\"sup\\""},{"value":"\\"template\\""},{"value":"\\"tbody\\""},{"value":"\\"td\\""},{"value":"\\"textarea\\""},{"value":"\\"tfoot\\""},{"value":"\\"th\\""},{"value":"\\"thead\\""},{"value":"\\"tr\\""},{"value":"\\"track\\""},{"value":"\\"u\\""},{"value":"\\"ul\\""},{"value":"\\"var\\""},{"value":"\\"video\\""},{"value":"\\"wbr\\""},{"value":"\\"webview\\""},{"value":"\\"svg\\""},{"value":"\\"animate\\""},{"value":"\\"animateMotion\\""},{"value":"\\"animateTransform\\""},{"value":"\\"circle\\""},{"value":"\\"clipPath\\""},{"value":"\\"defs\\""},{"value":"\\"desc\\""},{"value":"\\"ellipse\\""},{"value":"\\"feBlend\\""},{"value":"\\"feColorMatrix\\""},{"value":"\\"feComponentTransfer\\""},{"value":"\\"feComposite\\""},{"value":"\\"feConvolveMatrix\\""},{"value":"\\"feDiffuseLighting\\""},{"value":"\\"feDisplacementMap\\""},{"value":"\\"feDistantLight\\""},{"value":"\\"feDropShadow\\""},{"value":"\\"feFlood\\""},{"value":"\\"feFuncA\\""},{"value":"\\"feFuncB\\""},{"value":"\\"feFuncG\\""},{"value":"\\"feFuncR\\""},{"value":"\\"feGaussianBlur\\""},{"value":"\\"feImage\\""},{"value":"\\"feMerge\\""},{"value":"\\"feMergeNode\\""},{"value":"\\"feMorphology\\""},{"value":"\\"feOffset\\""},{"value":"\\"fePointLight\\""},{"value":"\\"feSpecularLighting\\""},{"value":"\\"feSpotLight\\""},{"value":"\\"feTile\\""},{"value":"\\"feTurbulence\\""},{"value":"\\"filter\\""},{"value":"\\"foreignObject\\""},{"value":"\\"g\\""},{"value":"\\"image\\""},{"value":"\\"line\\""},{"value":"\\"linearGradient\\""},{"value":"\\"marker\\""},{"value":"\\"mask\\""},{"value":"\\"metadata\\""},{"value":"\\"mpath\\""},{"value":"\\"path\\""},{"value":"\\"pattern\\""},{"value":"\\"polygon\\""},{"value":"\\"polyline\\""},{"value":"\\"radialGradient\\""},{"value":"\\"rect\\""},{"value":"\\"set\\""},{"value":"\\"stop\\""},{"value":"\\"textPath\\""},{"value":"\\"tspan\\""},{"value":"\\"use\\""},{"value":"\\"view\\""}]}}}')};function r(){return e.jsxs(a,{direction:"column",gap:4,children:[e.jsx(t,{section:"Grids",json:l}),e.jsx(n,{to:"/grid/imperative-api",title:"imperative api"})]})}export{r as default};
-//# sourceMappingURL=PropsRoute-BMJ0qMWy.js.map
+import{j as e,B as a}from"./index-Cnm6lMUF.js";import{C as n}from"./ContinueLink-BDXFlJ2t.js";import{C as t}from"./ComponentProps-CnDy_aV8.js";import"./Header-CWpEkQSA.js";const l={tags:{},filePath:"lib/components/grid/Grid.tsx",description:"",displayName:"Grid",methods:[],props:JSON.parse('{"className":{"defaultValue":null,"description":"CSS class name.","name":"className","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"dir":{"defaultValue":null,"description":"Corresponds to the HTML dir attribute:\\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir","name":"dir","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"style":{"defaultValue":null,"description":"Optional CSS properties.\\nThe grid of cells will fill the height and width defined by this style.","name":"style","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"CSSProperties | undefined","value":[{"value":"undefined"},{"value":"CSSProperties","description":"","fullComment":"","tags":{}}]}},"children":{"defaultValue":null,"description":"Additional content to be rendered within the grid (above cells).\\nThis property can be used to render things like overlays or tooltips.","name":"children","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ReactNode","value":[{"value":"undefined"},{"value":"null"},{"value":"string"},{"value":"number"},{"value":"bigint"},{"value":"false"},{"value":"true"},{"value":"ReactElement<unknown, string | JSXElementConstructor<any>>","description":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.","fullComment":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.\\n@template P The type of the props object\\n@template T The type of the component or tag\\n@example ```tsx\\nconst element: ReactElement = <div />;\\n```","tags":{"template":"P The type of the props object\\nT The type of the component or tag","example":"```tsx\\nconst element: ReactElement = <div />;\\n```"}},{"value":"Iterable<ReactNode>","description":"","fullComment":"","tags":{}},{"value":"ReactPortal","description":"","fullComment":"","tags":{}},{"value":"Promise<AwaitedReactNode>","description":"Represents the completion of an asynchronous operation","fullComment":"Represents the completion of an asynchronous operation","tags":{}}]}},"cellComponent":{"defaultValue":null,"description":"React component responsible for rendering a cell.\\n\\nThis component will receive an `index` and `style` prop by default.\\nAdditionally it will receive prop values passed to `cellProps`.\\n\\n⚠️ The prop types for this component are exported as `CellComponentProps`","name":"cellComponent","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"(props: { ariaAttributes: { \\"aria-colindex\\": number; role: \\"gridcell\\"; }; columnIndex: number; rowIndex: number; style: CSSProperties; } & CellProps) => ReactNode"}},"cellProps":{"defaultValue":null,"description":"Additional props to be passed to the cell-rendering component.\\nGrid will automatically re-render cells when values in this object change.\\n\\n⚠️ This object must not contain either an `index` or `style` prop.","name":"cellProps","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"ExcludeForbiddenKeys<CellProps>"}},"columnCount":{"defaultValue":null,"description":"Number of columns to be rendered in the grid.","name":"columnCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"columnWidth":{"defaultValue":null,"description":"Column width; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current width (string)\\n- function that returns the row width (in pixels) given an index and `cellProps`","name":"columnWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"defaultHeight":{"defaultValue":{"value":"0"},"description":"Default height of grid for initial render.\\nThis value is important for server rendering.","name":"defaultHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"defaultWidth":{"defaultValue":{"value":"0"},"description":"Default width of grid for initial render.\\nThis value is important for server rendering.","name":"defaultWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"gridRef":{"defaultValue":null,"description":"Ref used to interact with this component\'s imperative API.\\n\\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\\n\\n⚠️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.","name":"gridRef","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Ref<GridImperativeAPI> | undefined","value":[{"value":"undefined"},{"value":"null"},{"value":"(instance: GridImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)","description":"","fullComment":"","tags":{}},{"value":"RefObject<GridImperativeAPI | null>","description":"Created by {@link createRef}, or {@link useRef} when passed `null`.","fullComment":"Created by {@link createRef}, or {@link useRef} when passed `null`.\\n@template T The type of the ref\'s value.\\n@example ```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```","tags":{"template":"T The type of the ref\'s value.","example":"```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```"}}]}},"onCellsRendered":{"defaultValue":null,"description":"Callback notified when the range of rendered cells changes.","name":"onCellsRendered","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((visibleCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }, allCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(visibleCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }, allCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void","description":"","fullComment":"","tags":{}}]}},"onResize":{"defaultValue":null,"description":"Callback notified when the Grid\'s outermost HTMLElement resizes.\\nThis may be used to (re)scroll a cell into view.","name":"onResize","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void","description":"","fullComment":"","tags":{}}]}},"overscanCount":{"defaultValue":{"value":"3"},"description":"How many additional rows/columns to render outside of the visible area.\\nThis can reduce visual flickering near the edges of a grid when scrolling.","name":"overscanCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"rowCount":{"defaultValue":null,"description":"Number of rows to be rendered in the grid.","name":"rowCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"rowHeight":{"defaultValue":null,"description":"Row height; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current height (string)\\n- function that returns the row height (in pixels) given an index and `cellProps`","name":"rowHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"tagName":{"defaultValue":{"value":"\\"div\\" as TagName"},"description":"Can be used to override the root HTML element rendered by the List component.\\nThe default value is \\"div\\", meaning that List renders an HTMLDivElement as its root.\\n\\n⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.","name":"tagName","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements | undefined","value":[{"value":"undefined"},{"value":"\\"symbol\\""},{"value":"\\"object\\""},{"value":"\\"slot\\""},{"value":"\\"style\\""},{"value":"\\"title\\""},{"value":"\\"search\\""},{"value":"\\"article\\""},{"value":"\\"button\\""},{"value":"\\"dialog\\""},{"value":"\\"figure\\""},{"value":"\\"form\\""},{"value":"\\"img\\""},{"value":"\\"link\\""},{"value":"\\"main\\""},{"value":"\\"menu\\""},{"value":"\\"menuitem\\""},{"value":"\\"option\\""},{"value":"\\"switch\\""},{"value":"\\"table\\""},{"value":"\\"text\\""},{"value":"\\"time\\""},{"value":"\\"a\\""},{"value":"\\"abbr\\""},{"value":"\\"address\\""},{"value":"\\"area\\""},{"value":"\\"aside\\""},{"value":"\\"audio\\""},{"value":"\\"b\\""},{"value":"\\"base\\""},{"value":"\\"bdi\\""},{"value":"\\"bdo\\""},{"value":"\\"big\\""},{"value":"\\"blockquote\\""},{"value":"\\"body\\""},{"value":"\\"br\\""},{"value":"\\"canvas\\""},{"value":"\\"caption\\""},{"value":"\\"center\\""},{"value":"\\"cite\\""},{"value":"\\"code\\""},{"value":"\\"col\\""},{"value":"\\"colgroup\\""},{"value":"\\"data\\""},{"value":"\\"datalist\\""},{"value":"\\"dd\\""},{"value":"\\"del\\""},{"value":"\\"details\\""},{"value":"\\"dfn\\""},{"value":"\\"div\\""},{"value":"\\"dl\\""},{"value":"\\"dt\\""},{"value":"\\"em\\""},{"value":"\\"embed\\""},{"value":"\\"fieldset\\""},{"value":"\\"figcaption\\""},{"value":"\\"footer\\""},{"value":"\\"h1\\""},{"value":"\\"h2\\""},{"value":"\\"h3\\""},{"value":"\\"h4\\""},{"value":"\\"h5\\""},{"value":"\\"h6\\""},{"value":"\\"head\\""},{"value":"\\"header\\""},{"value":"\\"hgroup\\""},{"value":"\\"hr\\""},{"value":"\\"html\\""},{"value":"\\"i\\""},{"value":"\\"iframe\\""},{"value":"\\"input\\""},{"value":"\\"ins\\""},{"value":"\\"kbd\\""},{"value":"\\"keygen\\""},{"value":"\\"label\\""},{"value":"\\"legend\\""},{"value":"\\"li\\""},{"value":"\\"map\\""},{"value":"\\"mark\\""},{"value":"\\"meta\\""},{"value":"\\"meter\\""},{"value":"\\"nav\\""},{"value":"\\"noindex\\""},{"value":"\\"noscript\\""},{"value":"\\"ol\\""},{"value":"\\"optgroup\\""},{"value":"\\"output\\""},{"value":"\\"p\\""},{"value":"\\"param\\""},{"value":"\\"picture\\""},{"value":"\\"pre\\""},{"value":"\\"progress\\""},{"value":"\\"q\\""},{"value":"\\"rp\\""},{"value":"\\"rt\\""},{"value":"\\"ruby\\""},{"value":"\\"s\\""},{"value":"\\"samp\\""},{"value":"\\"script\\""},{"value":"\\"section\\""},{"value":"\\"select\\""},{"value":"\\"small\\""},{"value":"\\"source\\""},{"value":"\\"span\\""},{"value":"\\"strong\\""},{"value":"\\"sub\\""},{"value":"\\"summary\\""},{"value":"\\"sup\\""},{"value":"\\"template\\""},{"value":"\\"tbody\\""},{"value":"\\"td\\""},{"value":"\\"textarea\\""},{"value":"\\"tfoot\\""},{"value":"\\"th\\""},{"value":"\\"thead\\""},{"value":"\\"tr\\""},{"value":"\\"track\\""},{"value":"\\"u\\""},{"value":"\\"ul\\""},{"value":"\\"var\\""},{"value":"\\"video\\""},{"value":"\\"wbr\\""},{"value":"\\"webview\\""},{"value":"\\"svg\\""},{"value":"\\"animate\\""},{"value":"\\"animateMotion\\""},{"value":"\\"animateTransform\\""},{"value":"\\"circle\\""},{"value":"\\"clipPath\\""},{"value":"\\"defs\\""},{"value":"\\"desc\\""},{"value":"\\"ellipse\\""},{"value":"\\"feBlend\\""},{"value":"\\"feColorMatrix\\""},{"value":"\\"feComponentTransfer\\""},{"value":"\\"feComposite\\""},{"value":"\\"feConvolveMatrix\\""},{"value":"\\"feDiffuseLighting\\""},{"value":"\\"feDisplacementMap\\""},{"value":"\\"feDistantLight\\""},{"value":"\\"feDropShadow\\""},{"value":"\\"feFlood\\""},{"value":"\\"feFuncA\\""},{"value":"\\"feFuncB\\""},{"value":"\\"feFuncG\\""},{"value":"\\"feFuncR\\""},{"value":"\\"feGaussianBlur\\""},{"value":"\\"feImage\\""},{"value":"\\"feMerge\\""},{"value":"\\"feMergeNode\\""},{"value":"\\"feMorphology\\""},{"value":"\\"feOffset\\""},{"value":"\\"fePointLight\\""},{"value":"\\"feSpecularLighting\\""},{"value":"\\"feSpotLight\\""},{"value":"\\"feTile\\""},{"value":"\\"feTurbulence\\""},{"value":"\\"filter\\""},{"value":"\\"foreignObject\\""},{"value":"\\"g\\""},{"value":"\\"image\\""},{"value":"\\"line\\""},{"value":"\\"linearGradient\\""},{"value":"\\"marker\\""},{"value":"\\"mask\\""},{"value":"\\"metadata\\""},{"value":"\\"mpath\\""},{"value":"\\"path\\""},{"value":"\\"pattern\\""},{"value":"\\"polygon\\""},{"value":"\\"polyline\\""},{"value":"\\"radialGradient\\""},{"value":"\\"rect\\""},{"value":"\\"set\\""},{"value":"\\"stop\\""},{"value":"\\"textPath\\""},{"value":"\\"tspan\\""},{"value":"\\"use\\""},{"value":"\\"view\\""}]}}}')};function r(){return e.jsxs(a,{direction:"column",gap:4,children:[e.jsx(t,{section:"Grids",json:l}),e.jsx(n,{to:"/grid/imperative-api",title:"imperative api"})]})}export{r as default};
+//# sourceMappingURL=PropsRoute-Hhqv1kyZ.js.map

package/docs/assets/{PropsRoute-BMJ0qMWy.js.map → PropsRoute-Hhqv1kyZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PropsRoute-BMJ0qMWy.js","sources":["../../src/routes/grid/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/Grid.json\";\n\nexport default function GridPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Grids\" json={json} />\n      <ContinueLink to=\"/grid/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["GridPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"k9eAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}
+{"version":3,"file":"PropsRoute-Hhqv1kyZ.js","sources":["../../src/routes/grid/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/Grid.json\";\n\nexport default function GridPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Grids\" json={json} />\n      <ContinueLink to=\"/grid/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["GridPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"k9eAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}

package/docs/assets/RTLGridsRoute-C7t1OLVr.js

@@ -0,0 +1,2 @@
+import{j as s,B as a,E as n}from"./index-Cnm6lMUF.js";import{B as t}from"./arePropsEqual-CaQN03VG.js";import{C as p}from"./Code-r2plEB3N.js";import{H as c}from"./Header-CWpEkQSA.js";import{L as e}from"./LoadingSpinner-D94ZhMZx.js";import{c as o,i,u as l}from"./useContacts-X0AOlpLx.js";import{G as r}from"./Grid-BjC_BndR.js";import"./contacts-Bxrk2JS2.js";const d='<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">Grid</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">RtlExample</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">contacts</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><span class="tok-propertyName tok-definition">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</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">Grid</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">CellComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">contacts</span><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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">10</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">columnWidth</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">dir</span><span class="tok-operator">=</span><span class="tok-string">"rtl"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">contacts</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">35</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">/&#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>';function u({contacts:a}){return s.jsx(r,{cellComponent:h,cellProps:{contacts:a},columnCount:10,columnWidth:o,dir:"rtl",rowCount:a.length,rowHeight:35})}function h({contacts:a,columnIndex:n,rowIndex:t,style:p}){const c=a[t][i(n)];return s.jsxs("div",{className:"truncate leading-none",style:p,children:[s.jsx("div",{children:c}),s.jsxs("small",{className:"text-slate-400",children:["row ",t,", col ",n]})]})}function m(){const o=l();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(c,{section:"Other",title:"Right to left content"}),s.jsxs("div",{children:["Grids can also display right to left languages (like Arabic). The grid components check the"," ",s.jsxs(n,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir",children:[s.jsx("code",{children:"dir"})," attribute"]})," ","to determine content directionality."]}),s.jsx("div",{children:"Using the same data as from the previous example, here is a grid rendered right to left."}),s.jsxs(t,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!o.length&&s.jsx(e,{}),s.jsx(u,{contacts:o})]}),s.jsx(p,{html:d})]})}export{m as default};
+//# sourceMappingURL=RTLGridsRoute-C7t1OLVr.js.map

package/docs/assets/RTLGridsRoute-C7t1OLVr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RTLGridsRoute-C7t1OLVr.js","sources":["../../src/routes/grid/examples/RtlGrid.example.tsx","../../src/routes/grid/RTLGridsRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction RtlExample({ contacts }: { contacts: Contact[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ contacts }}\n      columnCount={10}\n      columnWidth={columnWidth}\n      dir=\"rtl\"\n      rowCount={contacts.length}\n      rowHeight={35}\n    />\n  );\n}\n\n// <end>\n\nimport { type CellComponentProps } from \"react-window\";\nimport { indexToColumn } from \"./shared\";\n\nfunction CellComponent({\n  contacts,\n  columnIndex,\n  rowIndex,\n  style\n}: CellComponentProps<{\n  contacts: Contact[];\n}>) {\n  const address = contacts[rowIndex];\n  const content = address[indexToColumn(columnIndex)];\n\n  return (\n    <div className=\"truncate leading-none\" style={style}>\n      <div>{content}</div>\n      <small className=\"text-slate-400\">\n        row {rowIndex}, col {columnIndex}\n      </small>\n    </div>\n  );\n}\n\nexport { CellComponent, RtlExample };\nexport type { Contact };\n","import RtlGridMarkdown from \"../../../public/generated/code-snippets/RtlGrid.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Code } from \"../../components/code/Code\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { RtlExample } from \"./examples/RtlGrid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RTLGridsRoute() {\n  const contacts = useContacts();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Other\" title=\"Right to left content\" />\n      <div>\n        Grids can also display right to left languages (like Arabic). The grid\n        components check the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\">\n          <code>dir</code> attribute\n        </ExternalLink>{\" \"}\n        to determine content directionality.\n      </div>\n      <div>\n        Using the same data as from the previous example, here is a grid\n        rendered right to left.\n      </div>\n      <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <RtlExample contacts={contacts} />\n      </Block>\n      <Code html={RtlGridMarkdown.html} />\n    </Box>\n  );\n}\n"],"names":["RtlExample","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","dir","rowCount","length","rowHeight","columnIndex","rowIndex","style","content","indexToColumn","jsxs","className","children","RTLGridsRoute","useContacts","Box","direction","gap","Header","section","title","ExternalLink","href","Block","LoadingSpinner","Code","html","RtlGridMarkdown"],"mappings":"yoKASA,SAASA,GAAWC,SAAEA,IACpB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,IAAI,MACJC,SAAUT,EAASU,OACnBC,UAAW,IAGjB,CAOA,SAASP,GAAcJ,SACrBA,EAAAY,YACAA,EAAAC,SACAA,EAAAC,MACAA,IAIA,MACMC,EADUf,EAASa,GACDG,EAAcJ,IAEtC,SACEK,KAAC,MAAA,CAAIC,UAAU,wBAAwBJ,QACrCK,SAAA,GAAAlB,IAAC,OAAKkB,SAAAJ,MACNE,KAAC,QAAA,CAAMC,UAAU,iBAAiBC,SAAA,CAAA,OAC3BN,EAAS,SAAOD,OAI7B,CCrCA,SAAwBQ,IACtB,MAAMpB,EAAWqB,IAEjB,OACEJ,EAAAA,KAACK,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BL,SAAA,CAAAlB,EAAAA,IAACwB,EAAA,CAAOC,QAAQ,QAAQC,MAAM,iCAC7B,MAAA,CAAIR,SAAA,CAAA,8FAEkB,MACrBF,KAACW,EAAA,CAAaC,KAAK,oFACjBV,SAAA,GAAAlB,IAAC,QAAKkB,SAAA,QAAU,gBACF,IAAI,4CAGtBlB,IAAC,OAAIkB,SAAA,6FAILF,EAAAA,KAACa,EAAA,CAAMZ,UAAU,qBAAqB,oBAAkB,OACrDC,SAAA,EAACnB,EAASU,cAAWqB,EAAA,CAAA,GACtB9B,MAACF,GAAWC,kBAEdC,IAAC+B,EAAA,CAAKC,KAAMC,MAGlB"}

package/docs/assets/RenderingGridRoute-Cd7Z3aKa.js

@@ -0,0 +1,2 @@
+import{j as s,B as a,C as n,E as p}from"./index-Cnm6lMUF.js";import{B as t}from"./arePropsEqual-CaQN03VG.js";import{C as c}from"./Code-r2plEB3N.js";import{C as e}from"./ContinueLink-BDXFlJ2t.js";import{H as i}from"./Header-CWpEkQSA.js";import{L as l}from"./LoadingSpinner-D94ZhMZx.js";import{C as o}from"./CellComponent.example-uUYIhpiW.js";import{c as d,u as r}from"./useContacts-X0AOlpLx.js";import{G as h}from"./Grid-BjC_BndR.js";import"./contacts-Bxrk2JS2.js";const u='<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">contacts</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-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">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</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">const</span><span class=""> </span><span class="tok-variableName tok-definition">address</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">contacts</span><span class="tok-punctuation">[</span><span class="tok-variableName">rowIndex</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-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">content</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">address</span><span class="tok-punctuation">[</span><span class="tok-variableName">indexToColumn</span><span class="tok-punctuation">(</span><span class="tok-variableName">columnIndex</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></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">className</span><span class="tok-operator">=</span><span class="tok-string">"truncate"</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">{</span><span class="tok-variableName">content</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>',k='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">columnWidth</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</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">switch</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">indexToColumn</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><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-keyword">case</span><span class=""> </span><span class="tok-string">"address"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">250</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">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"email"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">300</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">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"job_title"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">150</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">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"timezone"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">200</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">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"zip"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">75</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">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">default</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">100</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">}</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',m='<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">Grid</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-propertyName">contacts</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><span class="tok-propertyName tok-definition">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</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">Grid</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">CellComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">contacts</span><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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">10</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">columnWidth</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">contacts</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">25</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">/&#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>';function v({contacts:a}){return s.jsx(h,{cellComponent:o,cellProps:{contacts:a},columnCount:10,columnWidth:d,rowCount:a.length,rowHeight:25})}function g(){const o=r();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(i,{section:"Grids",title:"Rendering a grid"}),s.jsxs("div",{children:["Use the ",s.jsx("code",{children:"Grid"})," component to render data with many rows and columns:"]}),s.jsxs(t,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!o.length&&s.jsx(l,{}),s.jsx(v,{contacts:o})]}),s.jsx("div",{children:"Grids require you to specify the number of rows and columns as well as the width and height of each:"}),s.jsx(c,{html:m}),s.jsx("div",{children:"Column widths and row heights can be either numbers or functions. In the example above, row height is fixed and column width is function that determines the width of the column based on the column index:"}),s.jsx(c,{html:k}),s.jsxs("div",{children:["Lastly grids require a component to render cell, given a column and row index. As with lists, this component receives additional props specified as part of ",s.jsx("code",{children:"cellProps"}),":"]}),s.jsx(c,{html:u}),s.jsx(n,{intent:"warning",children:s.jsxs(a,{direction:"column",gap:4,children:[s.jsxs("div",{children:["Grids require space to render cells. Typically the"," ",s.jsx(p,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),s.jsxs("div",{children:["If an explicit width and height are specified (in pixels) using the"," ",s.jsx("code",{children:"style"})," prop, ",s.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),s.jsx(e,{to:"/grid/props",title:"component props"})]})}export{g as default};
+//# sourceMappingURL=RenderingGridRoute-Cd7Z3aKa.js.map

package/docs/assets/RenderingGridRoute-Cd7Z3aKa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderingGridRoute-Cd7Z3aKa.js","sources":["../../src/routes/grid/examples/Grid.example.tsx","../../src/routes/grid/RenderingGridRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { CellComponent } from \"./CellComponent.example\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction Example({ contacts }: { contacts: Contact[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ contacts }}\n      columnCount={10}\n      columnWidth={columnWidth}\n      rowCount={contacts.length}\n      rowHeight={25}\n    />\n  );\n}\n\n// <end>\n\nexport { CellComponent, Example };\nexport type { Contact };\n","import CellComponentMarkdown from \"../../../public/generated/code-snippets/CellComponent.json\";\nimport columnWidthMarkdown from \"../../../public/generated/code-snippets/columnWidth.json\";\nimport GridMarkdown from \"../../../public/generated/code-snippets/Grid.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/Grid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RenderingGridRoute() {\n  const contacts = useContacts();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Grids\" title=\"Rendering a grid\" />\n      <div>\n        Use the <code>Grid</code> component to render data with many rows and\n        columns:\n      </div>\n      <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <Example contacts={contacts} />\n      </Block>\n      <div>\n        Grids require you to specify the number of rows and columns as well as\n        the width and height of each:\n      </div>\n      <Code html={GridMarkdown.html} />\n      <div>\n        Column widths and row heights can be either numbers or functions. In the\n        example above, row height is fixed and column width is function that\n        determines the width of the column based on the column index:\n      </div>\n      <Code html={columnWidthMarkdown.html} />\n      <div>\n        Lastly grids require a component to render cell, given a column and row\n        index. As with lists, this component receives additional props specified\n        as part of <code>cellProps</code>:\n      </div>\n      <Code html={CellComponentMarkdown.html} />\n      <Callout intent=\"warning\">\n        <Box direction=\"column\" gap={4}>\n          <div>\n            Grids require space to render cells. Typically the{\" \"}\n            <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n              ResizeObserver\n            </ExternalLink>{\" \"}\n            API is used to determine how much space there is available within\n            the parent DOM element.\n          </div>\n          <div>\n            If an explicit width and height are specified (in pixels) using the{\" \"}\n            <code>style</code> prop, <code>ResizeObserver</code> will not be\n            used.\n          </div>\n        </Box>\n      </Callout>\n      <ContinueLink to=\"/grid/props\" title=\"component props\" />\n    </Box>\n  );\n}\n"],"names":["Example","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","length","rowHeight","RenderingGridRoute","useContacts","jsxs","Box","direction","gap","children","Header","section","title","Block","className","LoadingSpinner","Code","html","GridMarkdown","columnWidthMarkdown","CellComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"0pgBAUA,SAASA,GAAQC,SAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,SAAUR,EAASS,OACnBC,UAAW,IAGjB,CCPA,SAAwBC,IACtB,MAAMX,EAAWY,IAEjB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAhB,EAAAA,IAACiB,EAAA,CAAOC,QAAQ,QAAQC,MAAM,4BAC7B,MAAA,CAAIH,SAAA,CAAA,aACKhB,IAAC,QAAKgB,SAAA,SAAW,2DAG3BJ,EAAAA,KAACQ,EAAA,CAAMC,UAAU,qBAAqB,oBAAkB,OACrDL,SAAA,EAACjB,EAASS,cAAWc,EAAA,CAAA,GACtBtB,MAACF,GAAQC,kBAEXC,IAAC,OAAIgB,SAAA,2GAILhB,IAACuB,EAAA,CAAKC,KAAMC,MACZzB,IAAC,OAAIgB,SAAA,kNAKLhB,IAACuB,EAAA,CAAKC,KAAME,WACX,MAAA,CAAIV,SAAA,CAAA,iKAGQhB,IAAC,QAAKgB,SAAA,cAAgB,SAEnChB,IAACuB,EAAA,CAAKC,KAAMG,IACZ3B,EAAAA,IAAC4B,GAAQC,OAAO,UACdb,gBAACH,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAJ,OAAC,MAAA,CAAII,SAAA,CAAA,qDACgD,IACnDhB,EAAAA,IAAC8B,EAAA,CAAaC,KAAK,kEAAkEf,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEhB,IAAC,QAAKgB,SAAA,UAAY,YAAOhB,IAAC,QAAKgB,SAAA,mBAAqB,6BAK1DhB,EAAAA,IAACgC,EAAA,CAAaC,GAAG,cAAcd,MAAM,sBAG3C"}