react-window 2.1.0-alpha.0 → 2.1.0

package/docs/assets/{HorizontalListsRoute-DBeYXDTd.js → HorizontalListsRoute-NkWYfLJB.js}

@@ -1,2 +1,2 @@
-import{j as s,c as a,r as n,B as p}from"./index-0ZXvQVSH.js";import{B as t}from"./arePropsEqual-U1Tm1J18.js";import{F as c}from"./FormattedCode-C9MIMH17.js";import{L as e}from"./LoadingSpinner-tWpMuzoA.js";import{G as l}from"./Grid-CgYC2ncE.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-DBeYXDTd.js.map
+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-DBeYXDTd.js.map → HorizontalListsRoute-NkWYfLJB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"HorizontalListsRoute-DBeYXDTd.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"}
+{"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-CVproCzF.js → ImperativeApiRoute-DcSRabeU.js}

@@ -1,2 +1,2 @@
-import{r as s,j as a,B as n,a as p,C as t}from"./index-0ZXvQVSH.js";import{L as c}from"./List-CxgHSppl.js";import{B as e}from"./arePropsEqual-U1Tm1J18.js";import{F as i}from"./FormattedCode-C9MIMH17.js";import{H as l}from"./Header-BdKWSvvb.js";import{L as o}from"./LoadingSpinner-tWpMuzoA.js";import{S as d}from"./Select-DqyIzw3c.js";import{u as r,R as u}from"./useCitiesByState-CwP17AWg.js";import{C as k}from"./ContinueLink-Bt_isYvF.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-CVproCzF.js.map
+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-CVproCzF.js.map → ImperativeApiRoute-DcSRabeU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ImperativeApiRoute-CVproCzF.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"}
+{"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-rlhH1_Qi.js → ImperativeApiRoute-UKz530Oz.js}

@@ -1,2 +1,2 @@
-import{r as s,j as a,B as n,a as p,C as t}from"./index-0ZXvQVSH.js";import{G as c}from"./Grid-CgYC2ncE.js";import{B as e}from"./arePropsEqual-U1Tm1J18.js";import{F as o}from"./FormattedCode-C9MIMH17.js";import{H as i}from"./Header-BdKWSvvb.js";import{L as l}from"./LoadingSpinner-tWpMuzoA.js";import{S as d}from"./Select-DqyIzw3c.js";import{C as r}from"./CellComponent.example-Fvf2fNMJ.js";import{u,C as k,c as h}from"./useContacts-BUeepGdf.js";import{C as m}from"./ContinueLink-Bt_isYvF.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-rlhH1_Qi.js.map
+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