react-window 2.1.0 → 2.1.2

package/docs/assets/HorizontalListsRoute-NkWYfLJB.js

@@ -1,2 +0,0 @@
-import{j as s,c as a,r as n,B as p}from"./index-1kZ13GgQ.js";import{B as t}from"./arePropsEqual-Bd1V-lj7.js";import{F as c}from"./FormattedCode-DJTpo7zC.js";import{L as e}from"./LoadingSpinner-C-xNF7A_.js";import{G as l}from"./Grid-vld19V9I.js";import{j as i}from"./contacts-Bxrk2JS2.js";const o={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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">HorizontalList</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">emails</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">emails</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-variableName">emails</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">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">150</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-number">1</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-string">"100%"</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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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">HorizontalList</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">emails</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">emails</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </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">emails</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-variableName">emails</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">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">150</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-number">1</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-string">"100%"</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>'},d={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">emails</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">cn</span><span class="tok-punctuation">(</span><span class="tok-string">"px-2 truncate text-center leading-[2.5]"</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-string">"bg-white/10 rounded"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">columnIndex</span><span class=""> </span><span class="tok-operator">%</span><span class=""> </span><span class="tok-number">2</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</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-punctuation">}</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">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""></span></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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-punctuation">[</span><span class="tok-variableName">columnIndex</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">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">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">emails</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><span class="tok-propertyName tok-definition">emails</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">cn</span><span class="tok-punctuation">(</span><span class="tok-string">"px-2 truncate text-center leading-[2.5]"</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-string">"bg-white/10 rounded"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">columnIndex</span><span class=""> </span><span class="tok-operator">%</span><span class=""> </span><span class="tok-number">2</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</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-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">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""></span></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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-punctuation">[</span><span class="tok-variableName">columnIndex</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function r({columnIndex:n,emails:p,style:t}){return s.jsx("div",{className:a("px-2 truncate text-center leading-[2.5]",{"bg-white/10 rounded":n%2==0}),style:t,children:p[n]})}function u({emails:a}){return s.jsx(l,{cellComponent:r,cellProps:{emails:a},columnCount:a.length,columnWidth:150,rowCount:1,rowHeight:"100%"})}function k(){const a=n.useMemo(()=>i?i.map(s=>s.email).sort((s,a)=>s.localeCompare(a)):[],[]);return s.jsxs(p,{direction:"column",gap:4,children:[s.jsx("div",{children:"A horizontal list is just a grid with only one row."}),s.jsx("div",{children:"Here's an example horizontal list (grid) of emails:"}),s.jsxs(t,{className:"h-20","data-focus-within":"bold",children:[!a.length&&s.jsx(e,{}),s.jsx(u,{emails:a})]}),s.jsx("div",{children:"Here's what the configuration for the grid above looks like:"}),s.jsx(c,{markdown:o}),s.jsx("div",{children:"And here's the cell renderer:"}),s.jsx(c,{markdown:d})]})}export{k as default};
-//# sourceMappingURL=HorizontalListsRoute-NkWYfLJB.js.map

package/docs/assets/HorizontalListsRoute-NkWYfLJB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalListsRoute-NkWYfLJB.js","sources":["../../src/routes/grid/examples/HorizontalListCellRenderer.example.tsx","../../src/routes/grid/examples/HorizontalList.example.tsx","../../src/routes/grid/HorizontalListsRoute.tsx","../../src/routes/grid/hooks/useEmails.ts"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n  columnIndex,\n  emails,\n  style\n}: CellComponentProps<{ emails: string[] }>) {\n  return (\n    <div\n      className={cn(\"px-2 truncate text-center leading-[2.5]\", {\n        \"bg-white/10 rounded\": columnIndex % 2 === 0\n      })}\n      style={style}\n    >\n      {emails[columnIndex]}\n    </div>\n  );\n}\n\n// <end>\n\nexport { CellComponent };\n","import { CellComponent } from \"./HorizontalListCellRenderer.example\";\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction HorizontalList({ emails }: { emails: string[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ emails }}\n      columnCount={emails.length}\n      columnWidth={150}\n      rowCount={1}\n      rowHeight=\"100%\"\n    />\n  );\n}\n\n// <end>\n\nexport { HorizontalList };\n","import HorizontalListMarkdown from \"../../../public/generated/code-snippets/HorizontalList.json\";\nimport HorizontalListCellRendererMarkdown from \"../../../public/generated/code-snippets/HorizontalListCellRenderer.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { HorizontalList } from \"./examples/HorizontalList.example\";\nimport { useEmails } from \"./hooks/useEmails\";\n\nexport default function HorizontalListsRoute() {\n  const emails = useEmails();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <div>A horizontal list is just a grid with only one row.</div>\n      <div>Here's an example horizontal list (grid) of emails:</div>\n      <Block className=\"h-20\" data-focus-within=\"bold\">\n        {!emails.length && <LoadingSpinner />}\n        <HorizontalList emails={emails} />\n      </Block>\n      <div>Here's what the configuration for the grid above looks like:</div>\n      <FormattedCode markdown={HorizontalListMarkdown} />\n      <div>And here's the cell renderer:</div>\n      <FormattedCode markdown={HorizontalListCellRendererMarkdown} />\n    </Box>\n  );\n}\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/contacts.json\";\n\nexport function useEmails(): string[] {\n  return useMemo(() => {\n    if (json) {\n      return json\n        .map((contact) => contact.email)\n        .sort((a, b) => a.localeCompare(b));\n    }\n\n    return [];\n  }, []);\n}\n"],"names":["CellComponent","columnIndex","emails","style","jsx","className","cn","children","HorizontalList","Grid","cellComponent","cellProps","columnCount","length","columnWidth","rowCount","rowHeight","HorizontalListsRoute","useMemo","json","map","contact","email","sort","a","b","localeCompare","jsxs","Box","direction","gap","Block","LoadingSpinner","FormattedCode","markdown","HorizontalListMarkdown","HorizontalListCellRendererMarkdown"],"mappings":"69kBAMA,SAASA,GAAcC,YACrBA,EAAAC,OACAA,EAAAC,MACAA,IAEA,OACEC,EAAAA,IAAC,MAAA,CACCC,UAAWC,EAAG,0CAA2C,CACvD,sBAAuBL,EAAc,GAAM,IAE7CE,QAECI,WAAON,IAGd,CCfA,SAASO,GAAeN,OAAEA,IACxB,OACEE,EAAAA,IAACK,EAAA,CACCC,cAAeV,EACfW,UAAW,CAAET,UACbU,YAAaV,EAAOW,OACpBC,YAAa,IACbC,SAAU,EACVC,UAAU,QAGhB,CCRA,SAAwBC,IACtB,MAAMf,ECNCgB,EAAAA,QAAQ,IACTC,EACKA,EACJC,IAAKC,GAAYA,EAAQC,OACzBC,KAAK,CAACC,EAAGC,IAAMD,EAAEE,cAAcD,IAG7B,GACN,IDAH,OACEE,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BvB,SAAA,GAAAH,IAAC,OAAIG,SAAA,0DACLH,IAAC,OAAIG,SAAA,wDACLoB,EAAAA,KAACI,EAAA,CAAM1B,UAAU,OAAO,oBAAkB,OACvCE,SAAA,EAACL,EAAOW,cAAWmB,EAAA,CAAA,GACpB5B,MAACI,GAAeN,gBAElBE,IAAC,OAAIG,SAAA,mEACLH,IAAC6B,EAAA,CAAcC,SAAUC,MACzB/B,IAAC,OAAIG,SAAA,oCACLH,IAAC6B,EAAA,CAAcC,SAAUE,MAG/B"}

package/docs/assets/ImperativeApiRoute-DcSRabeU.js

@@ -1,2 +0,0 @@
-import{r as s,j as a,B as n,a as p,C as t}from"./index-1kZ13GgQ.js";import{L as c}from"./List-BgVuV26Q.js";import{B as e}from"./arePropsEqual-Bd1V-lj7.js";import{F as i}from"./FormattedCode-DJTpo7zC.js";import{H as l}from"./Header-CDZFHeTb.js";import{L as o}from"./LoadingSpinner-C-xNF7A_.js";import{S as d}from"./Select-CEO0pd8j.js";import{u as r,R as u}from"./useCitiesByState-CRl37uUx.js";import{C as k}from"./ContinueLink-jysYO6ZF.js";import"./addresses-CDQyd4n9.js";const h=s.useRef,m={javaScript:'<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">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</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">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</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">align</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">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">index</span><span class="tok-punctuation">:</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: 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>',typeScript:'<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">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</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">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</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">align</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">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">index</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>'},v={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useListCallbackRef</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-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">list</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setList</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListCallbackRef</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">list</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setList</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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useListCallbackRef</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">list</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setList</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListCallbackRef</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">list</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setList</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>'},f={javaScript:'<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-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">listRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListRef</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">listRef</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>',typeScript:'<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">listRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListRef</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">listRef</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>'},g={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useListRef</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>'};function y(s,{items:a}){return"state"===a[s].type?30:25}const x={label:"",value:""},N=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));N.unshift(x);const b=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));function w(){const[w,j]=s.useState(),[R,L]=s.useState(),[C,S]=s.useState(x),A=r(),I=s.useMemo(()=>{const s=A.filter(s=>"state"===s.type).map(s=>({label:s.state,value:s.state}));return s.unshift(x),s},[A]),P=h(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(l,{section:"Lists",title:"Imperative API"}),a.jsx("div",{children:"List provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),a.jsx(i,{markdown:g}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(i,{markdown:f}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(i,{markdown:m}),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(d,{className:"flex-1",onChange:j,options:N,placeholder:"Align",value:w}),a.jsx(d,{className:"flex-1",onChange:L,options:b,placeholder:"Scroll behavior",value:R})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:S,options:I,placeholder:"State",value:C}),a.jsx(p,{className:"shrink-0",disabled:!C.value,onClick:()=>{const s=A.findIndex(s=>"state"===s.type&&s.state===C.value);P.current?.scrollToRow({align:w?.value,behavior:R?.value,index:s})},children:"Scroll"})]}),a.jsxs(e,{className:"h-50","data-focus-within":"bold",children:[!A.length&&a.jsx(o,{}),a.jsx(c,{listRef:P,rowComponent:u,rowCount:A.length,rowHeight:y,rowProps:{items:A}})]}),a.jsxs(t,{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(i,{markdown:v}),a.jsx(k,{to:"/list/aria-roles",title:"ARIA roles"})]})}b.unshift(x);export{w as default};
-//# sourceMappingURL=ImperativeApiRoute-DcSRabeU.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImperativeApiRoute-DcSRabeU.js","sources":["../../lib/components/list/useListRef.ts","../../src/routes/list/examples/rowHeight.example.ts","../../src/routes/list/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { ListImperativeAPI } from \"./types\";\n\n/**\n * Convenience hook to return a properly typed ref for the List component.\n */\nexport const useListRef = useRef as typeof useRef<ListImperativeAPI>;\n","import type { RowProps } from \"./ListVariableRowHeights.example\";\n\n// <begin>\n\nfunction rowHeight(index: number, { items }: RowProps) {\n  return items[index].type === \"state\" ? 30 : 25;\n}\n\n// <end>\n\nexport { rowHeight };\n","import { useMemo, useState } from \"react\";\nimport { List, useListRef, type Align } from \"react-window\";\nimport listRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/listRefClickEventHandler.json\";\nimport useListCallbackRefMarkdown from \"../../../public/generated/code-snippets/useListCallbackRef.json\";\nimport useListRefMarkdown from \"../../../public/generated/code-snippets/useListRef.json\";\nimport useListRefImportMarkdown from \"../../../public/generated/code-snippets/useListRefImport.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Select, type Option } from \"../../components/Select\";\nimport { RowComponent } from \"./examples/ListVariableRowHeights.example\";\nimport { rowHeight } from \"./examples/rowHeight.example\";\nimport { useCitiesByState } from \"./hooks/useCitiesByState\";\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\nexport default function ListImperativeApiRoute() {\n  const [align, setAlign] = useState<Option<Align> | undefined>();\n  const [behavior, setBehavior] = useState<\n    Option<ScrollBehavior> | undefined\n  >();\n  const [state, setState] = useState<Option<string>>(EMPTY_OPTION);\n\n  const citiesByState = useCitiesByState();\n\n  const stateOptions = useMemo<Option<string>[]>(() => {\n    const options: Option<string>[] = citiesByState\n      .filter((item) => item.type === \"state\")\n      .map((item) => ({\n        label: item.state,\n        value: item.state\n      }));\n    options.unshift(EMPTY_OPTION);\n\n    return options;\n  }, [citiesByState]);\n\n  const listRef = useListRef(null);\n\n  const scrollToRow = () => {\n    const index = citiesByState.findIndex(\n      (item) => item.type === \"state\" && item.state === state.value\n    );\n    listRef.current?.scrollToRow({\n      align: align?.value,\n      behavior: behavior?.value,\n      index\n    });\n  };\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"Imperative API\" />\n      <div>\n        List 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      <FormattedCode markdown={useListRefImportMarkdown} />\n      <div>Attach the ref during render:</div>\n      <FormattedCode markdown={useListRefMarkdown} />\n      <div>And call API methods in an event handler:</div>\n      <FormattedCode markdown={listRefClickEventHandlerMarkdown} />\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={setState}\n          options={stateOptions}\n          placeholder=\"State\"\n          value={state}\n        />\n        <Button\n          className=\"shrink-0\"\n          disabled={!state.value}\n          onClick={scrollToRow}\n        >\n          Scroll\n        </Button>\n      </Box>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        {!citiesByState.length && <LoadingSpinner />}\n        <List\n          listRef={listRef}\n          rowComponent={RowComponent}\n          rowCount={citiesByState.length}\n          rowHeight={rowHeight}\n          rowProps={{ items: citiesByState }}\n        />\n      </Block>\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      <FormattedCode markdown={useListCallbackRefMarkdown} />\n      <ContinueLink to=\"/list/aria-roles\" title=\"ARIA roles\" />\n    </Box>\n  );\n}\n"],"names":["useListRef","useRef","rowHeight","index","items","type","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","ListImperativeApiRoute","align","setAlign","useState","behavior","setBehavior","state","setState","citiesByState","useCitiesByState","stateOptions","useMemo","options","filter","item","listRef","jsxs","Box","direction","gap","children","jsx","Header","section","title","FormattedCode","markdown","useListRefImportMarkdown","useListRefMarkdown","listRefClickEventHandlerMarkdown","Select","className","onChange","placeholder","Button","disabled","onClick","findIndex","current","scrollToRow","Block","length","LoadingSpinner","List","rowComponent","RowComponent","rowCount","rowProps","Callout","intent","useListCallbackRefMarkdown","ContinueLink","to"],"mappings":"udAMO,MAAMA,EAAaC,EAAAA,wygBCF1B,SAASC,EAAUC,GAAeC,MAAEA,IAClC,MAA6B,UAAtBA,EAAMD,GAAOE,KAAmB,GAAK,EAC9C,CCaA,MAAMC,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,WAIF,SAAwBK,IACtB,MAAOC,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAOC,GAAYJ,EAAAA,SAAyBV,GAE7Ce,EAAgBC,IAEhBC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4BJ,EAC/BK,OAAQC,GAAuB,UAAdA,EAAKtB,MACtBK,IAAKiB,IAAA,CACJpB,MAAOoB,EAAKR,MACZX,MAAOmB,EAAKR,SAIhB,OAFAM,EAAQd,QAAQL,GAETmB,GACN,CAACJ,IAEEO,EAAU5B,EAAW,MAa3B,OACE6B,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,qBAC9BH,IAAC,OAAID,SAAA,wIAILC,IAACI,EAAA,CAAcC,SAAUC,MACzBN,IAAC,OAAID,SAAA,oCACLC,IAACI,EAAA,CAAcC,SAAUE,MACzBP,IAAC,OAAID,SAAA,gDACLC,IAACI,EAAA,CAAcC,SAAUG,MACzBR,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU9B,EACVU,QAAShB,EACTqC,YAAY,QACZtC,MAAOM,IAEToB,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU3B,EACVO,QAASb,EACTkC,YAAY,kBACZtC,MAAOS,OAGXY,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAUzB,EACVK,QAASF,EACTuB,YAAY,QACZtC,MAAOW,IAETe,EAAAA,IAACa,EAAA,CACCH,UAAU,WACVI,UAAW7B,EAAMX,MACjByC,QAnDY,KAClB,MAAM9C,EAAQkB,EAAc6B,UACzBvB,GAAuB,UAAdA,EAAKtB,MAAoBsB,EAAKR,QAAUA,EAAMX,OAE1DoB,EAAQuB,SAASC,YAAY,CAC3BtC,MAAOA,GAAON,MACdS,SAAUA,GAAUT,MACpBL,WA6CG8B,SAAA,cAIHJ,EAAAA,KAACwB,EAAA,CAAMT,UAAU,OAAO,oBAAkB,OACvCX,SAAA,EAACZ,EAAciC,cAAWC,EAAA,CAAA,GAC3BrB,EAAAA,IAACsB,EAAA,CACC5B,UACA6B,aAAcC,EACdC,SAAUtC,EAAciC,OACxBpD,YACA0D,SAAU,CAAExD,MAAOiB,UAGvBQ,KAACgC,EAAA,CAAQC,OAAO,UACd7B,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOU,UAAU,eAAeX,SAAA,SAAa,wGAGhDC,IAACI,EAAA,CAAcC,SAAUwB,IACzB7B,EAAAA,IAAC8B,EAAA,CAAaC,GAAG,mBAAmB5B,MAAM,iBAGhD,CAnGAzB,EAAUD,QAAQL"}

package/docs/assets/ImperativeApiRoute-UKz530Oz.js

@@ -1,2 +0,0 @@
-import{r as s,j as a,B as n,a as p,C as t}from"./index-1kZ13GgQ.js";import{G as c}from"./Grid-vld19V9I.js";import{B as e}from"./arePropsEqual-Bd1V-lj7.js";import{F as o}from"./FormattedCode-DJTpo7zC.js";import{H as i}from"./Header-CDZFHeTb.js";import{L as l}from"./LoadingSpinner-C-xNF7A_.js";import{S as d}from"./Select-CEO0pd8j.js";import{C as r}from"./CellComponent.example-Cmj5vj6U.js";import{u,C as k,c as h}from"./useContacts-CGODVxAU.js";import{C as m}from"./ContinueLink-jysYO6ZF.js";import"./contacts-Bxrk2JS2.js";const v=s.useRef,g={javaScript:'<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="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="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>',typeScript:'<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={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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-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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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>'},y={javaScript:'<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-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>',typeScript:'<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>'},x={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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>'},N={label:"",value:""},b=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));b.unshift(N);const w=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));w.unshift(N);const j=k.map(s=>({label:s,value:s})).sort((s,a)=>s.label.localeCompare(a.label));function C(){const C=u(),R=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(N)),s},[C]),[G,A]=s.useState(),[I,S]=s.useState(),[P,T]=s.useState(N),[E,H]=s.useState(N),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(o,{markdown:x}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(o,{markdown:y}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(o,{markdown: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(d,{className:"flex-1",onChange:A,options:b,placeholder:"Align",value:G}),a.jsx(d,{className:"flex-1",onChange:S,options:w,placeholder:"Scroll behavior",value:I})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:H,options:R,placeholder:"Job title",value:E}),a.jsx(d,{className:"flex-1",onChange:T,options:j,placeholder:"Column",value:P}),a.jsx(p,{className:"shrink-0",disabled:!P.value&&!E.value,onClick:()=>{const s=L.current;if(s){const a=P?.value?k.indexOf(P.value):void 0,n=E?.value?C.findIndex(s=>s.title===E.value):void 0;void 0!==a&&void 0!==n?s.scrollToCell({behavior:I?.value,columnAlign:G?.value,columnIndex:a,rowAlign:G?.value,rowIndex:n}):void 0!==a?s.scrollToColumn({align:G?.value,behavior:I?.value,index:a}):void 0!==n&&s.scrollToRow({align:G?.value,behavior:I?.value,index:n})}},children:"Scroll"})]}),a.jsxs(e,{className:"h-50","data-focus-within":"bold",children:[!C.length&&a.jsx(l,{}),a.jsx(c,{cellComponent:r,cellProps:{contacts:C},columnCount:j.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(t,{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(o,{markdown:f}),a.jsx(m,{to:"/grid/aria-roles",title:"ARIA roles"})]})}export{C as default};
-//# sourceMappingURL=ImperativeApiRoute-UKz530Oz.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImperativeApiRoute-UKz530Oz.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 { FormattedCode } from \"../../components/code/FormattedCode\";\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      <FormattedCode markdown={useGridRefImportMarkdown} />\n      <div>Attach the ref during render:</div>\n      <FormattedCode markdown={useGridRefMarkdown} />\n      <div>And call API methods in an event handler:</div>\n      <FormattedCode markdown={gridRefClickEventHandlerMarkdown} />\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      <FormattedCode markdown={useGridCallbackRefMarkdown} />\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","FormattedCode","markdown","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":"2gBAMO,MAAMA,EAAaC,EAAAA,4rjBCepBC,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,CAAcC,SAAUC,MACzBL,IAAC,OAAID,SAAA,oCACLC,IAACG,EAAA,CAAcC,SAAUE,MACzBN,IAAC,OAAID,SAAA,gDACLC,IAACG,EAAA,CAAcC,SAAUG,MACzBP,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,CAAcC,SAAUqC,IACzBzC,EAAAA,IAAC0C,EAAA,CAAaC,GAAG,mBAAmB7D,MAAM,iBAGhD"}

package/docs/assets/List-BgVuV26Q.js

@@ -1,2 +0,0 @@
-import{r as e,j as t}from"./index-1kZ13GgQ.js";import{u as o,a as s,b as n}from"./arePropsEqual-Bd1V-lj7.js";function r({children:r,className:i,defaultHeight:a=0,listRef:l,onResize:d,onRowsRendered:c,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:C,getEstimatedSize:y,scrollToIndex:E,startIndexOverscan:R,startIndexVisible:S,stopIndexOverscan:T,stopIndexVisible:j}=n({containerElement:z,defaultContainerSize:a,direction:"vertical",itemCount:f,itemProps:I,itemSize:p,onResize:d,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&&c&&c({startIndex:S,stopIndex:j},{startIndex:R,stopIndex:T})},[c,R,S,T,j]);const H=e.useMemo(()=>{const t=[];if(f>0)for(let o=R;o<=T;o++){const s=C(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,C,f,I,R,T]),O=t.jsx("div",{"aria-hidden":!0,style:{height:y(),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-BgVuV26Q.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"List-BgVuV26Q.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    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","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,qBAAsB/B,EACtBgC,UAAW,WACXC,UAAW1B,EACX2B,UAAWzB,EACX0B,SAAU3B,EACVN,WACAE,kBAGFgC,EAAAA,oBACEnC,EACA,KAAA,CACE,WAAIkB,GACF,OAAOA,CACT,EAEA,WAAAkB,EAAYC,MACVA,EAAQ,OAAAC,SACRA,EAAW,OAAAC,MACXA,IAMA,MAAMC,EAAMjB,EAAc,CACxBc,QACAI,sBAAuBvB,GAASwB,WAAa,EAC7CH,UAG+B,mBAAtBrB,GAASyB,UAClBzB,EAAQyB,SAAS,CACfL,WACAE,OAGN,IAEF,CAACtB,EAASK,IAGZqB,EAAAA,UAAU,KACJpB,GAAsB,GAAKE,GAAqB,GAAKxB,GACvDA,EACE,CACE2C,WAAYpB,EACZqB,UAAWnB,GAEb,CACEkB,WAAYrB,EACZsB,UAAWpB,KAIhB,CACDxB,EACAsB,EACAC,EACAC,EACAC,IAGF,MAAMoB,EAAOhC,EAAAA,QAAQ,KACnB,MAAMlB,EAAwB,GAC9B,GAAIS,EAAW,EACb,IAAA,IACMiC,EAAQf,EACZe,GAASb,EACTa,IACA,CACA,MAAMS,EAAS3B,EAAckB,GAE7B1C,EAASoD,KACPC,EAAAA,cAACpC,EAAA,IACMN,EACL2C,eAAgB,CACd,gBAAiBZ,EAAQ,EACzB,eAAgBjC,EAChB8C,KAAM,YAERC,IAAKd,EACLA,QACA5B,MAAO,CACL2C,SAAU,WACVC,KAAM,EACNC,UAAW,cAAcR,EAAOS,kBAChCC,OAAQV,EAAOW,KACfC,MAAO,UAIf,CAEF,OAAO/D,GACN,CACDiB,EACAO,EACAf,EACAE,EACAgB,EACAE,IAGImC,EACJC,EAAAA,IAAC,MAAA,CACC,eAAW,EACXnD,MAAO,CACL+C,OAAQpC,IACRsC,MAAO,OACPG,QAAQ,KAKd,OAAOb,EAAAA,cACLxC,EACA,CACE0C,KAAM,UACHxC,EACHd,YACAkE,IAAK7C,EACLR,MAAO,CACL2C,SAAU,WACVW,UAAW,OACXC,SAAU,EACVC,UAAW,UACRxD,IAGPoC,EACAlD,EACAgE,EAEJ"}

package/docs/assets/RTLGridsRoute-BQloHP6R.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,E as n}from"./index-1kZ13GgQ.js";import{B as t}from"./arePropsEqual-Bd1V-lj7.js";import{F as p}from"./FormattedCode-DJTpo7zC.js";import{L as c}from"./LoadingSpinner-C-xNF7A_.js";import{c as e,i as o,u as i}from"./useContacts-CGODVxAU.js";import{G as l}from"./Grid-vld19V9I.js";import"./contacts-Bxrk2JS2.js";const r={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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></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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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 d({contacts:a}){return s.jsx(l,{cellComponent:u,cellProps:{contacts:a},columnCount:10,columnWidth:e,dir:"rtl",rowCount:a.length,rowHeight:35})}function u({contacts:a,columnIndex:n,rowIndex:t,style:p}){const c=a[t][o(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 h(){const e=i();return s.jsxs(a,{direction:"column",gap:4,children:[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:[!e.length&&s.jsx(c,{}),s.jsx(d,{contacts:e})]}),s.jsx(p,{markdown:r})]})}export{h as default};
-//# sourceMappingURL=RTLGridsRoute-BQloHP6R.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RTLGridsRoute-BQloHP6R.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 { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\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      <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      <FormattedCode markdown={RtlGridMarkdown} />\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","ExternalLink","href","Block","LoadingSpinner","FormattedCode","markdown","RtlGridMarkdown"],"mappings":"6/SASA,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,CCtCA,SAAwBQ,IACtB,MAAMpB,EAAWqB,IAEjB,OACEJ,EAAAA,KAACK,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BL,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,8FAEkB,MACrBF,KAACQ,EAAA,CAAaC,KAAK,oFACjBP,SAAA,GAAAlB,IAAC,QAAKkB,SAAA,QAAU,gBACF,IAAI,4CAGtBlB,IAAC,OAAIkB,SAAA,6FAILF,EAAAA,KAACU,EAAA,CAAMT,UAAU,qBAAqB,oBAAkB,OACrDC,SAAA,EAACnB,EAASU,cAAWkB,EAAA,CAAA,GACtB3B,MAACF,GAAWC,kBAEdC,IAAC4B,EAAA,CAAcC,SAAUC,MAG/B"}

package/docs/assets/RenderingGridRoute-Dk1bImcY.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,C as n,E as p}from"./index-1kZ13GgQ.js";import{c as t}from"./FixedHeightList-HNBwl6P8.js";import{B as c}from"./arePropsEqual-Bd1V-lj7.js";import{F as e}from"./FormattedCode-DJTpo7zC.js";import{C as i}from"./ContinueLink-jysYO6ZF.js";import{H as o}from"./Header-CDZFHeTb.js";import{L as l}from"./LoadingSpinner-C-xNF7A_.js";import{C as d}from"./CellComponent.example-Cmj5vj6U.js";import{c as r,u}from"./useContacts-CGODVxAU.js";import{G as h}from"./Grid-vld19V9I.js";import"./contacts-Bxrk2JS2.js";const k={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">contacts</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">rowIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">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>'},m={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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></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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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:d,cellProps:{contacts:a},columnCount:10,columnWidth:r,rowCount:a.length,rowHeight:25})}function g(){const d=u();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(o,{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(c,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!d.length&&s.jsx(l,{}),s.jsx(v,{contacts:d})]}),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(e,{markdown: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 variable."}),s.jsx(e,{markdown:t}),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(e,{markdown:k}),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(i,{to:"/grid/props",title:"component props"})]})}export{g as default};
-//# sourceMappingURL=RenderingGridRoute-Dk1bImcY.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RenderingGridRoute-Dk1bImcY.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/FixedHeightList.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 { FormattedCode } from \"../../components/code/FormattedCode\";\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      <FormattedCode markdown={GridMarkdown} />\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 variable.\n      </div>\n      <FormattedCode markdown={columnWidthMarkdown} />\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      <FormattedCode markdown={CellComponentMarkdown} />\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","FormattedCode","markdown","GridMarkdown","columnWidthMarkdown","CellComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"ukmBAUA,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,CAAcC,SAAUC,MACzBzB,IAAC,OAAIgB,SAAA,gJAILhB,IAACuB,EAAA,CAAcC,SAAUE,WACxB,MAAA,CAAIV,SAAA,CAAA,iKAGQhB,IAAC,QAAKgB,SAAA,cAAgB,SAEnChB,IAACuB,EAAA,CAAcC,SAAUG,IACzB3B,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"}

package/docs/assets/StickyRowsRoute-uenoNibk.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,E as n,C as t}from"./index-1kZ13GgQ.js";import{B as p}from"./arePropsEqual-Bd1V-lj7.js";import{F as e}from"./FormattedCode-DJTpo7zC.js";import{H as c}from"./Header-CDZFHeTb.js";import{L as i}from"./List-BgVuV26Q.js";const o={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">RowComponent</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-number">101</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">20</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">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">EMPTY_OBJECT</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-full h-0 top-0 sticky"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"h-[20px] bg-teal-600 px-2 rounded"</span><span class="tok-punctuation">&#62;</span><span class="">Sticky header</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">List</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">RowComponent</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-number">101</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">20</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">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">EMPTY_OBJECT</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-full h-0 top-0 sticky"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"h-[20px] bg-teal-600 px-2 rounded"</span><span class="tok-punctuation">&#62;</span><span class="">Sticky header</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">List</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</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>'},l={};function d({index:a,style:n}){return 0===a?s.jsx("div",{style:n}):s.jsxs("div",{style:n,children:["Row ",a]})}function r(){return s.jsx(i,{rowComponent:d,rowCount:101,rowHeight:20,rowProps:l,children:s.jsx("div",{className:"w-full h-0 top-0 sticky",children:s.jsx("div",{className:"h-[20px] bg-teal-600 px-2 rounded",children:"Sticky header"})})})}function h(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(c,{section:"Other",title:"Sticky rows"}),s.jsxs("div",{children:["If you want to render content on top of your list or grid, the safest method is to use a"," ",s.jsx(n,{href:"https://react.dev/reference/react-dom/createPortal",children:"portal"})," ","and render them directly into the parent document. This avoids potential clipping issues or z-index conflicts."]}),s.jsxs("div",{children:['For the specific case of "sticky" rows, you can render within the parent list or grid using the ',s.jsx("code",{children:"children"})," prop:"]}),s.jsx(p,{className:"h-50","data-focus-within":"bold",children:s.jsx(r,{})}),s.jsx("div",{children:"The example above was created using code like this:"}),s.jsx(e,{markdown:o}),s.jsxs(t,{intent:"warning",children:[s.jsx("strong",{children:"Note"})," the height of 0 in the example above prevents the sticky row from affecting the height of the parent list."]})]})}export{h as default};
-//# sourceMappingURL=StickyRowsRoute-uenoNibk.js.map

package/docs/assets/StickyRowsRoute-uenoNibk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StickyRowsRoute-uenoNibk.js","sources":["../../src/constants.ts","../../src/routes/list/examples/ListWithStickyRows.example.tsx","../../src/routes/list/StickyRowsRoute.tsx"],"sourcesContent":["export const EMPTY_ARRAY: unknown[] = [];\nexport const EMPTY_OBJECT = {};\nexport const NOOP_FUNCTION = () => {};\n","import { EMPTY_OBJECT } from \"../../../constants\";\n\nfunction RowComponent({ index, style }: RowComponentProps<object>) {\n  if (index === 0) {\n    return <div style={style}></div>;\n  }\n\n  return <div style={style}>Row {index}</div>;\n}\n\n// <begin>\n\nimport { List, type RowComponentProps } from \"react-window\";\n\nfunction Example() {\n  return (\n    <List\n      rowComponent={RowComponent}\n      rowCount={101}\n      rowHeight={20}\n      rowProps={EMPTY_OBJECT}\n    >\n      <div className=\"w-full h-0 top-0 sticky\">\n        <div className=\"h-[20px] bg-teal-600 px-2 rounded\">Sticky header</div>\n      </div>\n    </List>\n  );\n}\n\n// <end>\n\nexport { Example };\n","import ListWithStickyRowsMarkdown from \"../../../public/generated/code-snippets/ListWithStickyRows.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/ListWithStickyRows.example\";\n\nexport default function StickyRowsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Other\" title=\"Sticky rows\" />\n      <div>\n        If you want to render content on top of your list or grid, the safest\n        method is to use a{\" \"}\n        <ExternalLink href=\"https://react.dev/reference/react-dom/createPortal\">\n          portal\n        </ExternalLink>{\" \"}\n        and render them directly into the parent document. This avoids potential\n        clipping issues or z-index conflicts.\n      </div>\n      <div>\n        For the specific case of \"sticky\" rows, you can render within the parent\n        list or grid using the <code>children</code> prop:\n      </div>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        <Example />\n      </Block>\n      <div>The example above was created using code like this:</div>\n      <FormattedCode markdown={ListWithStickyRowsMarkdown} />\n      <Callout intent=\"warning\">\n        <strong>Note</strong> the height of 0 in the example above prevents the\n        sticky row from affecting the height of the parent list.\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["EMPTY_OBJECT","RowComponent","index","style","jsx","jsxs","children","Example","List","rowComponent","rowCount","rowHeight","rowProps","className","StickyRowsRoute","Box","direction","gap","Header","section","title","ExternalLink","href","Block","FormattedCode","markdown","ListWithStickyRowsMarkdown","Callout","intent"],"mappings":"8iTACaA,EAAe,CAAA,ECC5B,SAASC,GAAaC,MAAEA,EAAAC,MAAOA,IAC7B,OAAc,IAAVD,EACKE,MAAC,OAAID,UAGPE,OAAC,OAAIF,QAAcG,SAAA,CAAA,OAAKJ,IACjC,CAMA,SAASK,IACP,OACEH,EAAAA,IAACI,EAAA,CACCC,aAAcR,EACdS,SAAU,IACVC,UAAW,GACXC,SAAUZ,EAEVM,SAAAF,EAAAA,IAAC,OAAIS,UAAU,0BACbP,eAAC,MAAA,CAAIO,UAAU,oCAAoCP,SAAA,qBAI3D,CClBA,SAAwBQ,IACtB,OACET,EAAAA,KAACU,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BX,SAAA,CAAAF,EAAAA,IAACc,EAAA,CAAOC,QAAQ,QAAQC,MAAM,uBAC7B,MAAA,CAAId,SAAA,CAAA,2FAEgB,IACnBF,EAAAA,IAACiB,EAAA,CAAaC,KAAK,qDAAqDhB,SAAA,WAExD,IAAI,2HAIrB,MAAA,CAAIA,SAAA,CAAA,qGAEoBF,IAAC,QAAKE,SAAA,aAAe,YAE9CF,EAAAA,IAACmB,GAAMV,UAAU,OAAO,oBAAkB,OACxCP,WAAAF,IAACG,UAEHH,IAAC,OAAIE,SAAA,0DACLF,IAACoB,EAAA,CAAcC,SAAUC,MACzBrB,KAACsB,EAAA,CAAQC,OAAO,UACdtB,SAAA,GAAAF,IAAC,UAAOE,SAAA,SAAa,mHAK7B"}